@vkontakte/vkui 4.31.0 → 4.32.0

package/jest.unit.config.js

@@ -3,6 +3,7 @@ module.exports = {
   displayName: "unit",
   roots: [
     path.join(__dirname, "src"),
+    path.join(__dirname, "tasks"),
     path.join(__dirname, "postcss-plugin-vk-sans"),
     path.join(__dirname, "postcss-custom-properties-fallback"),
   ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.31.0",
+  "version": "4.32.0",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -36,7 +36,7 @@
     "@types/css-font-loading-module": "^0.0.4",
     "@types/jest": "^26.0.15",
     "@types/jest-image-snapshot": "^4.1.3",
-    "@types/node": "^12.7.2",
+    "@types/node": "^14.14.31",
     "@types/react": "^16.14.20",
     "@types/react-dom": "^16.9.14",
     "@types/webpack": "^5.28.0",
@@ -47,7 +47,7 @@
     "@vkontakte/eslint-config": "2.5.0",
     "@vkontakte/icons": "^1.145.1",
     "@vkontakte/vk-bridge": "^2.1.3",
-    "@vkontakte/vkui-tokens": "4.10.0",
+    "@vkontakte/vkui-tokens": "4.12.0",
     "autoprefixer": "^10.4.2",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.3",
@@ -82,7 +82,7 @@
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",
     "postcss-csso": "^6.0.0",
-    "postcss-custom-properties": "^12.1.3",
+    "postcss-custom-properties": "^12.1.7",
     "postcss-import": "^14.0.2",
     "postcss-loader": "^6.2.1",
     "postcss-modules": "^4.3.0",
@@ -95,7 +95,7 @@
     "react-docgen-typescript": "^2.1.1",
     "react-dom": "^16.8.6",
     "react-frame-component": "^3.0.0",
-    "react-styleguidist": "^11.1.5",
+    "react-styleguidist": "^11.2.0",
     "shx": "^0.3.2",
     "size-limit": "^5.0.5",
     "source-map-loader": "^3.0.1",
@@ -127,8 +127,18 @@
   "size-limit": [
     {
       "name": "JS",
+      "path": "dist/index.js",
+      "gzip": false
+    },
+    {
+      "name": "JS (gzip)",
       "path": "dist/index.js"
     },
+    {
+      "name": "JS (brotli)",
+      "path": "dist/index.js",
+      "brotli": true
+    },
     {
       "name": "JS, unstable",
       "path": "dist/unstable/index.js"
@@ -136,8 +146,20 @@
     {
       "name": "CSS",
       "path": "dist/vkui.css",
+      "webpack": false,
+      "gzip": false
+    },
+    {
+      "name": "CSS (gzip)",
+      "path": "dist/vkui.css",
       "webpack": false
     },
+    {
+      "name": "CSS (brotli)",
+      "path": "dist/vkui.css",
+      "webpack": false,
+      "brotli": true
+    },
     {
       "name": "CSS, unstable",
       "path": "dist/unstable.css",

package/src/components/ActionSheet/ActionSheet.tsx

@@ -40,6 +40,9 @@ export interface ActionSheetProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const warn = warnOnce("ActionSheet");
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/ActionSheet
+ */
 export const ActionSheet: React.FC<ActionSheetProps> = ({
   children,
   className,

package/src/components/ActionSheetItem/ActionSheetItem.tsx

@@ -6,7 +6,7 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode, noop } from "../../lib/utils";
 import { Subhead } from "../Typography/Subhead/Subhead";
 import { Title } from "../Typography/Title/Title";
-import Text from "../Typography/Text/Text";
+import { Text } from "../Typography/Text/Text";
 import { ANDROID, VKCOM } from "../../lib/platform";
 import { Icon16Done, Icon24Done } from "@vkontakte/icons";
 import {
@@ -14,7 +14,7 @@ import {
   ActionSheetContextType,
 } from "../ActionSheet/ActionSheetContext";
 import { Caption } from "../Typography/Caption/Caption";
-import Headline from "../Typography/Headline/Headline";
+import { Headline } from "../Typography/Headline/Headline";
 import {
   withAdaptivity,
   AdaptivityProps,
@@ -106,21 +106,19 @@ const ActionSheetItemComponent: React.FC<ActionSheetItemProps> = ({
           {sizeY === SizeType.COMPACT ? (
             <React.Fragment>
               <Text
-                weight={mode === "cancel" ? "medium" : "regular"}
+                weight={mode === "cancel" ? "2" : undefined}
                 vkuiClass="ActionSheetItem__children"
               >
                 {children}
               </Text>
               {hasReactNode(meta) && (
-                <Text weight="regular" vkuiClass="ActionSheetItem__meta">
-                  {meta}
-                </Text>
+                <Text vkuiClass="ActionSheetItem__meta">{meta}</Text>
               )}
             </React.Fragment>
           ) : (
             <React.Fragment>
               {platform === ANDROID ? (
-                <Headline weight={mode === "cancel" ? "medium" : "regular"}>
+                <Headline weight={mode === "cancel" ? "2" : "3"}>
                   {children}
                 </Headline>
               ) : (
@@ -134,7 +132,7 @@ const ActionSheetItemComponent: React.FC<ActionSheetItemProps> = ({
               )}
               {hasReactNode(meta) &&
                 (platform === ANDROID ? (
-                  <Headline weight={mode === "cancel" ? "medium" : "regular"}>
+                  <Headline weight={mode === "cancel" ? "2" : "3"}>
                     {children}
                   </Headline>
                 ) : (
@@ -178,6 +176,9 @@ const ActionSheetItemComponent: React.FC<ActionSheetItemProps> = ({
   );
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/ActionSheetItem
+ */
 export const ActionSheetItem = withAdaptivity(ActionSheetItemComponent, {
   sizeY: true,
 });

package/src/components/AdaptivityProvider/AdaptivityProvider.tsx

@@ -21,6 +21,9 @@ export const MOBILE_SIZE = 320;
 export const MOBILE_LANDSCAPE_HEIGHT = 414;
 export const MEDIUM_HEIGHT = 720;
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/AdaptivityProvider
+ */
 const AdaptivityProvider: React.FC<AdaptivityProps> = (props) => {
   const adaptivityRef = React.useRef<ReturnType<
     typeof calculateAdaptivity

package/src/components/Alert/Alert.tsx

@@ -3,27 +3,19 @@ import Tappable from "../Tappable/Tappable";
 import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper";
 import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
-import { transitionEvent } from "../../lib/supportEvents";
 import { ANDROID, VKCOM, IOS } from "../../lib/platform";
-import { HasPlatform } from "../../types";
-import { withPlatform } from "../../hoc/withPlatform";
-import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
+import { ViewWidth } from "../../hoc/withAdaptivity";
 import { Button, ButtonProps } from "../Button/Button";
-import { hasReactNode } from "../../lib/utils";
-import Headline from "../Typography/Headline/Headline";
+import { hasReactNode, stopPropagation } from "../../lib/utils";
 import { Title } from "../Typography/Title/Title";
 import { Caption } from "../Typography/Caption/Caption";
+import { Text } from "../Typography/Text/Text";
 import ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
 import { FocusTrap } from "../FocusTrap/FocusTrap";
-import {
-  AdaptivityContextInterface,
-  AdaptivityProps,
-} from "../AdaptivityProvider/AdaptivityContext";
-import { withContext } from "../../hoc/withContext";
-import {
-  ScrollContext,
-  ScrollContextInterface,
-} from "../AppRoot/ScrollContext";
+import { useScrollLock } from "../AppRoot/ScrollContext";
+import { useWaitTransitionFinish } from "../../hooks/useWaitTransitionFinish";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
 import "./Alert.css";
 
 export type AlertActionInterface = AlertAction &
@@ -36,273 +28,224 @@ export interface AlertAction extends Pick<ButtonProps, "Component" | "href"> {
   mode: "cancel" | "destructive" | "default";
 }
 
-export interface AlertProps
-  extends React.HTMLAttributes<HTMLElement>,
-    HasPlatform,
-    AdaptivityProps {
+export interface AlertProps extends React.HTMLAttributes<HTMLElement> {
   actionsLayout?: "vertical" | "horizontal";
   actions?: AlertAction[];
   header?: React.ReactNode;
   text?: React.ReactNode;
   onClose?: VoidFunction;
-  /** @ignore */
-  scroll?: ScrollContextInterface;
-}
-
-export type TAlertProps = AlertProps & AdaptivityContextInterface;
 
-export interface AlertState {
-  closing: boolean;
+  /**
+   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.
+   */
+  dismissLabel?: string;
 }
 
-type TransitionEndHandler = (e?: TransitionEvent) => void;
-
-type ItemClickHandler = (item: AlertActionInterface) => () => void;
-
-class AlertComponent extends React.Component<TAlertProps, AlertState> {
-  constructor(props: TAlertProps) {
-    super(props);
-    this.element = React.createRef();
-    this.state = {
-      closing: false,
-    };
-  }
-
-  componentDidMount() {
-    this.props.scroll?.enableScrollLock();
-  }
-
-  componentWillUnmount() {
-    this.props.scroll?.disableScrollLock();
-  }
-
-  element: React.RefObject<HTMLDivElement>;
-
-  private transitionFinishTimeout: number | undefined = undefined;
-
-  static defaultProps: Partial<TAlertProps> = {
-    actionsLayout: "horizontal",
-    actions: [],
-  };
-
-  private get timeout(): number {
-    return this.props.platform === ANDROID || this.props.platform === VKCOM
-      ? 200
-      : 300;
-  }
-
-  onItemClick: ItemClickHandler = (item: AlertActionInterface) => () => {
-    const { action, autoclose } = item;
-
-    if (autoclose) {
-      this.setState({ closing: true });
-      this.waitTransitionFinish((e?: TransitionEvent) => {
-        if (!e || e.propertyName === "opacity") {
-          autoclose && this.props.onClose?.();
-          action && action();
-        }
-      });
-    } else {
-      action && action();
-    }
-  };
+type ItemClickHandler = (item: AlertActionInterface) => void;
 
-  onClose: VoidFunction = () => {
-    this.setState({ closing: true });
-    this.waitTransitionFinish((e?: TransitionEvent) => {
-      if (!e || e.propertyName === "opacity") {
-        this.props.onClose?.();
-      }
-    });
-  };
+interface AlertTypography {
+  id: string;
+}
 
-  stopPropagation: React.MouseEventHandler = (e: React.SyntheticEvent) => {
-    e.stopPropagation();
-  };
+const AlertHeader: React.FC<AlertTypography> = (props) => {
+  const platform = usePlatform();
 
-  waitTransitionFinish(eventHandler: TransitionEndHandler) {
-    if (transitionEvent.supported && this.element.current) {
-      this.element.current.removeEventListener(
-        transitionEvent.name as string,
-        eventHandler as () => void
-      );
-      this.element.current.addEventListener(
-        transitionEvent.name as string,
-        eventHandler as () => void
+  switch (platform) {
+    case IOS:
+      return (
+        <Title vkuiClass="Alert__header" weight="1" level="3" {...props} />
       );
-    } else {
-      if (this.transitionFinishTimeout) {
-        clearTimeout(this.transitionFinishTimeout);
-      }
-      this.transitionFinishTimeout = setTimeout(
-        eventHandler.bind(this),
-        this.timeout
+    default:
+      return (
+        <Title vkuiClass="Alert__header" weight="2" level="2" {...props} />
       );
-    }
   }
+};
 
-  renderHeader(header: React.ReactNode) {
-    switch (this.props.platform) {
-      case VKCOM:
-        return (
-          <Headline vkuiClass="Alert__header" weight="medium">
-            {header}
-          </Headline>
-        );
-      case IOS:
-        return (
-          <Title vkuiClass="Alert__header" weight="1" level="3">
-            {header}
-          </Title>
-        );
-      case ANDROID:
-        return (
-          <Title vkuiClass="Alert__header" weight="2" level="2">
-            {header}
-          </Title>
-        );
-      default:
-        return undefined;
-    }
-  }
-
-  renderText(text: React.ReactNode) {
-    switch (this.props.platform) {
-      case VKCOM:
-        return <Caption vkuiClass="Alert__text">{text}</Caption>;
-      case IOS:
-        return (
-          <Caption vkuiClass="Alert__text" level="2">
-            {text}
-          </Caption>
-        );
-      case ANDROID:
-        return (
-          <Headline vkuiClass="Alert__text" weight="regular">
-            {text}
-          </Headline>
-        );
-      default:
-        return undefined;
-    }
-  }
-
-  renderAction = (action: AlertActionInterface, i: number) => {
-    const { platform } = this.props;
+const AlertText: React.FC<AlertTypography> = (props) => {
+  const platform = usePlatform();
 
-    if (platform === IOS) {
-      const { Component = "button" } = action;
+  switch (platform) {
+    case VKCOM:
+      return <Caption vkuiClass="Alert__text" {...props} />;
+    case IOS:
+      return <Caption vkuiClass="Alert__text" level="2" {...props} />;
+    default:
       return (
-        <Tappable
-          Component={action.href ? "a" : Component}
-          vkuiClass={classNames(
-            "Alert__action",
-            `Alert__action--${action.mode}`
-          )}
-          onClick={this.onItemClick(action)}
-          href={action.href}
-          key={`alert-action-${i}`}
-          target={action.target}
-        >
-          {action.title}
-        </Tappable>
+        <Text Component="span" vkuiClass="Alert__text" weight="3" {...props} />
       );
-    }
-
-    let mode: ButtonProps["mode"] =
-      action.mode === "cancel" ? "secondary" : "primary";
-
-    if (platform === ANDROID) {
-      mode = "tertiary";
+  }
+};
 
-      if (
-        this.props.viewWidth === ViewWidth.DESKTOP &&
-        action.mode === "destructive"
-      ) {
-        mode = "destructive";
-      }
-    }
+interface AlertActionProps {
+  action: AlertActionInterface;
+  onItemClick: ItemClickHandler;
+}
 
+const AlertAction: React.FC<AlertActionProps> = ({
+  action,
+  onItemClick,
+  ...restProps
+}) => {
+  const platform = usePlatform();
+  const { viewWidth } = useAdaptivity();
+  const handleItemClick = React.useCallback(
+    () => onItemClick(action),
+    [onItemClick, action]
+  );
+
+  if (platform === IOS) {
+    const { Component = "button" } = action;
     return (
-      <Button
-        vkuiClass={classNames("Alert__button", `Alert__button--${action.mode}`)}
-        mode={mode}
-        size="m"
-        onClick={this.onItemClick(action)}
-        Component={action.Component}
+      <Tappable
+        Component={action.href ? "a" : Component}
+        vkuiClass={classNames("Alert__action", `Alert__action--${action.mode}`)}
+        onClick={handleItemClick}
         href={action.href}
-        key={`alert-action-${i}`}
         target={action.target}
+        {...restProps}
       >
         {action.title}
-      </Button>
+      </Tappable>
     );
-  };
+  }
 
-  render() {
-    const {
-      actions,
-      actionsLayout,
-      children,
-      className,
-      style,
-      platform,
-      viewWidth,
-      text,
-      header,
-      ...restProps
-    } = this.props;
-    const { closing } = this.state;
+  let mode: ButtonProps["mode"] =
+    action.mode === "cancel" ? "secondary" : "primary";
 
-    const resolvedActionsLayout: TAlertProps["actionsLayout"] =
-      platform === VKCOM ? "horizontal" : actionsLayout;
-    const canShowCloseButton =
-      platform === VKCOM ||
-      (platform === ANDROID && viewWidth >= ViewWidth.SMALL_TABLET);
-    const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
+  if (platform === ANDROID) {
+    mode = "tertiary";
 
-    return (
-      <PopoutWrapper
-        className={className}
-        closing={closing}
-        style={style}
-        onClick={this.onClose}
-      >
-        <FocusTrap
-          {...restProps}
-          getRootRef={this.element}
-          onClick={this.stopPropagation}
-          onClose={this.onClose}
-          timeout={this.timeout}
-          // eslint-disable-next-line vkui/no-object-expression-in-arguments
-          vkuiClass={classNames(getClassName("Alert", platform), {
-            "Alert--v": resolvedActionsLayout === "vertical",
-            "Alert--h": resolvedActionsLayout === "horizontal",
-            "Alert--closing": closing,
-            "Alert--desktop": isDesktop,
-          })}
-        >
-          {canShowCloseButton && <ModalDismissButton onClick={this.onClose} />}
-          <div vkuiClass="Alert__content">
-            {hasReactNode(header) && this.renderHeader(header)}
-            {hasReactNode(text) && this.renderText(text)}
-            {children}
-          </div>
-          <footer vkuiClass="Alert__actions">
-            {actions?.map(this.renderAction)}
-          </footer>
-        </FocusTrap>
-      </PopoutWrapper>
-    );
+    if (viewWidth === ViewWidth.DESKTOP && action.mode === "destructive") {
+      mode = "destructive";
+    }
   }
-}
 
-export const Alert = withContext(
-  withPlatform(
-    withAdaptivity(AlertComponent, {
-      viewWidth: true,
-    })
-  ),
-  ScrollContext,
-  "scroll"
-);
+  return (
+    <Button
+      vkuiClass={classNames("Alert__button", `Alert__button--${action.mode}`)}
+      mode={mode}
+      size="m"
+      onClick={handleItemClick}
+      Component={action.Component}
+      href={action.href}
+      target={action.target}
+    >
+      {action.title}
+    </Button>
+  );
+};
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Alert
+ */
+export const Alert: React.FC<AlertProps> = ({
+  actions = [],
+  actionsLayout = "horizontal",
+  children,
+  className,
+  style,
+  text,
+  header,
+  onClose,
+  dismissLabel = "Закрыть предупреждение",
+  ...restProps
+}) => {
+  const platform = usePlatform();
+  const { viewWidth } = useAdaptivity();
+  const { waitTransitionFinish } = useWaitTransitionFinish();
+
+  const [closing, setClosing] = React.useState(false);
+
+  const elementRef = React.useRef<HTMLDivElement>(null);
+
+  const resolvedActionsLayout: AlertProps["actionsLayout"] =
+    platform === VKCOM ? "horizontal" : actionsLayout;
+  const canShowCloseButton =
+    platform === VKCOM ||
+    (platform === ANDROID && viewWidth >= ViewWidth.SMALL_TABLET);
+  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
+
+  const timeout = platform === ANDROID || platform === VKCOM ? 200 : 300;
+
+  const close = React.useCallback(() => {
+    setClosing(true);
+    waitTransitionFinish(
+      elementRef.current,
+      () => {
+        onClose && onClose();
+      },
+      timeout
+    );
+  }, [elementRef, waitTransitionFinish, onClose, timeout]);
+
+  const onItemClick: ItemClickHandler = React.useCallback(
+    (item: AlertActionInterface) => {
+      const { action, autoclose } = item;
+
+      if (autoclose) {
+        setClosing(true);
+        waitTransitionFinish(
+          elementRef.current,
+          (e?: TransitionEvent) => {
+            if (!e || e.propertyName === "opacity") {
+              onClose && onClose();
+              action && action();
+            }
+          },
+          timeout
+        );
+      } else {
+        action && action();
+      }
+    },
+    [elementRef, waitTransitionFinish, onClose, timeout]
+  );
+
+  useScrollLock();
+
+  return (
+    <PopoutWrapper
+      className={className}
+      closing={closing}
+      style={style}
+      onClick={close}
+    >
+      <FocusTrap
+        {...restProps}
+        getRootRef={elementRef}
+        onClick={stopPropagation}
+        onClose={close}
+        timeout={timeout}
+        vkuiClass={classNames(
+          getClassName("Alert", platform),
+          resolvedActionsLayout === "vertical" ? "Alert--v" : "Alert--h",
+          closing && "Alert--closing",
+          isDesktop && "Alert--desktop"
+        )}
+        role="alertdialog"
+        aria-modal
+        aria-labelledby="vkui--alert--title"
+        aria-describedby="vkui--alert--desc"
+      >
+        <div vkuiClass="Alert__content">
+          {hasReactNode(header) && (
+            <AlertHeader id="vkui--alert--title">{header}</AlertHeader>
+          )}
+          {hasReactNode(text) && (
+            <AlertText id="vkui--alert--desc">{text}</AlertText>
+          )}
+          {children}
+        </div>
+        <div vkuiClass="Alert__actions">
+          {actions.map((action, i) => (
+            <AlertAction key={i} action={action} onItemClick={onItemClick} />
+          ))}
+        </div>
+        {canShowCloseButton && (
+          <ModalDismissButton onClick={close} aria-label={dismissLabel} />
+        )}
+      </FocusTrap>
+    </PopoutWrapper>
+  );
+};