@vkontakte/vkui 4.27.2 → 4.29.0

package/src/components/AdaptivityProvider/AdaptivityProvider.tsx

@@ -8,6 +8,10 @@ import {
   ViewWidth,
 } from "./AdaptivityContext";
 import { useDOM } from "../../lib/dom";
+import {
+  useBridgeAdaptivity,
+  BridgeAdaptivity,
+} from "../../hooks/useBridgeAdaptivity";
 
 export const DESKTOP_SIZE = 1280;
 export const TABLET_SIZE = 1024;
@@ -22,15 +26,12 @@ const AdaptivityProvider: React.FC<AdaptivityProps> = (props) => {
     typeof calculateAdaptivity
   > | null>(null);
   const [, updateAdaptivity] = React.useState({});
+  const bridge = useBridgeAdaptivity();
 
   const { window } = useDOM();
 
   if (!adaptivityRef.current) {
-    adaptivityRef.current = calculateAdaptivity(
-      window ? window.innerWidth : 0,
-      window ? window.innerHeight : 0,
-      props
-    );
+    adaptivityRef.current = calculateAdaptivity(props, bridge, window);
   }
 
   React.useEffect(() => {
@@ -38,11 +39,8 @@ const AdaptivityProvider: React.FC<AdaptivityProps> = (props) => {
       if (adaptivityRef.current === null) {
         return;
       }
-      const calculated = calculateAdaptivity(
-        window!.innerWidth,
-        window!.innerHeight,
-        props
-      );
+
+      const calculated = calculateAdaptivity(props, bridge, window);
       const { viewWidth, viewHeight, sizeX, sizeY, hasMouse, deviceHasHover } =
         adaptivityRef.current;
 
@@ -74,6 +72,7 @@ const AdaptivityProvider: React.FC<AdaptivityProps> = (props) => {
     props.deviceHasHover,
     window,
     props,
+    bridge,
   ]);
 
   return (
@@ -84,16 +83,27 @@ const AdaptivityProvider: React.FC<AdaptivityProps> = (props) => {
 };
 
 function calculateAdaptivity(
-  windowWidth: number,
-  windowHeight: number,
-  props: AdaptivityProps
+  props: AdaptivityProps,
+  bridge: BridgeAdaptivity,
+  window?: Window
 ) {
+  let windowWidth = 0;
+  let windowHeight = 0;
+
+  if (bridge.type === "adaptive") {
+    windowWidth = bridge.viewportWidth;
+    windowHeight = bridge.viewportHeight;
+  } else if (window) {
+    windowWidth = window.innerWidth;
+    windowHeight = window.innerHeight;
+  }
+
   let viewWidth = ViewWidth.SMALL_MOBILE;
   let viewHeight = ViewHeight.SMALL;
   let sizeY = SizeType.REGULAR;
   let sizeX = SizeType.REGULAR;
-  let hasMouse = props.hasMouse ?? _hasMouse;
-  let deviceHasHover = props.deviceHasHover ?? _hasHover;
+  let hasMouse = _hasMouse;
+  let deviceHasHover = _hasHover;
 
   if (windowWidth >= DESKTOP_SIZE) {
     viewWidth = ViewWidth.DESKTOP;
@@ -115,8 +125,13 @@ function calculateAdaptivity(
     viewHeight = ViewHeight.EXTRA_SMALL;
   }
 
-  props.viewWidth && (viewWidth = props.viewWidth);
-  props.viewHeight && (viewHeight = props.viewHeight);
+  if (!bridge.type) {
+    props.viewWidth && (viewWidth = props.viewWidth);
+    props.viewHeight && (viewHeight = props.viewHeight);
+
+    hasMouse = props.hasMouse ?? hasMouse;
+    deviceHasHover = props.deviceHasHover ?? deviceHasHover;
+  }
 
   if (viewWidth <= ViewWidth.MOBILE) {
     sizeX = SizeType.COMPACT;
@@ -129,8 +144,24 @@ function calculateAdaptivity(
     sizeY = SizeType.COMPACT;
   }
 
-  props.sizeX && (sizeX = props.sizeX);
-  props.sizeY && (sizeY = props.sizeY);
+  if (!bridge.type) {
+    props.sizeX && (sizeX = props.sizeX);
+    props.sizeY && (sizeY = props.sizeY);
+  }
+
+  if (
+    bridge.type === "force_mobile" ||
+    bridge.type === "force_mobile_compact"
+  ) {
+    viewWidth = ViewWidth.MOBILE;
+    sizeX = SizeType.COMPACT;
+
+    if (bridge.type === "force_mobile_compact") {
+      sizeY = SizeType.COMPACT;
+    } else {
+      sizeY = SizeType.REGULAR;
+    }
+  }
 
   return { viewWidth, viewHeight, sizeX, sizeY, hasMouse, deviceHasHover };
 }

package/src/components/Alert/Alert.tsx

@@ -8,11 +8,11 @@ import { ANDROID, VKCOM, IOS } from "../../lib/platform";
 import { HasPlatform } from "../../types";
 import { withPlatform } from "../../hoc/withPlatform";
 import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
-import Button, { ButtonProps } from "../Button/Button";
+import { Button, ButtonProps } from "../Button/Button";
 import { hasReactNode } from "../../lib/utils";
 import Headline from "../Typography/Headline/Headline";
-import Title from "../Typography/Title/Title";
-import Caption from "../Typography/Caption/Caption";
+import { Title } from "../Typography/Title/Title";
+import { Caption } from "../Typography/Caption/Caption";
 import ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
 import { FocusTrap } from "../FocusTrap/FocusTrap";
 import {
@@ -50,7 +50,7 @@ export interface AlertState {
 
 type TransitionEndHandler = (e?: TransitionEvent) => void;
 
-type ItemClickHander = (item: AlertActionInterface) => () => void;
+type ItemClickHandler = (item: AlertActionInterface) => () => void;
 
 class AlertComponent extends React.Component<TAlertProps, AlertState> {
   constructor(props: TAlertProps) {
@@ -76,7 +76,7 @@ class AlertComponent extends React.Component<TAlertProps, AlertState> {
       : 300;
   }
 
-  onItemClick: ItemClickHander = (item: AlertActionInterface) => () => {
+  onItemClick: ItemClickHandler = (item: AlertActionInterface) => () => {
     const { action, autoclose } = item;
 
     if (autoclose) {
@@ -154,14 +154,10 @@ class AlertComponent extends React.Component<TAlertProps, AlertState> {
   renderText(text: React.ReactNode) {
     switch (this.props.platform) {
       case VKCOM:
-        return (
-          <Caption vkuiClass="Alert__text" level="1" weight="regular">
-            {text}
-          </Caption>
-        );
+        return <Caption vkuiClass="Alert__text">{text}</Caption>;
       case IOS:
         return (
-          <Caption vkuiClass="Alert__text" level="2" weight="regular">
+          <Caption vkuiClass="Alert__text" level="2">
             {text}
           </Caption>
         );
@@ -263,6 +259,7 @@ class AlertComponent extends React.Component<TAlertProps, AlertState> {
           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",

package/src/components/Alert/Readme.md

@@ -33,13 +33,13 @@ class Example extends React.Component {
     };
 
     this.openAction = this.openAction.bind(this);
-    this.openDeleteion = this.openDeleteion.bind(this);
+    this.openDeletion = this.openDeletion.bind(this);
     this.closePopout = this.closePopout.bind(this);
     this.addActionLogItem = this.addActionLogItem.bind(this);
   }
 
   componentDidMount() {
-    this.openDeleteion();
+    this.openDeletion();
   }
 
   addActionLogItem(value) {
@@ -75,7 +75,7 @@ class Example extends React.Component {
     });
   }
 
-  openDeleteion() {
+  openDeletion() {
     this.setState({
       popout: (
         <Alert
@@ -114,7 +114,7 @@ class Example extends React.Component {
               <PanelHeader>Alert</PanelHeader>
               <Group>
                 <CellButton onClick={this.openAction}>Лишить права</CellButton>
-                <CellButton onClick={this.openDeleteion}>
+                <CellButton onClick={this.openDeletion}>
                   Удалить документ
                 </CellButton>
                 {this.state.actionsLog.map((value, i) => (

package/src/components/AppRoot/AppRoot.tsx

@@ -72,7 +72,7 @@ export const AppRoot = withAdaptivity<AppRootProps>(
 
     if (process.env.NODE_ENV === "development") {
       if (scroll !== "global" && mode !== "embedded") {
-        warn("Scroll modes only supported in embedded mode");
+        warn("Scroll modes only supported in embedded mode", "error");
       }
       if (_mode && _embedded) {
         warn(`mode="${mode}" overrides embedded`);
@@ -189,6 +189,7 @@ export const AppRoot = withAdaptivity<AppRootProps>(
     ) : (
       <div
         ref={rootRef}
+        // eslint-disable-next-line vkui/no-object-expression-in-arguments
         vkuiClass={classNames("AppRoot", {
           "AppRoot--no-mouse": !hasMouse,
         })}

package/src/components/AppRoot/Readme.md

@@ -1,9 +1,9 @@
-Обязательный компонент-обёртка над приложением. В нём инкапсулирована логика [режимов подкючения](#/Modes).
+Обязательный компонент-обёртка над приложением. В нём инкапсулирована логика [режимов подключения](#/Modes).
 
 ## Режимы скролла
 
 Навигационные компоненты VKUI — `Root, View, Panel, Epic` — запоминают скролл экрана и восстанавливают его при возвращении. embedded-приложения поддерживают два режима скролла:
 
 - `global` (по умолчанию) — VKUI-приложение скроллится вместе со страницей.
-- `contain` — VKUI-приложние живет в отдельной зоне и скроллится независимо внутри `AppRoot` (например, в модалке).
+- `contain` — VKUI-приложение живет в отдельной зоне и скроллится независимо внутри `AppRoot` (например, в модалке).
   Режимы переключают через `<AppRoot scroll="...">`.

package/src/components/Avatar/Avatar.tsx

@@ -96,6 +96,7 @@ const Avatar: React.FC<AvatarProps> = ({
   return (
     <div
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("Avatar", platform),
         `Avatar--type-${mode}`,
@@ -135,6 +136,7 @@ const Avatar: React.FC<AvatarProps> = ({
       {overlayIcon && (
         <Tappable
           Component="button"
+          // eslint-disable-next-line vkui/no-object-expression-in-arguments
           vkuiClass={classNames("Avatar__overlay", {
             "Avatar__overlay--visible": overlayAction === "always",
             "Avatar__overlay--light": overlayMode === "light",
@@ -150,6 +152,7 @@ const Avatar: React.FC<AvatarProps> = ({
       )}
       {badge && (
         <div
+          // eslint-disable-next-line vkui/no-object-expression-in-arguments
           vkuiClass={classNames("Avatar__badge", {
             "Avatar__badge--large": size >= 96,
             "Avatar__badge--shadow":

package/src/components/Banner/Banner.tsx

@@ -14,9 +14,9 @@ import {
 import Tappable from "../Tappable/Tappable";
 import IconButton from "../IconButton/IconButton";
 import Headline from "../Typography/Headline/Headline";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import Text from "../Typography/Text/Text";
-import Title from "../Typography/Title/Title";
+import { Title } from "../Typography/Title/Title";
 import "./Banner.css";
 
 export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -127,6 +127,7 @@ const Banner: React.FC<BannerProps> = (props: BannerProps) => {
   return (
     <section
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("Banner", platform),
         `Banner--md-${mode}`,

package/src/components/Button/Button.css

@@ -511,6 +511,16 @@
 /**
  * CMP:
  * Banner
+ *
+ * ====================
+ *
+ * FIXME Следует поправить компонент на уровне уровне дизайн-системы
+ *  Сейчас нет возможности использовать `ButtonGroup`, т.к. эти стили конфликтуют с `ButtonGroup.css`:
+ *  1. Есть привязка к компоненту `.Button--lvl-tertiary`. Главная проблема, т.к. отступы в `ButtonGroup.css` не зависят от типа кнопки.
+ *  2. `margin-top` следует выставить обёртке `.Banner__actions`. Нужно иметь ввиду, что значение отступа меняются в зависимости от типа кнопки (см. п. 1)
+ *  2. `margin-right` добавляет лишний отступ,
+ *  3. `6px` конфликтуют со значениями в `gap`,
+ *  4. У обёртки `.Banner__actions` выставлен отрицательный внешний снизу в 6px.
  */
 .Banner__actions > .Button {
   margin-top: 12px;
@@ -544,6 +554,15 @@
 /**
  * CMP:
  * ModalCardBase
+ *
+ * ====================
+ *
+ * FIXME Следует поправить компонент на уровне уровне дизайн-системы
+ *  Сейчас нет возможности использовать `ButtonGroup`, т.к. эти стили конфликтуют с `ButtonGroup.css`:
+ *  1. `flex: 1` конфликтует с `stretched={false}`.
+ *  2. `margin-right` добавляет лишний отступ,
+ *  3. `6px` конфликтуют со значениями в `gap`,
+ *  4. У обёртки `.ModalCardBase__actions` выставлены отрицательные внешние отступы слева/справа в 6px.
  */
 .ModalCardBase__actions .Button {
   flex: 1;
@@ -563,7 +582,13 @@
 /**
  * CMP:
  * RichCell
+ *
+ * ====================
+ *
+ * @deprecated Пользователям следует использовать `ButtonGroup` (см. пример `RichCell/Readme.md`).
+ *
+ * TODO Сейчас стиль сохранён для обратной совместимости. Удалить в 5.0.0.
  */
-.RichCell__actions .Button + .Button {
+.RichCell__actions > .Button + .Button {
   margin-left: 8px;
 }

package/src/components/Button/Button.tsx

@@ -2,10 +2,10 @@ import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { ConfigProviderContext } from "../ConfigProvider/ConfigProviderContext";
 import Tappable, { TappableProps } from "../Tappable/Tappable";
-import Title from "../Typography/Title/Title";
+import { Title } from "../Typography/Title/Title";
 import Text from "../Typography/Text/Text";
-import Subhead from "../Typography/Subhead/Subhead";
-import Caption from "../Typography/Caption/Caption";
+import { Subhead } from "../Typography/Subhead/Subhead";
+import { Caption } from "../Typography/Caption/Caption";
 import { HasAlign, HasComponent } from "../../types";
 import { usePlatform } from "../../hooks/usePlatform";
 import {
@@ -81,11 +81,11 @@ const ButtonTypography: React.FC<ButtonTypographyProps> = (
       }
 
       if (platform === VKCOM) {
-        return <Caption level="1" weight="regular" {...restProps} />;
+        return <Caption {...restProps} />;
       }
 
       if (isCompact) {
-        return <Caption level="1" weight="medium" {...restProps} />;
+        return <Caption weight="2" {...restProps} />;
       }
 
       return <Subhead weight="2" {...restProps} />;
@@ -141,25 +141,26 @@ function resolveButtonAppearance(
   };
 }
 
-const Button: React.FC<ButtonProps> = (props: ButtonProps) => {
+const ButtonComponent: React.FC<ButtonProps> = ({
+  size = "s",
+  mode = "primary",
+  appearance,
+  stretched = false,
+  align = "center",
+  children,
+  before,
+  after,
+  getRootRef,
+  sizeY,
+  Component = "button",
+  loading,
+  onClick,
+  stopPropagation = true,
+  ...restProps
+}) => {
   const platform = usePlatform();
-  const {
-    size,
-    mode,
-    appearance,
-    stretched,
-    align,
-    children,
-    before,
-    after,
-    getRootRef,
-    sizeY,
-    Component = "button",
-    loading,
-    onClick,
-    ...restProps
-  } = props;
   const hasIcons = Boolean(before || after);
+  const hasIconOnly = !children && Boolean(after) !== Boolean(before);
   const { resolvedMode, resolvedAppearance } = resolveButtonAppearance(
     appearance,
     mode
@@ -172,6 +173,7 @@ const Button: React.FC<ButtonProps> = (props: ButtonProps) => {
       Component={restProps.href ? "a" : Component}
       onClick={loading ? undefined : onClick}
       focusVisibleMode="outside"
+      stopPropagation={stopPropagation}
       vkuiClass={classNames(
         "Button",
         `Button--sz-${size}`,
@@ -179,13 +181,9 @@ const Button: React.FC<ButtonProps> = (props: ButtonProps) => {
         `Button--clr-${resolvedAppearance}`,
         `Button--aln-${align}`,
         `Button--sizeY-${sizeY}`,
-        {
-          ["Button--stretched"]: stretched,
-          ["Button--with-icon"]: hasIcons,
-          ["Button--singleIcon"]: Boolean(
-            (!children && !after && before) || (!children && after && !before)
-          ),
-        }
+        stretched && "Button--stretched",
+        hasIcons && "Button--with-icon",
+        hasIconOnly && "Button--singleIcon"
       )}
       getRootRef={getRootRef}
       hoverMode={hasNewTokens ? "Button--hover" : "background"}
@@ -211,15 +209,6 @@ const Button: React.FC<ButtonProps> = (props: ButtonProps) => {
   );
 };
 
-Button.defaultProps = {
-  mode: "primary",
-  align: "center",
-  size: "s",
-  stretched: false,
-  stopPropagation: true,
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(Button, {
+export const Button = withAdaptivity(ButtonComponent, {
   sizeY: true,
 });

package/src/components/ButtonGroup/ButtonGroup.css

@@ -0,0 +1,52 @@
+.ButtonGroup {
+  display: inline-flex;
+  align-items: flex-start; /* Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */
+}
+
+.ButtonGroup--stretched {
+  display: flex;
+  width: 100%;
+}
+
+.ButtonGroup--mode-vertical {
+  flex-direction: column;
+}
+
+.ButtonGroup--mode-horizontal {
+  flex-direction: row;
+}
+
+/* stylelint-disable vkui/atomic */
+
+/**
+ * # Обоснование
+ * Чтобы не завязываться на класс компонента, используем каскад и универсальный селектор.
+ */
+
+/* "gap" для mode="vertical" */
+.ButtonGroup--mode-vertical.ButtonGroup--gap-space > *:not(:first-child) {
+  margin-top: var(--vkui--size_button_group_gap_space--regular);
+}
+
+.ButtonGroup--mode-vertical.ButtonGroup--gap-s > *:not(:first-child) {
+  margin-top: var(--vkui--size_button_group_gap_small--regular);
+}
+
+.ButtonGroup--mode-vertical.ButtonGroup--gap-m > *:not(:first-child) {
+  margin-top: var(--vkui--size_button_group_gap_medium--regular);
+}
+
+/* "gap" для mode="horizontal" */
+.ButtonGroup--mode-horizontal.ButtonGroup--gap-space > *:not(:last-child) {
+  margin-right: var(--vkui--size_button_group_gap_space--regular);
+}
+
+.ButtonGroup--mode-horizontal.ButtonGroup--gap-s > *:not(:last-child) {
+  margin-right: var(--vkui--size_button_group_gap_small--regular);
+}
+
+.ButtonGroup--mode-horizontal.ButtonGroup--gap-m > *:not(:last-child) {
+  margin-right: var(--vkui--size_button_group_gap_medium--regular);
+}
+
+/* stylelint-enable vkui/atomic */

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import type { HasRootRef } from "../../types";
+import "./ButtonGroup.css";
+
+export interface ButtonGroupProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRootRef<HTMLDivElement> {
+  /**
+   * Задает расположение элементов внутри группы, вертикальное или горизонтальное.
+   */
+  mode?: "vertical" | "horizontal";
+  /**
+   * Выставляет в зависимости от `mode` отступ по вертикали или горизонтали.
+   */
+  gap?: "none" | "space" | "s" | "m";
+  /**
+   * Растягивает компонент на всю ширину контейнера.
+   *
+   * Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо.
+   */
+  stretched?: boolean;
+}
+
+export const ButtonGroup: React.FC<ButtonGroupProps> = ({
+  mode = "horizontal",
+  gap = "m",
+  stretched = false,
+  getRootRef,
+  children,
+  ...restProps
+}) => {
+  return (
+    <div
+      vkuiClass={classNames(
+        "ButtonGroup",
+        `ButtonGroup--mode-${mode}`,
+        gap !== "none" && `ButtonGroup--gap-${gap}`,
+        stretched && "ButtonGroup--stretched"
+      )}
+      role="group"
+      ref={getRootRef}
+      {...restProps}
+    >
+      {children}
+    </div>
+  );
+};