@vkontakte/vkui 4.28.0 → 4.29.1

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

@@ -0,0 +1,17 @@
+const path = require("path");
+module.exports = {
+  displayName: "unit",
+  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}"],
+  coveragePathIgnorePatterns: [
+    "\\.d\\.ts$",
+    "\\.e2e\\.tsx?$",
+    "src/types",
+    "src/testing",
+  ],
+};

package/package.json

@@ -1,14 +1,9 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.28.0",
+  "version": "4.29.1",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "CONTRIBUTING.md",
-    "VKUI_TOKENS_MIGRATION_GUIDE.md"
-  ],
   "sideEffects": [
     "./dist/lib/polyfills.js",
     "./dist/index.js",
@@ -48,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",
@@ -73,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",
@@ -81,9 +77,8 @@
     "jest-playwright-preset": "^1.4.1",
     "lint-staged": "^12.1.2",
     "mini-css-extract-plugin": "^2.5.2",
-    "playwright": "^1.8.0",
-    "playwright-chromium": "^1.8.0",
-    "playwright-core": "^1.8.0",
+    "playwright": "1.17.2",
+    "playwright-chromium": "1.17.2",
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",
     "postcss-csso": "^6.0.0",
@@ -211,8 +206,11 @@
     "@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"
+  },
+  "engines": {
+    "yarn": ">=1.21.1 <=1.22.18"
   }
 }

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/appearance/constants.ts

@@ -0,0 +1 @@
+export const tabbarHeight = 48;

package/src/components/ActionSheet/ActionSheet.css

@@ -0,0 +1,145 @@
+.ActionSheet {
+  position: relative;
+  overflow: hidden;
+}
+
+.ActionSheet__header {
+  color: var(--text_secondary);
+}
+
+/**
+ * iOS
+ */
+.ActionSheet--ios {
+  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;
+}
+
+.ActionSheet--ios.ActionSheet--closing {
+  transform: translateY(100%);
+  transition: transform 0.3s var(--ios-easing);
+}
+
+.ActionSheet--ios .ActionSheet__header {
+  padding: 15px 10px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 14px 14px 0 0;
+  text-align: center;
+}
+
+.ActionSheet--ios .ActionSheet__title {
+  position: relative;
+  z-index: 2;
+}
+
+.ActionSheet--ios .ActionSheet__title + .ActionSheet__text {
+  margin-top: 9px;
+}
+
+.ActionSheet--ios .ActionSheet__text {
+  position: relative;
+  z-index: 2;
+}
+
+.ActionSheet--ios .ActionSheet__header::before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--modal_card_background);
+  z-index: 1;
+  content: "";
+}
+
+/**
+ * Android
+ */
+.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;
+}
+
+/**
+ * Desktop version
+ */
+
+.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
+*/
+@keyframes vkui-animation-actionsheet-intro {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}