@vkontakte/vkui 4.28.1 → 4.30.0

package/eslint-plugin-vkui/index.js

@@ -0,0 +1,64 @@
+/** @type {import('eslint').Rule.RuleModule} */
+const noObjectExpressionInArguments = {
+  meta: {
+    schema: [
+      {
+        type: "object",
+        properties: {
+          onlyForFunctionsWithNames: {
+            oneOf: [
+              {
+                type: "array",
+                items: {
+                  type: "string",
+                },
+              },
+              {
+                type: "string",
+              },
+            ],
+          },
+        },
+      },
+    ],
+  },
+  create(context) {
+    const options = context.options;
+    let onlyForFunctionsWithNames = null;
+
+    options.forEach((option) => {
+      if ("onlyForFunctionsWithNames" in option) {
+        onlyForFunctionsWithNames = option.onlyForFunctionsWithNames;
+      }
+    });
+
+    return {
+      /** @param node {import('estree').CallExpression} */
+      CallExpression(node) {
+        if (
+          onlyForFunctionsWithNames &&
+          !onlyForFunctionsWithNames.includes(node.callee.name)
+        ) {
+          return;
+        }
+        const args = node.arguments;
+        for (let i = 0; i < args.length; i += 1) {
+          const arg = args[i];
+          if (arg.type === "ObjectExpression") {
+            context.report({
+              node,
+              message: "Do not use object expression in arguments.",
+            });
+            break;
+          }
+        }
+      },
+    };
+  },
+};
+
+module.exports = {
+  rules: {
+    "no-object-expression-in-arguments": noObjectExpressionInArguments,
+  },
+};

package/eslint-plugin-vkui/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "eslint-plugin-vkui",
+  "version": "1.0.0",
+  "main": "index.js"
+}

package/jest.unit.config.js

