@vkontakte/vkui 4.30.0 → 4.33.0

package/src/components/Alert/Alert.tsx

@@ -1,29 +1,21 @@
 import * as React from "react";
-import Tappable from "../Tappable/Tappable";
+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 ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
+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,226 @@ 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;
+type ItemClickHandler = (item: AlertActionInterface) => void;
 
-    if (autoclose) {
-      this.setState({ closing: true });
-      this.waitTransitionFinish((e?: TransitionEvent) => {
-        if (!e || e.propertyName === "opacity") {
-          autoclose && this.props.onClose?.();
-          action && action();
-        }
-      });
-    } else {
-      action && action();
-    }
-  };
-
-  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;
-    }
-  }
+const AlertText: React.FC<AlertTypography> = (props) => {
+  const platform = usePlatform();
 
-  renderAction = (action: AlertActionInterface, i: number) => {
-    const { platform } = this.props;
-
-    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,
+      (e?: TransitionEvent) => {
+        if (!e || e.propertyName === "opacity") {
+          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>
+  );
+};

package/src/components/AppRoot/AppRoot.tsx

@@ -11,10 +11,8 @@ import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { classScopingMode } from "../../lib/classScopingMode";
 import { IconSettingsProvider } from "@vkontakte/icons";
 import {
-  elementScrollController,
-  globalScrollController,
-  ScrollContext,
-  ScrollContextInterface,
+  ElementScrollController,
+  GlobalScrollController,
 } from "./ScrollContext";
 import { noop } from "../../lib/utils";
 import { warnOnce } from "../../lib/warnOnce";
@@ -41,6 +39,10 @@ export interface AppRootProps
 }
 
 const warn = warnOnce("AppRoot");
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/AppRoot
+ */
 export const AppRoot = withAdaptivity<AppRootProps>(
   ({
     children,
@@ -59,7 +61,7 @@ export const AppRoot = withAdaptivity<AppRootProps>(
     const [portalRoot, setPortalRoot] = React.useState<HTMLDivElement | null>(
       null
     );
-    const { window, document } = useDOM();
+    const { document } = useDOM();
     const insets = useInsets();
     const { appearance } = React.useContext(ConfigProviderContext);
 
@@ -170,12 +172,10 @@ export const AppRoot = withAdaptivity<AppRootProps>(
         document!.documentElement.style.removeProperty("color-scheme");
     }, [appearance]);
 
-    const scrollController = React.useMemo<ScrollContextInterface>(
+    const ScrollController = React.useMemo(
       () =>
-        scroll === "contain"
-          ? elementScrollController(rootRef)
-          : globalScrollController(window, document),
-      [document, scroll, window]
+        scroll === "contain" ? ElementScrollController : GlobalScrollController,
+      [scroll]
     );
 
     const content = (
@@ -188,14 +188,14 @@ export const AppRoot = withAdaptivity<AppRootProps>(
           mode,
         }}
       >
-        <ScrollContext.Provider value={scrollController}>
+        <ScrollController elRef={rootRef}>
           <IconSettingsProvider
             classPrefix="vkui"
             globalClasses={!noLegacyClasses}
           >
             {children}
           </IconSettingsProvider>
-        </ScrollContext.Provider>
+        </ScrollController>
       </AppRootContext.Provider>
     );