@vkontakte/vkui 4.24.0 → 4.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.24.0",
+  "version": "4.26.0",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -19,16 +19,16 @@
     "*.css"
   ],
   "devDependencies": {
-    "@babel/cli": "^7.15.0",
-    "@babel/core": "^7.15.0",
-    "@babel/parser": "^7.15.0",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
-    "@babel/plugin-transform-runtime": "^7.14.0",
-    "@babel/preset-env": "^7.15.0",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/preset-typescript": "^7.15.0",
-    "@size-limit/preset-small-lib": "^4.9.1",
+    "@babel/cli": "^7.16.8",
+    "@babel/core": "^7.16.7",
+    "@babel/parser": "^7.16.8",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-object-rest-spread": "^7.16.7",
+    "@babel/plugin-transform-runtime": "^7.16.8",
+    "@babel/preset-env": "^7.16.8",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
+    "@size-limit/preset-small-lib": "^5.0.5",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.1",
     "@testing-library/react-hooks": "^5.1.2",
@@ -39,53 +39,55 @@
     "@types/node": "^12.7.2",
     "@types/react": "^16.14.20",
     "@types/react-dom": "^16.9.14",
-    "@types/webpack-dev-server": "^3.11.1",
+    "@types/webpack": "^5.28.0",
+    "@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/eslint-config": "2.5.0",
     "@vkontakte/icons": "^1.136.0",
     "@vkontakte/vk-bridge": "^2.1.3",
-    "@vkontakte/vkui-tokens": "4.0.0-rc.71",
-    "autoprefixer": "^9.8.0",
+    "@vkontakte/vkui-tokens": "4.2.0",
+    "autoprefixer": "^10.4.2",
     "babel-jest": "^26.6.3",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^8.2.3",
     "babel-plugin-auto-import": "^1.1.0",
-    "babel-plugin-istanbul": "^6.0.0",
+    "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-module-resolver": "^4.1.0",
-    "babel-plugin-transform-remove-imports": "^1.5.4",
+    "babel-plugin-transform-remove-imports": "^1.7.0",
     "chalk": "^4.1.0",
     "classnames": "^2.2.6",
-    "clean-webpack-plugin": "^3.0.0",
+    "clean-webpack-plugin": "^4.0.0",
     "concurrently": "^4.1.2",
     "cross-env": "^7.0.2",
-    "css-loader": "^5.2.7",
+    "css-loader": "^6.5.1",
     "eslint": "~6.8.0",
     "eslint-config-prettier": "6.15.0",
+    "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jest-playwright": "^0.2.1",
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-react": "^7.16.0",
-    "eslint-plugin-react-hooks": "^2.0.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "expect-playwright": "^0.2.6",
-    "file-loader": "^6.2.0",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "jest-image-snapshot": "^4.2.0",
     "jest-playwright-preset": "^1.4.1",
     "lint-staged": "^12.1.2",
-    "mini-css-extract-plugin": "^1.3.1",
+    "mini-css-extract-plugin": "^2.5.2",
     "playwright": "^1.8.0",
     "playwright-chromium": "^1.8.0",
     "playwright-core": "^1.8.0",
-    "postcss": "^8.2.15",
-    "postcss-cli": "8.1.0",
-    "postcss-csso": "5.0.0",
-    "postcss-custom-properties": "10.0.0",
-    "postcss-import": "13.0.0",
-    "postcss-loader": "^4.1.0",
-    "postcss-modules": "^4.2.2",
+    "postcss": "^8.4.5",
+    "postcss-cli": "^9.1.0",
+    "postcss-csso": "^6.0.0",
+    "postcss-custom-properties": "^12.1.3",
+    "postcss-import": "^14.0.2",
+    "postcss-loader": "^6.2.1",
+    "postcss-modules": "^4.3.0",
     "prettier": "^2.5.1",
+    "process": "^0.11.10",
     "prop-types": "^15.6.2",
     "react": "^16.8.6",
     "react-docgen-typescript": "^2.1.1",
@@ -93,18 +95,18 @@
     "react-frame-component": "^3.0.0",
     "react-styleguidist": "^11.1.5",
     "shx": "^0.3.2",
-    "size-limit": "^4.9.1",
-    "source-map-loader": "^0.2.4",
-    "style-loader": "^2.0.0",
+    "size-limit": "^5.0.5",
+    "source-map-loader": "^3.0.1",
+    "style-loader": "^3.3.1",
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard": "^22.0.0",
     "stylelint-value-no-unknown-custom-properties": "^3.0.0",
     "typescript": "3.8",
     "wait-port": "^0.2.9",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.10",
-    "webpack-merge": "^4.2.2",
+    "webpack": "^5.66.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-merge": "^5.8.0",
     "yargs": "^15.4.1"
   },
   "resolutions": {
@@ -145,7 +147,7 @@
     "size": "yarn clear && concurrently 'yarn:babel' 'yarn:postcss' && size-limit",
     "size:ci": "yarn install --frozen-lockfile --ignore-scripts && yarn build:no-types",
     "styleguide": "cross-env NODE_ENV=development styleguidist server --config=styleguide/config.js",
-    "styleguide:props": "cross-env NODE_ENV=development VKUI_STYLEGUIDE_PROPSPARSER=1 styleguidist server --config=styleguide/config.js",
+    "styleguide:props": "VKUI_STYLEGUIDE_PROPSPARSER=1 yarn styleguide",
     "styleguide:build": "cross-env NODE_ENV=production styleguidist build --config=styleguide/config.js",
     "dev": "yarn clear && concurrently \"yarn:tsc-dev\" \"yarn:babel-dev\" \"yarn:postcss-dev\"",
     "dev-cjs": "yarn clear && concurrently \"yarn:tsc-cjs-dev\" \"yarn:babel-cjs-dev\" \"yarn:postcss-dev\"",
@@ -202,7 +204,7 @@
   "dependencies": {
     "@babel/runtime": "^7.14.6",
     "@popperjs/core": "^2.9.2",
-    "@vkontakte/vkjs": "^0.22.1",
+    "@vkontakte/vkjs": "^0.22.2",
     "mitt": "^3.0.0",
     "react-popper": "^2.2.5"
   }

package/postcss.config.js

@@ -10,6 +10,10 @@ const { defaultSchemeId } = require("./package.json");
 
 const animationsSource = path.join(__dirname, "src/styles/animations.css");
 const cssPropSources = [
+  path.join(
+    __dirname,
+    "node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/onlyVariables.css"
+  ),
   path.join(__dirname, "src/styles/bright_light.css"),
   path.join(__dirname, "src/styles/constants.css"),
   animationsSource,
@@ -27,7 +31,12 @@ let plugins = [
   // postcss-custom-properties only works with :root
   scopeRoot({
     customPropRoot: ".vkui__root, .vkui__portal-root",
-    except: path.resolve(`./src/styles/${defaultSchemeId}.css`),
+    except: [
+      path.resolve(`./src/styles/${defaultSchemeId}.css`),
+      path.resolve(
+        "./node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/onlyVariables.css"
+      ),
+    ],
   }),
   autoprefixer(),
   cssModules({

package/src/components/ActionSheet/ActionSheet.tsx

@@ -48,14 +48,14 @@ export const ActionSheet: React.FC<ActionSheetProps> = ({
   style,
   iosCloseItem,
   ...restProps
-}: ActionSheetProps) => {
+}) => {
   const platform = usePlatform();
   const [closing, setClosing] = React.useState(false);
   const onClose = () => setClosing(true);
   const _action = React.useRef(noop);
 
   const afterClose = () => {
-    restProps.onClose();
+    restProps.onClose?.();
     _action.current();
     _action.current = noop;
   };
@@ -82,7 +82,7 @@ export const ActionSheet: React.FC<ActionSheetProps> = ({
     } else {
       fallbackTransitionFinish.clear();
     }
-  }, [closing]);
+  }, [closing, fallbackTransitionFinish]);
 
   const onItemClick = React.useCallback<ItemClickHandler>(
     (action, immediateAction, autoclose) => (event) => {

package/src/components/ActionSheet/ActionSheetContext.ts

@@ -1,14 +1,18 @@
 import * as React from "react";
 
-export type ActionType = (event: React.MouseEvent) => void;
+export type ActionType<T> = (event: React.MouseEvent<T>) => void;
 
-export type ItemClickHandler = (
-  action: ActionType,
-  immediateAction: ActionType,
+export type ItemClickHandler<T extends Element = Element> = (
+  action: ActionType<T> | undefined,
+  immediateAction: ActionType<T> | undefined,
   autoclose: boolean
 ) => (event: React.MouseEvent) => void;
 
-export const ActionSheetContext = React.createContext<{
-  onItemClick?: ItemClickHandler;
+export type ActionSheetContextType<T extends Element = Element> = {
+  onItemClick?: ItemClickHandler<T>;
   isDesktop?: boolean;
-}>({});
+};
+
+export const ActionSheetContext = React.createContext<
+  ActionSheetContextType<any>
+>({});

package/src/components/ActionSheet/ActionSheetDropdownDesktop.tsx

@@ -17,9 +17,7 @@ const warn = warnOnce("ActionSheet");
 function getEl(
   ref: SharedDropdownProps["toggleRef"]
 ): Element | null | undefined {
-  return ref && "current" in ref
-    ? ref.current
-    : (ref as Element | null | undefined);
+  return ref && "current" in ref ? ref.current : ref;
 }
 
 export const ActionSheetDropdownDesktop: React.FC<SharedDropdownProps> = ({
@@ -33,7 +31,7 @@ export const ActionSheetDropdownDesktop: React.FC<SharedDropdownProps> = ({
   const { document } = useDOM();
   const platform = usePlatform();
   const { sizeY } = useAdaptivity();
-  const elementRef = React.useRef<HTMLDivElement>();
+  const elementRef = React.useRef<HTMLDivElement | null>(null);
 
   useEffectDev(() => {
     const toggleEl = getEl(toggleRef);
@@ -53,15 +51,15 @@ export const ActionSheetDropdownDesktop: React.FC<SharedDropdownProps> = ({
   const bodyClickListener = useEventListener("click", (e: MouseEvent) => {
     const dropdownElement = elementRef?.current;
     if (dropdownElement && !dropdownElement.contains(e.target as Node)) {
-      onClose();
+      onClose?.();
     }
   });
 
   React.useEffect(() => {
     setTimeout(() => {
-      bodyClickListener.add(document.body);
+      bodyClickListener.add(document!.body);
     });
-  }, []);
+  }, [bodyClickListener, document]);
 
   const onClick = React.useCallback((e) => e.stopPropagation(), []);
 

package/src/components/ActionSheetItem/ActionSheetItem.tsx

@@ -9,7 +9,10 @@ import Title from "../Typography/Title/Title";
 import Text from "../Typography/Text/Text";
 import { ANDROID, VKCOM } from "../../lib/platform";
 import { Icon16Done, Icon24Done } from "@vkontakte/icons";
-import { ActionSheetContext } from "../ActionSheet/ActionSheetContext";
+import {
+  ActionSheetContext,
+  ActionSheetContextType,
+} from "../ActionSheet/ActionSheetContext";
 import Caption from "../Typography/Caption/Caption";
 import {
   withAdaptivity,
@@ -45,7 +48,7 @@ export interface ActionSheetItemProps
 const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
   children,
   autoclose,
-  mode,
+  mode = "default",
   meta,
   subtitle,
   before,
@@ -62,7 +65,7 @@ const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
 }: ActionSheetItemProps) => {
   const platform = usePlatform();
   const { onItemClick = () => noop, isDesktop } =
-    React.useContext(ActionSheetContext);
+    React.useContext<ActionSheetContextType<HTMLElement>>(ActionSheetContext);
 
   let Component: React.ElementType = restProps.href ? "a" : "div";
 
@@ -76,7 +79,9 @@ const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
     <Tappable
       {...restProps}
       onClick={
-        selectable ? onClick : onItemClick(onClick, onImmediateClick, autoclose)
+        selectable
+          ? onClick
+          : onItemClick(onClick, onImmediateClick, Boolean(autoclose))
       }
       activeMode="ActionSheetItem--active"
       vkuiClass={classNames(
@@ -162,7 +167,7 @@ const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
             name={name}
             value={value}
             onChange={onChange}
-            onClick={onItemClick(noop, noop, autoclose)}
+            onClick={onItemClick(noop, noop, Boolean(autoclose))}
             defaultChecked={defaultChecked}
             checked={checked}
             disabled={restProps.disabled}
@@ -176,8 +181,8 @@ const ActionSheetItem: React.FC<ActionSheetItemProps> = ({
   );
 };
 
-ActionSheetItem.defaultProps = {
-  mode: "default",
-};
+const ActionSheetItemWithAdaptivity = withAdaptivity(ActionSheetItem, {
+  sizeY: true,
+});
 
-export default withAdaptivity(ActionSheetItem, { sizeY: true });
+export { ActionSheetItemWithAdaptivity as ActionSheetItem };

package/src/components/AdaptivityProvider/AdaptivityContext.tsx

@@ -45,10 +45,10 @@ export interface AdaptivityProps extends SizeProps {
 }
 
 export interface AdaptivityContextInterface extends SizeProps {
-  viewWidth?: ViewWidth;
-  viewHeight?: ViewHeight;
-  hasMouse?: boolean;
-  deviceHasHover?: boolean;
+  viewWidth: ViewWidth;
+  viewHeight: ViewHeight;
+  hasMouse: boolean;
+  deviceHasHover: boolean;
 }
 
 export const AdaptivityContext =
@@ -57,4 +57,6 @@ export const AdaptivityContext =
     sizeY: SizeType.REGULAR,
     hasMouse,
     deviceHasHover: hasHover,
+    viewWidth: 0,
+    viewHeight: 0,
   });

package/src/components/AdaptivityProvider/AdaptivityProvider.tsx

@@ -2,17 +2,13 @@ import * as React from "react";
 import { hasMouse as _hasMouse, hasHover as _hasHover } from "@vkontakte/vkjs";
 import {
   AdaptivityContext,
-  AdaptivityContextInterface,
+  AdaptivityProps,
   SizeType,
   ViewHeight,
   ViewWidth,
 } from "./AdaptivityContext";
 import { useDOM } from "../../lib/dom";
 
-export interface AdaptivityProviderProps extends AdaptivityContextInterface {
-  children?: React.ReactNode;
-}
-
 export const DESKTOP_SIZE = 1280;
 export const TABLET_SIZE = 1024;
 export const SMALL_TABLET_SIZE = 768;
@@ -21,8 +17,10 @@ export const MOBILE_SIZE = 320;
 export const MOBILE_LANDSCAPE_HEIGHT = 414;
 export const MEDIUM_HEIGHT = 720;
 
-export default function AdaptivityProvider(props: AdaptivityProviderProps) {
-  const adaptivityRef = React.useRef<AdaptivityContextInterface>(null);
+const AdaptivityProvider: React.FC<AdaptivityProps> = (props) => {
+  const adaptivityRef = React.useRef<ReturnType<
+    typeof calculateAdaptivity
+  > | null>(null);
   const [, updateAdaptivity] = React.useState({});
 
   const { window } = useDOM();
@@ -37,9 +35,12 @@ export default function AdaptivityProvider(props: AdaptivityProviderProps) {
 
   React.useEffect(() => {
     function onResize() {
+      if (adaptivityRef.current === null) {
+        return;
+      }
       const calculated = calculateAdaptivity(
-        window.innerWidth,
-        window.innerHeight,
+        window!.innerWidth,
+        window!.innerHeight,
         props
       );
       const { viewWidth, viewHeight, sizeX, sizeY, hasMouse, deviceHasHover } =
@@ -59,10 +60,10 @@ export default function AdaptivityProvider(props: AdaptivityProviderProps) {
     }
 
     onResize();
-    window.addEventListener("resize", onResize, false);
+    window!.addEventListener("resize", onResize, false);
 
     return () => {
-      window.removeEventListener("resize", onResize, false);
+      window!.removeEventListener("resize", onResize, false);
     };
   }, [
     props.viewWidth,
@@ -71,6 +72,8 @@ export default function AdaptivityProvider(props: AdaptivityProviderProps) {
     props.sizeY,
     props.hasMouse,
     props.deviceHasHover,
+    window,
+    props,
   ]);
 
   return (
@@ -78,12 +81,12 @@ export default function AdaptivityProvider(props: AdaptivityProviderProps) {
       {props.children}
     </AdaptivityContext.Provider>
   );
-}
+};
 
 function calculateAdaptivity(
   windowWidth: number,
   windowHeight: number,
-  props: AdaptivityProviderProps
+  props: AdaptivityProps
 ) {
   let viewWidth = ViewWidth.SMALL_MOBILE;
   let viewHeight = ViewHeight.SMALL;
@@ -131,3 +134,5 @@ function calculateAdaptivity(
 
   return { viewWidth, viewHeight, sizeX, sizeY, hasMouse, deviceHasHover };
 }
+
+export { AdaptivityProvider };

package/src/components/Alert/Alert.tsx

@@ -7,11 +7,7 @@ import { transitionEvent } from "../../lib/supportEvents";
 import { ANDROID, VKCOM, IOS } from "../../lib/platform";
 import { HasPlatform } from "../../types";
 import { withPlatform } from "../../hoc/withPlatform";
-import {
-  withAdaptivity,
-  AdaptivityProps,
-  ViewWidth,
-} from "../../hoc/withAdaptivity";
+import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
 import Button, { ButtonProps } from "../Button/Button";
 import { hasReactNode } from "../../lib/utils";
 import Headline from "../Typography/Headline/Headline";
@@ -19,9 +15,13 @@ import Title from "../Typography/Title/Title";
 import Caption from "../Typography/Caption/Caption";
 import ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
 import { FocusTrap } from "../FocusTrap/FocusTrap";
+import {
+  AdaptivityContextInterface,
+  AdaptivityProps,
+} from "../AdaptivityProvider/AdaptivityContext";
 import "./Alert.css";
 
-export type AlertActionInterface = AlertProps["actions"][0] &
+export type AlertActionInterface = AlertAction &
   React.AnchorHTMLAttributes<HTMLElement>;
 
 export interface AlertAction extends Pick<ButtonProps, "Component" | "href"> {
@@ -42,6 +42,8 @@ export interface AlertProps
   onClose?: VoidFunction;
 }
 
+export type TAlertProps = AlertProps & AdaptivityContextInterface;
+
 export interface AlertState {
   closing: boolean;
 }
@@ -50,8 +52,8 @@ type TransitionEndHandler = (e?: TransitionEvent) => void;
 
 type ItemClickHander = (item: AlertActionInterface) => () => void;
 
-class Alert extends React.Component<AlertProps, AlertState> {
-  constructor(props: AlertProps) {
+class Alert extends React.Component<TAlertProps, AlertState> {
+  constructor(props: TAlertProps) {
     super(props);
     this.element = React.createRef();
     this.state = {
@@ -61,9 +63,9 @@ class Alert extends React.Component<AlertProps, AlertState> {
 
   element: React.RefObject<HTMLDivElement>;
 
-  private transitionFinishTimeout: ReturnType<typeof setTimeout>;
+  private transitionFinishTimeout: number | undefined = undefined;
 
-  static defaultProps: AlertProps = {
+  static defaultProps: Partial<TAlertProps> = {
     actionsLayout: "horizontal",
     actions: [],
   };
@@ -81,7 +83,7 @@ class Alert extends React.Component<AlertProps, AlertState> {
       this.setState({ closing: true });
       this.waitTransitionFinish((e?: TransitionEvent) => {
         if (!e || e.propertyName === "opacity") {
-          autoclose && this.props.onClose();
+          autoclose && this.props.onClose?.();
           action && action();
         }
       });
@@ -94,7 +96,7 @@ class Alert extends React.Component<AlertProps, AlertState> {
     this.setState({ closing: true });
     this.waitTransitionFinish((e?: TransitionEvent) => {
       if (!e || e.propertyName === "opacity") {
-        this.props.onClose();
+        this.props.onClose?.();
       }
     });
   };
@@ -104,14 +106,19 @@ class Alert extends React.Component<AlertProps, AlertState> {
   };
 
   waitTransitionFinish(eventHandler: TransitionEndHandler) {
-    if (transitionEvent.supported) {
+    if (transitionEvent.supported && this.element.current) {
       this.element.current.removeEventListener(
-        transitionEvent.name,
-        eventHandler
+        transitionEvent.name as string,
+        eventHandler as () => void
+      );
+      this.element.current.addEventListener(
+        transitionEvent.name as string,
+        eventHandler as () => void
       );
-      this.element.current.addEventListener(transitionEvent.name, eventHandler);
     } else {
-      clearTimeout(this.transitionFinishTimeout);
+      if (this.transitionFinishTimeout) {
+        clearTimeout(this.transitionFinishTimeout);
+      }
       this.transitionFinishTimeout = setTimeout(
         eventHandler.bind(this),
         this.timeout
@@ -139,6 +146,8 @@ class Alert extends React.Component<AlertProps, AlertState> {
             {header}
           </Title>
         );
+      default:
+        return undefined;
     }
   }
 
@@ -162,6 +171,8 @@ class Alert extends React.Component<AlertProps, AlertState> {
             {text}
           </Headline>
         );
+      default:
+        return undefined;
     }
   }
 
@@ -232,7 +243,7 @@ class Alert extends React.Component<AlertProps, AlertState> {
     } = this.props;
     const { closing } = this.state;
 
-    const resolvedActionsLayout: AlertProps["actionsLayout"] =
+    const resolvedActionsLayout: TAlertProps["actionsLayout"] =
       platform === VKCOM ? "horizontal" : actionsLayout;
     const canShowCloseButton =
       platform === VKCOM ||
@@ -266,7 +277,7 @@ class Alert extends React.Component<AlertProps, AlertState> {
             {children}
           </div>
           <footer vkuiClass="Alert__actions">
-            {actions.map(this.renderAction)}
+            {actions?.map(this.renderAction)}
           </footer>
         </FocusTrap>
       </PopoutWrapper>
@@ -274,8 +285,10 @@ class Alert extends React.Component<AlertProps, AlertState> {
   }
 }
 
-export default withPlatform(
+const AlertWithPlatformAndAdaptivity = withPlatform(
   withAdaptivity(Alert, {
     viewWidth: true,
   })
 );
+
+export { AlertWithPlatformAndAdaptivity as Alert };