@vkontakte/vkui 4.24.0 → 4.25.0

package/src/hooks/useWaitTransitionFinish.ts

@@ -5,16 +5,18 @@ export const useWaitTransitionFinish = () => {
   const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const waitTransitionFinish = (
-    element: HTMLElement,
+    element: HTMLElement | null,
     eventHandler: VoidFunction,
     durationFallback: number
   ) => {
     if (element) {
-      if (transitionEvent.supported) {
+      if (transitionEvent.supported && transitionEvent.name) {
         element.removeEventListener(transitionEvent.name, eventHandler);
         element.addEventListener(transitionEvent.name, eventHandler);
       } else {
-        clearTimeout(timeoutRef.current);
+        if (timeoutRef?.current) {
+          clearTimeout(timeoutRef.current);
+        }
         timeoutRef.current = setTimeout(eventHandler, durationFallback);
       }
     }

package/src/index.ts

@@ -244,10 +244,10 @@ export { default as ConfigProvider } from "./components/ConfigProvider/ConfigPro
 export type { ConfigProviderProps } from "./components/ConfigProvider/ConfigProvider";
 export {
   ConfigProviderContext,
-  Appearance,
-  Scheme,
   WebviewType,
 } from "./components/ConfigProvider/ConfigProviderContext";
+export { AppearanceProvider } from "./components/AppearanceProvider/AppearanceProvider";
+export { Scheme, Appearance } from "./helpers/scheme";
 
 /**
  * Advertisement

package/src/lib/SSR.tsx

@@ -4,7 +4,7 @@ import { BrowserInfo, computeBrowserInfo } from "./browser";
 import { DOMContext, getDOM } from "../lib/dom";
 
 export interface SSRContextInterface {
-  platform: PlatformType;
+  platform: PlatformType | null;
   userAgent?: string;
   browserInfo?: BrowserInfo;
 }
@@ -27,7 +27,7 @@ export const SSRWrapper: React.FC<SSRWrapperProps> = (props) => {
     browserInfo = computeBrowserInfo(userAgent);
   }
 
-  // TODO: Каждый раз создаётся новый объект для контекста – плохо
+  // TODO: Каждый раз создаётся новый объект для контекста - плохо
   const contextValue = {
     platform: platform(browserInfo),
     browserInfo,

package/src/lib/accessibility.ts

@@ -52,7 +52,7 @@ const ACCESSIBLE_KEYS: AccessibleKey[] = [
 
 export function pressedKey(
   e: KeyboardEvent | React.KeyboardEvent<HTMLElement>
-): Keys {
+) {
   return (
     ACCESSIBLE_KEYS.find(
       ({ key, keyCode }) => key.includes(e.key) || keyCode === e.keyCode

package/src/lib/animate.ts

@@ -17,6 +17,7 @@ export interface AnimateArgumentsInterface {
   draw: DrawInterface;
 }
 
+// eslint-disable-next-line import/no-default-export
 export default function animate({
   duration,
   timing,

package/src/lib/dom.tsx

@@ -17,8 +17,8 @@ export type DOMProps = DOMContextInterface;
 
 /* eslint-disable no-restricted-globals */
 export const getDOM = () => ({
-  window: canUseDOM ? window : null,
-  document: canUseDOM ? document : null,
+  window: canUseDOM ? window : undefined,
+  document: canUseDOM ? document : undefined,
 });
 /* eslint-enable no-restricted-globals */
 
@@ -30,7 +30,7 @@ export const useDOM = () => {
 
 export function withDOM<Props>(
   Component: React.ComponentType<Props & DOMProps>
-) {
+): React.ComponentType<Props> {
   const WithDOM: React.FC<Props> = (props: Props) => {
     const dom = useDOM();
     return <Component {...props} {...dom} />;

package/src/lib/isRefObject.ts

@@ -6,6 +6,6 @@ export const isRefObject = <T, E = Element>(
   return (
     typeof refObject === "object" &&
     refObject !== null &&
-    refObject.hasOwnProperty("current")
+    (refObject as React.RefObject<E>).hasOwnProperty("current")
   );
 };

package/src/lib/jsxRuntime.ts

@@ -19,11 +19,11 @@ function processProps(props: any) {
   return newProps;
 }
 
-function _createScopedElement(_type: any, props: any) {
+function createScopedElement(_type: any, props?: any) {
   let args = arguments;
 
   if (!props || !("vkuiClass" in props)) {
-    return React.createElement.apply(undefined, args);
+    return React.createElement.apply(undefined, args as any);
   }
 
   let argsLength = args.length;
@@ -35,11 +35,9 @@ function _createScopedElement(_type: any, props: any) {
     createElementArgArray[i] = args[i];
   }
 
-  return React.createElement.apply(null, createElementArgArray);
+  return React.createElement.apply(null, createElementArgArray as any);
 }
 
-_createScopedElement.Fragment = React.Fragment;
+createScopedElement.Fragment = React.Fragment;
 
-export const createScopedElement: typeof React.createElement & {
-  Fragment: typeof React.Fragment;
-} = _createScopedElement;
+export { createScopedElement };

package/src/lib/offset.ts

@@ -1,17 +1,17 @@
 export interface OffsetRectInterface {
-  top: number;
-  left: number;
-  width: number;
-  height: number;
+  top: number | undefined;
+  left: number | undefined;
+  width: number | undefined;
+  height: number | undefined;
 }
 
-export function getOffsetRect(elem: HTMLElement): OffsetRectInterface {
-  const box = elem.getBoundingClientRect();
+export function getOffsetRect(elem: HTMLElement | null): OffsetRectInterface {
+  const box = elem?.getBoundingClientRect();
 
   return {
-    top: box.top,
-    left: box.left,
-    width: elem.offsetWidth,
-    height: elem.offsetHeight,
+    top: box?.top,
+    left: box?.left,
+    width: elem?.offsetWidth,
+    height: elem?.offsetHeight,
   };
 }

package/src/lib/polyfills.ts

@@ -24,7 +24,7 @@ if (canUseDOM) {
   // Element.prototype.closest
   if (!ElementProto.closest) {
     ElementProto.closest = function (css: string): Element | null {
-      let node: Element = this;
+      let node: Element | null = this;
       while (node) {
         if (node.matches(css)) {
           return node;
@@ -74,7 +74,7 @@ if (!Array.prototype.includes) {
 // Array.prototype.find
 if (!Array.prototype.find) {
   Object.defineProperty(Array.prototype, "find", {
-    value: function (callback: Array<any>["find"]) {
+    value: function (callback: Parameters<Array<any>["find"]>[0]) {
       if (this === null) {
         throw new TypeError("Array.prototype.find called on null or undefined");
       } else if (typeof callback !== "function") {

package/src/lib/prefixClass.ts

@@ -18,7 +18,7 @@ function prefixSingle(scopedStyle: string): string {
   return resolved;
 }
 
-export function prefixClass(scopedStyle?: string | string[]) {
+export function prefixClass(scopedStyle: string | string[]) {
   if (typeof scopedStyle === "string") {
     return prefixSingle(scopedStyle);
   }

package/src/lib/select.ts

@@ -3,7 +3,7 @@ type Option = {
   [index: string]: any;
 };
 
-type GetOptionLabel = (option: Option) => string;
+type GetOptionLabel = (option: Option) => string | undefined;
 
 const findAllIncludes = (target = "", search = "") => {
   const includes = [];
@@ -30,16 +30,16 @@ export const defaultFilterFn = (
   getOptionLabel: GetOptionLabel = (option) => option.label
 ) => {
   query = query.toLocaleLowerCase();
-  let label = getOptionLabel(option).toLocaleLowerCase();
+  let label = getOptionLabel(option)?.toLocaleLowerCase();
 
-  if (label.startsWith(query)) {
+  if (label?.startsWith(query)) {
     return true;
   }
 
   const includes = findAllIncludes(label, query);
 
   // Ищем вхождение перед началом которого не буква
-  if (letterRegexp) {
+  if (letterRegexp && label) {
     for (const index of includes) {
       if (!letterRegexp.test(label[index - 1])) {
         return true;

package/src/lib/styles.ts

@@ -2,7 +2,7 @@
  * Задает стиль трансформации элементу с учетом префиксов
  */
 export function setTransformStyle(
-  element: HTMLElement | undefined,
+  element: HTMLElement | undefined | null,
   transform: string
 ): void {
   if (element) {

package/src/lib/supportEvents.ts

@@ -3,7 +3,7 @@ import { isTesting } from "./testing";
 
 export type VKUISupportEvents = {
   supported: boolean;
-  name?: string;
+  name?: string | null;
 };
 
 // WebKitAnimationEvent и WebKitTransitionEvent не существуют в глобальном контексте

package/src/lib/utils.ts

@@ -59,7 +59,9 @@ export function setRef<T>(element: T, ref: React.Ref<T>): void {
   }
 }
 
-export function multiRef<T>(...refs: Array<React.Ref<T>>): React.RefObject<T> {
+export function multiRef<T>(
+  ...refs: Array<React.Ref<T> | undefined>
+): React.RefObject<T> {
   let current: T | null = null;
   return {
     get current() {
@@ -67,7 +69,7 @@ export function multiRef<T>(...refs: Array<React.Ref<T>>): React.RefObject<T> {
     },
     set current(element) {
       current = element;
-      refs.forEach((ref) => setRef(element, ref));
+      refs.forEach((ref) => ref && setRef(element, ref));
     },
   };
 }

package/src/styles/bright_light.css

@@ -4,7 +4,8 @@
 */
 :root,
 body[scheme="bright_light"],
-[scheme="bright_light"] {
+[scheme="bright_light"],
+.vkuibright_light {
   --accent: #2688eb;
   --accent_alternate: #0077ff;
   --action_sheet_action_foreground: #2688eb;

package/src/styles/space_gray.css

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

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/tokenized.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/types/global.d.ts

@@ -1,7 +1,12 @@
 import "react";
+import { Scheme } from "../src/helpers/scheme";
 
 declare module "react" {
   interface Attributes {
     vkuiClass?: string | string[];
   }
+
+  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+    scheme?: Scheme | "inherit";
+  }
 }

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"),
         },
       },
     },