@vkontakte/vkui 4.24.0 → 4.26.0

package/src/styles/themes.css

@@ -2,3 +2,9 @@
 @import "./space_gray.css";
 @import "./vkcom_light.css";
 @import "./vkcom_dark.css";
+@import "../../node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/onlyVariables.css";
+@import "../../node_modules/@vkontakte/vkui-tokens/themes/vkBaseDark/cssVars/declarations/onlyVariablesLocal.css";
+@import "../../node_modules/@vkontakte/vkui-tokens/themes/vkIOS/cssVars/declarations/onlyVariablesLocal.css";
+@import "../../node_modules/@vkontakte/vkui-tokens/themes/vkIOSDark/cssVars/declarations/onlyVariablesLocal.css";
+@import "../../node_modules/@vkontakte/vkui-tokens/themes/vkCom/cssVars/declarations/onlyVariablesLocal.css";
+@import "../../node_modules/@vkontakte/vkui-tokens/themes/vkComDark/cssVars/declarations/onlyVariablesLocal.css";

package/src/styles/vkcom_dark.css

@@ -3,7 +3,8 @@
 * Этот файл сгенерирован автоматически. Не надо править его руками.
 */
 body[scheme="vkcom_dark"],
-[scheme="vkcom_dark"] {
+[scheme="vkcom_dark"],
+.vkuivkcom_dark {
   --accent: #71aaeb;
   --accent_alternate: #ffffff;
   --action_sheet_action_foreground: #ffffff;

package/src/styles/vkcom_light.css

@@ -3,7 +3,8 @@
 * Этот файл сгенерирован автоматически. Не надо править его руками.
 */
 body[scheme="vkcom_light"],
-[scheme="vkcom_light"] {
+[scheme="vkcom_light"],
+.vkuivkcom_light {
   --accent: #5181b8;
   --accent_alternate: #0077ff;
   --action_sheet_action_foreground: #5181b8;

package/src/testing/utils.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
 import { render, RenderResult, screen } from "@testing-library/react";
-import AdaptivityProvider, {
-  AdaptivityProviderProps,
-} from "../components/AdaptivityProvider/AdaptivityProvider";
+import { AdaptivityProvider } from "../components/AdaptivityProvider/AdaptivityProvider";
+import { AdaptivityProps } from "../components/AdaptivityProvider/AdaptivityContext";
 import { ImgOnlyAttributes } from "../lib/utils";
 import { ScrollContext } from "../components/AppRoot/ScrollContext";
 import { act } from "react-dom/test-utils";
@@ -37,7 +36,7 @@ export type ComponentTestOptions = {
   domAttr?: boolean;
   className?: boolean;
   style?: boolean;
-  adaptivity?: AdaptivityProviderProps;
+  adaptivity?: AdaptivityProps;
 };
 
 type BasicProps = { style?: any; className?: string };
@@ -64,7 +63,7 @@ export function baselineComponent<Props extends BasicProps>(
     adaptivity,
   }: ComponentTestOptions = {}
 ) {
-  const Component: React.ComponentType<BasicProps> = adaptivity
+  const Component: React.ComponentType<any> = adaptivity
     ? (p: Props) => (
         <AdaptivityProvider {...adaptivity}>
           <RawComponent {...p} />

package/src/tokenized/index.ts

@@ -0,0 +1,2 @@
+export { default as Button } from "../components/Button/Button";
+export type { ButtonProps } from "../components/Button/Button";

package/tokenized/index.d.ts

@@ -0,0 +1 @@
+export * from "../dist/tokenized";

package/tokenized/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "../dist/cjs/tokenized/index.js",
+  "module": "../dist/tokenized/index.js"
+}

package/tsconfig.json

@@ -9,13 +9,11 @@
     "allowSyntheticDefaultImports": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noImplicitThis": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "moduleResolution": "node",
     "isolatedModules": true,
-    "noImplicitAny": true,
-    "strict": false,
+    "strict": true,
     "baseUrl": "src",
     "paths": {
       "@react-playwright": ["../e2e"]

package/webpack.config.js

@@ -1,5 +1,6 @@
 const path = require("path");
-const merge = require("webpack-merge");
+const webpack = require("webpack");
+const { merge } = require("webpack-merge");
 
 const isProduction = process.env.NODE_ENV === "production";
 process.env.BABEL_KEEP_CSS = "1";
@@ -24,6 +25,11 @@ const config = {
     libraryTarget: "umd",
     globalObject: `typeof self !== 'undefined' ? self : this`,
   },
+  plugins: [
+    new webpack.ProvidePlugin({
+      process: "process/browser",
+    }),
+  ],
   module: {
     rules: [
       {
@@ -33,13 +39,9 @@ const config = {
       },
       {
         test: /\.(jpeg|jpg|png|woff|woff2|svg|otf)$/,
-        use: {
-          loader: "file-loader",
-          options: {
-            esModule: false,
-            outputPath: "static/",
-            name: "[name].[hash:8].[ext]",
-          },
+        type: "asset/resource",
+        generator: {
+          filename: "static/[name].[hash:8].[ext]",
         },
       },
       {

package/webpack.styles.config.js

@@ -34,7 +34,7 @@ module.exports = {
       },
       {
         test: /\.woff|woff2$/,
-        use: ["file-loader"],
+        type: "asset/resource",
       },
     ],
   },
@@ -45,7 +45,10 @@ module.exports = {
         // capture all common deps between stable & unstable
         vkui: {
           name: "vkui",
-          test: (_, chunks) => chunks.some((chunk) => chunk.name === "stable"),
+          test: (module, { chunkGraph }) =>
+            chunkGraph
+              .getModuleChunks(module)
+              .some((chunk) => chunk.name === "stable"),
         },
       },
     },