@@ -1,7 +1,10 @@
 const path = require("path");
 module.exports = {
   displayName: "unit",
-  roots: [path.join(__dirname, "src")],
+  roots: [
+    path.join(__dirname, "src"),
+    path.join(__dirname, "postcss-plugin-vk-sans"),
+  ],
   setupFilesAfterEnv: [path.join(__dirname, "src/testing/setup.ts")],
   collectCoverage: true,
   collectCoverageFrom: ["src/*/**/*.{ts,tsx}"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.28.1",
+  "version": "4.30.0",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -43,11 +43,11 @@
     "@types/webpack-dev-server": "^3.11.2",
     "@typescript-eslint/eslint-plugin": "^2.28.0",
     "@typescript-eslint/parser": "^2.0.0",
-    "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v9.29.0",
+    "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v9.40.4",
     "@vkontakte/eslint-config": "2.5.0",
     "@vkontakte/icons": "^1.145.1",
     "@vkontakte/vk-bridge": "^2.1.3",
-    "@vkontakte/vkui-tokens": "4.4.0",
+    "@vkontakte/vkui-tokens": "4.7.0",
     "autoprefixer": "^10.4.2",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.3",
@@ -68,6 +68,7 @@
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-react": "^7.16.0",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-vkui": "file:./eslint-plugin-vkui",
     "expect-playwright": "^0.2.6",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
@@ -205,7 +206,7 @@
     "@babel/runtime": "^7.14.6",
     "@popperjs/core": "^2.9.2",
     "@vkontakte/vkjs": "^0.22.2",
-    "date-fns": "^2.28.0",
+    "dayjs": "^1.11.0",
     "mitt": "^3.0.0",
     "react-popper": "^2.2.5"
   },

package/postcss-plugin-vk-sans/__tests__/custom_properties.css

@@ -0,0 +1,4 @@
+/* stylelint-disable-next-line vkui/atomic */
+:root {
+  --avatar-size-40-font-size: 14px;
+}

package/postcss-plugin-vk-sans/index.js

@@ -0,0 +1,350 @@
+/* stylelint-disable */
+const fs = require("fs");
+const path = require("path");
+
+/**
+ * Обязательные правила для стилизации "VK Sans"
+ *
+ * 1) Леттер-спейсинг "VK Sans" должен способствовать FOUT с `-apple-system`
+ * 2) Размер шрифта более чем 21px необходимо переопределять на "VK Sans Display"
+ */
+
+let cache = {
+  config: {},
+  fontSizeUsages: {},
+};
+
+const defaultFeatures = {
+  injectLetterSpacing: true,
+  injectVkSansDisplay: true,
+  overrideToVkSansDisplay: true,
+  overrideCustomFonts: true,
+};
+
+const ignoredFontSizeUnits = ["em", "%", "pt"];
+const initializedCustomPropertiesFiles = new Set();
+const VK_SANS_DISPLAY_SIZE_STARTS = 21;
+
+const letterSpacingFontSizes = Object.entries({
+  none: ["inherit", "0", "0px", "1px"],
+  normal: ["12px", "12.5px", "13px", "small"],
+  "-0.035em": ["20px", "38px", "64px"],
+  "-0.007em": ["13.5px"],
+  "-0.02em": ["medium", "16px", "21px"],
+  "-0.025em": ["large", "17px", "18px", "22px", "23px", "24px", "25px", "28px"],
+  "-0.027em": ["19px", "29px", "30px", "31px", "32px", "34px", "35px", "36px"],
+  "-0.08em": ["20px"],
+  "-0.01em": ["14px", "14.5px"],
+  "-0.017em": ["15px"],
+  "0.05em": ["5px"],
+  "0.04em": ["6px"],
+  "0.035em": ["7px"],
+  "0.027em": ["8px"],
+  "0.02em": ["9px"],
+  "0.015em": ["9.5px", "10px"],
+  "0.007em": ["11px"],
+  "0.005em": ["11.5px"],
+}).reduce((acc, [k, v]) => ({ ...acc, [k]: new Set(v) }), {});
+
+const getLetterSpacingByFontSizeValue = (fontSizeValue, platform) => {
+  const fontSize = Object.entries(cache.config[platform]).find(
+    ([, fontSizes]) => fontSizes.has(fontSizeValue)
+  );
+  if (fontSize) {
+    return fontSize[0];
+  }
+};
+
+const wrapVarValue = (letterSpacingValue, fallbackValue) => {
+  const computedValue = letterSpacingValue.replace("em", "").replace("0.0", "");
+  const varFallbackValue = fallbackValue ? `, ${fallbackValue}` : "";
+
+  if (["normal", "inherit", "initial"].includes(letterSpacingValue)) {
+    return letterSpacingValue;
+  }
+
+  return `var(--vk-sans-ls${computedValue}${varFallbackValue})`;
+};
+
+const updateFontSizeStats = (value = "", platform) => {
+  const cacheHit = cache.fontSizeUsages[value];
+
+  if (
+    getLetterSpacingByFontSizeValue(value, platform) ||
+    ignoredFontSizeUnits.some((i) => value.endsWith(i)) ||
+    value.startsWith("calc")
+  ) {
+    return;
+  }
+
+  if (!cacheHit) {
+    console.log(
+      `[VkSansMandatoryDeclarations]: No "letter-spacing" was configured for "font-size: ${value}"`
+    );
+    cache.fontSizeUsages[value] = 0;
+  }
+
+  return ++cache.fontSizeUsages[value];
+};
+
+const extendConfigWithCustomProperties = (
+  customPropertiesFile,
+  platform,
+  parse
+) => {
+  const customProperties = fs.readFileSync(
+    path.resolve(customPropertiesFile),
+    "utf8"
+  );
+  const customPropertiesValues = {};
+
+  parse(customProperties).walkRules((rule) => {
+    if (
+      rule.parent.type === "root" &&
+      rule.type === "rule" &&
+      rule.selector === ":root"
+    ) {
+      rule.walkDecls((decl) => {
+        if (decl.prop.startsWith("--") && decl.value.endsWith("px")) {
+          if (!customPropertiesValues[decl.value]) {
+            customPropertiesValues[decl.value] = [];
+          }
+
+          customPropertiesValues[decl.value].push(`var(${decl.prop})`);
+        }
+      });
+    }
+  });
+
+  for (const [letterSpacing, fontSizes] of Object.entries(
+    cache.config[platform]
+  )) {
+    for (const fontSize of fontSizes) {
+      customPropertiesValues[fontSize] &&
+        customPropertiesValues[fontSize].forEach((f) =>
+          cache.config[platform][letterSpacing].add(f)
+        );
+    }
+  }
+};
+
+const selectorShouldBeIgnored = (rule, ignoreSelectors) => {
+  if (!ignoreSelectors) {
+    return false;
+  }
+
+  return ignoreSelectors.some((i) =>
+    i instanceof RegExp
+      ? rule.selectors.some((j) => j.search(i) !== -1)
+      : rule.selectors.includes(i)
+  );
+};
+
+const initializeConfig = (platform, overrides) => {
+  cache.config[platform] = { ...letterSpacingFontSizes };
+
+  if (overrides) {
+    for (const [letterSpacing, fontSizes] of Object.entries(overrides)) {
+      fontSizes.forEach((f) => {
+        if (!cache.config[platform][letterSpacing]) {
+          cache.config[platform][letterSpacing] = new Set();
+        }
+
+        cache.config[platform][letterSpacing].add(f);
+      });
+    }
+  }
+};
+
+const initializeCustomPropertiesFiles = (
+  customPropertiesFiles,
+  platform,
+  parse
+) => {
+  customPropertiesFiles.forEach((i) => {
+    if (!initializedCustomPropertiesFiles.has(i)) {
+      extendConfigWithCustomProperties(i, platform, parse);
+      initializedCustomPropertiesFiles.add(i);
+    }
+  });
+};
+
+module.exports = (opts) => {
+  const {
+    debug,
+    overrides,
+    platform = "test",
+    features = defaultFeatures,
+    customPropertiesFiles,
+    ignoreFiles,
+    ignoreSelectors,
+    explicitNormalLetterSpacing,
+    respectImportant,
+    varName = "--palette-vk-font",
+  } = opts;
+
+  return {
+    postcssPlugin: "vk-sans-mandatory-declarations",
+    Once(css, { parse }) {
+      if (!cache.config[platform]) {
+        initializeConfig(platform, overrides);
+      }
+
+      if (customPropertiesFiles) {
+        initializeCustomPropertiesFiles(customPropertiesFiles, platform, parse);
+      }
+
+      if (
+        !ignoreFiles ||
+        !ignoreFiles.length ||
+        !ignoreFiles.some((i) => css.source.input.file.endsWith(i))
+      ) {
+        css.walkRules((rule) => {
+          let hasFontShorthandProp = rule.some((i) => i.prop === "font");
+          let hasFontFamilyProp = rule.some((i) => i.prop === "font-family");
+          let hasFontSizeProp =
+            hasFontShorthandProp || rule.some((i) => i.prop === "font-size");
+          let hasLetterSpacingProp = rule.some(
+            (i) => i.prop === "letter-spacing"
+          );
+          let fontSizeValue;
+          let letterSpacingOverride;
+
+          if (!selectorShouldBeIgnored(rule, ignoreSelectors)) {
+            rule.walkDecls(/^(font|font-size)$/, (decl) => {
+              if (decl.prop === "font") {
+                const match = decl.value.match(
+                  /(([0-9]|[1-9][0-9])px|inherit)/
+                );
+                if (match) {
+                  fontSizeValue = match[0];
+                }
+              } else {
+                fontSizeValue = decl.value.replace(/\s?!important$/, "");
+              }
+
+              letterSpacingOverride = getLetterSpacingByFontSizeValue(
+                fontSizeValue,
+                platform
+              );
+
+              if (debug) {
+                updateFontSizeStats(fontSizeValue, platform);
+                if (Object.keys(cache.fontSizeUsages).length) {
+                  console.log(
+                    `[VkSansMandatoryDeclarations] Unhandled Font Size Usages in "${platform}":`,
+                    cache.fontSizeUsages
+                  );
+                }
+              }
+
+              if (
+                features.injectLetterSpacing &&
+                !hasLetterSpacingProp &&
+                !(
+                  explicitNormalLetterSpacing
+                    ? [undefined]
+                    : ["normal", undefined]
+                ).includes(letterSpacingOverride)
+              ) {
+                const newRule = {
+                  prop: "letter-spacing",
+                  value: wrapVarValue(letterSpacingOverride),
+                };
+
+                hasLetterSpacingProp = true;
+                rule.append(newRule);
+              }
+
+              if (fontSizeValue && fontSizeValue.endsWith("px")) {
+                if (
+                  parseFloat(fontSizeValue.replace("px", "")) >=
+                  VK_SANS_DISPLAY_SIZE_STARTS
+                ) {
+                  if (
+                    features.injectVkSansDisplay ||
+                    features.overrideToVkSansDisplay
+                  ) {
+                    let fontFamilyValue;
+
+                    if (hasFontFamilyProp && features.overrideToVkSansDisplay) {
+                      rule.walkDecls("font-family", (decl) => {
+                        fontFamilyValue = `var(--vk-sans-display, ${decl.value})`;
+                        decl.remove();
+                      });
+                    }
+
+                    if (
+                      fontFamilyValue ||
+                      (!hasFontFamilyProp && features.injectVkSansDisplay)
+                    ) {
+                      rule.append({
+                        prop: "font-family",
+                        value: fontFamilyValue || `var(--vk-sans-display)`,
+                      });
+                      hasFontFamilyProp = true;
+                    }
+                  }
+                } else if (hasFontFamilyProp) {
+                  if (features.overrideCustomFonts) {
+                    rule.walkDecls("font-family", (decl) => {
+                      const fontFaceWhitelist = [
+                        varName,
+                        "--vk-sans-text",
+                        "--palette-vk-font",
+                        "monospace",
+                        "Monospace",
+                      ];
+
+                      if (
+                        decl.value !== "inherit" &&
+                        !fontFaceWhitelist.some((i) => decl.value.includes(i))
+                      ) {
+                        decl.replaceWith({
+                          prop: "font-family",
+                          value: `var(--vk-sans-text, ${decl.value})`,
+                        });
+                      }
+                    });
+                  }
+                }
+              }
+            });
+
+            if (features.injectLetterSpacing) {
+              rule.walkDecls("letter-spacing", (decl) => {
+                const currentLetterSpacingOverride =
+                  getLetterSpacingByFontSizeValue(fontSizeValue, platform);
+
+                if (respectImportant ? !decl.important : true) {
+                  if (
+                    !hasFontSizeProp ||
+                    ["none", undefined].includes(letterSpacingOverride)
+                  ) {
+                    decl.remove();
+                  } else if (
+                    (letterSpacingOverride || currentLetterSpacingOverride) &&
+                    ![
+                      wrapVarValue(currentLetterSpacingOverride),
+                      currentLetterSpacingOverride,
+                    ].includes(decl.value)
+                  ) {
+                    decl.replaceWith({
+                      prop: "letter-spacing",
+                      value: wrapVarValue(
+                        currentLetterSpacingOverride,
+                        decl.value
+                      ),
+                    });
+                  }
+                }
+              });
+            }
+          }
+        });
+      }
+    },
+  };
+};
+
+module.exports.postcss = true;

package/src/components/ActionSheet/ActionSheet.tsx

@@ -13,6 +13,7 @@ import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { useObjectMemo } from "../../hooks/useObjectMemo";
 import { warnOnce } from "../../lib/warnOnce";
 import { SharedDropdownProps, PopupDirection, ToggleRef } from "./types";
+import { useScrollLock } from "../AppRoot/ScrollContext";
 import "./ActionSheet.css";
 
 export interface ActionSheetProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -61,7 +62,10 @@ export const ActionSheet: React.FC<ActionSheetProps> = ({
   };
 
   if (process.env.NODE_ENV === "development" && !restProps.onClose) {
-    warn("can't close on outer click without onClose");
+    warn(
+      `Без свойства "onClose" нельзя закрыть ActionSheet по клику вне компонента`,
+      "error"
+    );
   }
 
   const { viewWidth, viewHeight, hasMouse } = useAdaptivity();
@@ -69,6 +73,8 @@ export const ActionSheet: React.FC<ActionSheetProps> = ({
     viewWidth >= ViewWidth.SMALL_TABLET &&
     (hasMouse || viewHeight >= ViewHeight.MEDIUM);
 
+  useScrollLock(!isDesktop);
+
   let timeout = platform === IOS ? 300 : 200;
 
   if (isDesktop) {

package/src/components/ActionSheet/ActionSheetDropdown.tsx

@@ -23,6 +23,7 @@ export const ActionSheetDropdown: React.FC<SharedDropdownProps> = ({
     <FocusTrap
       {...restProps}
       onClick={stopPropagation}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(baseClaseName, {
         "ActionSheet--closing": closing,
       })}

package/src/components/ActionSheet/ActionSheetDropdownDesktop.tsx

@@ -38,7 +38,7 @@ export const ActionSheetDropdownDesktop: React.FC<SharedDropdownProps> = ({
   useEffectDev(() => {
     const toggleEl = getEl(toggleRef);
     if (!toggleEl) {
-      warn("toggleRef not passed");
+      warn(`Свойство "toggleRef" не передано`, "error");
     }
   }, [toggleRef]);
 

package/src/components/ActionSheet/Readme.md

@@ -1,6 +1,7 @@
 ActionSheet – имитация [нативного компонента](https://developer.apple.com/ios/human-interface-guidelines/views/action-sheets/).
 Удобно использовать, когда нужно дать пользователю выбрать одно из множества действий. В качестве `children` принимает
 коллекцию `ActionSheetItem`.
+На больших экранах прокрутка не отключается.
 
 Передаётся в качестве значения свойства `popout` компонента [`SplitLayout`](#/SplitLayout).
 

package/src/components/ActionSheetItem/ActionSheetItem.tsx

@@ -4,8 +4,8 @@ import { getClassName } from "../../helpers/getClassName";
 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 { Subhead } from "../Typography/Subhead/Subhead";
+import { Title } from "../Typography/Title/Title";
 import Text from "../Typography/Text/Text";
 import { ANDROID, VKCOM } from "../../lib/platform";
 import { Icon16Done, Icon24Done } from "@vkontakte/icons";
@@ -85,6 +85,7 @@ const ActionSheetItemComponent: React.FC<ActionSheetItemProps> = ({
           : onItemClick(onClick, onImmediateClick, Boolean(autoclose))
       }
       activeMode="ActionSheetItem--active"
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("ActionSheetItem", platform),
         `ActionSheetItem--${mode}`,

package/src/components/AdaptivityProvider/AdaptivityProvider.tsx

@@ -8,6 +8,10 @@ import {
   ViewWidth,
 } from "./AdaptivityContext";
 import { useDOM } from "../../lib/dom";
+import {
+  useBridgeAdaptivity,
+  BridgeAdaptivity,
+} from "../../hooks/useBridgeAdaptivity";
 
 export const DESKTOP_SIZE = 1280;
 export const TABLET_SIZE = 1024;
@@ -22,15 +26,12 @@ const AdaptivityProvider: React.FC<AdaptivityProps> = (props) => {
     typeof calculateAdaptivity
   > | null>(null);
   const [, updateAdaptivity] = React.useState({});
+  const bridge = useBridgeAdaptivity();
 
   const { window } = useDOM();
 
   if (!adaptivityRef.current) {
-    adaptivityRef.current = calculateAdaptivity(
-      window ? window.innerWidth : 0,
-      window ? window.innerHeight : 0,
-      props
-    );
+    adaptivityRef.current = calculateAdaptivity(props, bridge, window);
   }
 
   React.useEffect(() => {
@@ -38,11 +39,8 @@ const AdaptivityProvider: React.FC<AdaptivityProps> = (props) => {
       if (adaptivityRef.current === null) {
         return;
       }
-      const calculated = calculateAdaptivity(
-        window!.innerWidth,
-        window!.innerHeight,
-        props
-      );
+
+      const calculated = calculateAdaptivity(props, bridge, window);
       const { viewWidth, viewHeight, sizeX, sizeY, hasMouse, deviceHasHover } =
         adaptivityRef.current;
 
@@ -74,6 +72,7 @@ const AdaptivityProvider: React.FC<AdaptivityProps> = (props) => {
     props.deviceHasHover,
     window,
     props,
+    bridge,
   ]);
 
   return (
@@ -84,16 +83,27 @@ const AdaptivityProvider: React.FC<AdaptivityProps> = (props) => {
 };
 
 function calculateAdaptivity(
-  windowWidth: number,
-  windowHeight: number,
-  props: AdaptivityProps
+  props: AdaptivityProps,
+  bridge: BridgeAdaptivity,
+  window?: Window
 ) {
+  let windowWidth = 0;
+  let windowHeight = 0;
+
+  if (bridge.type === "adaptive") {
+    windowWidth = bridge.viewportWidth;
+    windowHeight = bridge.viewportHeight;
+  } else if (window) {
+    windowWidth = window.innerWidth;
+    windowHeight = window.innerHeight;
+  }
+
   let viewWidth = ViewWidth.SMALL_MOBILE;
   let viewHeight = ViewHeight.SMALL;
   let sizeY = SizeType.REGULAR;
   let sizeX = SizeType.REGULAR;
-  let hasMouse = props.hasMouse ?? _hasMouse;
-  let deviceHasHover = props.deviceHasHover ?? _hasHover;
+  let hasMouse = _hasMouse;
+  let deviceHasHover = _hasHover;
 
   if (windowWidth >= DESKTOP_SIZE) {
     viewWidth = ViewWidth.DESKTOP;
@@ -115,8 +125,13 @@ function calculateAdaptivity(
     viewHeight = ViewHeight.EXTRA_SMALL;
   }
 
-  props.viewWidth && (viewWidth = props.viewWidth);
-  props.viewHeight && (viewHeight = props.viewHeight);
+  if (!bridge.type) {
+    props.viewWidth && (viewWidth = props.viewWidth);
+    props.viewHeight && (viewHeight = props.viewHeight);
+
+    hasMouse = props.hasMouse ?? hasMouse;
+    deviceHasHover = props.deviceHasHover ?? deviceHasHover;
+  }
 
   if (viewWidth <= ViewWidth.MOBILE) {
     sizeX = SizeType.COMPACT;
@@ -129,8 +144,24 @@ function calculateAdaptivity(
     sizeY = SizeType.COMPACT;
   }
 
-  props.sizeX && (sizeX = props.sizeX);
-  props.sizeY && (sizeY = props.sizeY);
+  if (!bridge.type) {
+    props.sizeX && (sizeX = props.sizeX);
+    props.sizeY && (sizeY = props.sizeY);
+  }
+
+  if (
+    bridge.type === "force_mobile" ||
+    bridge.type === "force_mobile_compact"
+  ) {
+    viewWidth = ViewWidth.MOBILE;
+    sizeX = SizeType.COMPACT;
+
+    if (bridge.type === "force_mobile_compact") {
+      sizeY = SizeType.COMPACT;
+    } else {
+      sizeY = SizeType.REGULAR;
+    }
+  }
 
   return { viewWidth, viewHeight, sizeX, sizeY, hasMouse, deviceHasHover };
 }