@vkontakte/vkui 4.30.0 → 4.33.0

package/src/components/Group/Readme.md

@@ -3,154 +3,149 @@
 ```jsx { "props": { "layout": false, "adaptivity": true } }
 const MODAL_NAME = "modal";
 
-class App extends React.Component {
-  constructor() {
-    this.state = {
-      isModalOpened: false,
-    };
-  }
+const Example = () => {
+  const [isModalOpened, setModalOpened] = React.useState(false);
 
-  renderGroup() {
-    return (
-      <>
-        <Group>
-          <Group mode="plain">
-            <SimpleCell
-              indicator="+7 ••• •• •• 96"
-              before={<Icon28PhoneOutline />}
-            >
-              Номер телефона
-            </SimpleCell>
-            <SimpleCell
-              indicator="g•••@gmail.com"
-              before={<Icon28MailOutline />}
-            >
-              Email
-            </SimpleCell>
-          </Group>
-          <Group mode="plain">
-            <SimpleCell
-              indicator="Обновлён 3 года назад"
-              before={<Icon28KeyOutline />}
-            >
-              Пароль
-            </SimpleCell>
-            <SimpleCell
-              indicator="Вкл."
-              before={<Icon28CheckShieldDeviceOutline />}
+  const modal = (
+    <ModalRoot
+      activeModal={isModalOpened ? MODAL_NAME : null}
+      onClose={() => setModalOpened(false)}
+    >
+      <ModalPage
+        id={MODAL_NAME}
+        onClose={() => setModalOpened(false)}
+        header={
+          <ModalPageHeader
+            before={
+              platform !== IOS && (
+                <PanelHeaderClose onClick={() => setModalOpened(false)} />
+              )
+            }
+            after={
+              platform === IOS && (
+                <PanelHeaderButton onClick={() => setModalOpened(false)}>
+                  <Icon24Dismiss />
+                </PanelHeaderButton>
+              )
+            }
+          >
+            Group в модальном окне
+          </ModalPageHeader>
+        }
+      >
+        <SharedContent />
+      </ModalPage>
+    </ModalRoot>
+  );
+
+  return (
+    <SplitLayout modal={modal}>
+      <SplitCol>
+        <View activePanel="group">
+          <Panel id="group">
+            <PanelHeader>Group</PanelHeader>
+
+            <SharedContent />
+
+            <Group
+              header={<Header mode="secondary">Модальное окно с Group</Header>}
             >
-              Подтверждение входа
-            </SimpleCell>
-            <SimpleCell indicator="2" before={<Icon28DevicesOutline />}>
-              Привязанные устройства
-            </SimpleCell>
-          </Group>
-        </Group>
+              <SimpleCell onClick={() => setModalOpened(true)}>
+                Открыть Group в модальном окне
+              </SimpleCell>
+            </Group>
+          </Panel>
+        </View>
+      </SplitCol>
+    </SplitLayout>
+  );
+};
 
-        <Group header={<Header>Последняя активность</Header>}>
+const SharedContent = () => {
+  const platform = usePlatform();
+
+  return (
+    <>
+      <Group>
+        <Group mode="plain">
           <SimpleCell
-            after={
-              <IconButton aria-label="Подробнее">
-                <Icon16MoreVertical />
-              </IconButton>
-            }
-            description="Санкт-Петербург, Россия"
-            before={<Avatar size={32} mode="app" />}
+            indicator="+7 ••• •• •• 96"
+            before={<Icon28PhoneOutline />}
           >
-            VK · Приложение для iPhone
+            Номер телефона
           </SimpleCell>
+          <SimpleCell indicator="g•••@gmail.com" before={<Icon28MailOutline />}>
+            Email
+          </SimpleCell>
+        </Group>
+        <Group mode="plain">
           <SimpleCell
-            after={
-              <IconButton aria-label="Подробнее">
-                <Icon16MoreVertical />
-              </IconButton>
-            }
-            description="Санкт-Петербург, Россия"
-            before={<Avatar size={32} mode="app" />}
+            indicator="Обновлён 3 года назад"
+            before={<Icon28KeyOutline />}
+          >
+            Пароль
+          </SimpleCell>
+          <SimpleCell
+            indicator="Вкл."
+            before={<Icon28CheckShieldDeviceOutline />}
           >
-            VK · Браузер Chrome для macOS
+            Подтверждение входа
+          </SimpleCell>
+          <SimpleCell indicator="2" before={<Icon28DevicesOutline />}>
+            Привязанные устройства
           </SimpleCell>
-          <CellButton>Показать историю активности</CellButton>
-          <CellButton mode="danger">Завершить все остальные сеансы</CellButton>
         </Group>
+      </Group>
 
-        <Group
-          header={<Header>Адреса</Header>}
-          description="Для использования в мини-приложениях, Delivery Cub, VK Taxi и других сервисах ВКонтакте. Эти адреса видны только Вам."
+      <Group header={<Header>Последняя активность</Header>}>
+        <SimpleCell
+          after={
+            platform === IOS ? (
+              <IconButton aria-label="Подробнее">
+                <Icon16MoreHorizontal />
+              </IconButton>
+            ) : (
+              <IconButton aria-label="Подробнее">
+                <Icon16MoreVertical />
+              </IconButton>
+            )
+          }
+          description="Санкт-Петербург, Россия"
+          before={<Avatar size={32} mode="app" />}
         >
-          <CellButton>Добавить домашний адрес</CellButton>
-          <CellButton>Добавить рабочий адрес</CellButton>
-        </Group>
-      </>
-    );
-  }
-
-  render() {
-    const modal = (
-      <ModalRoot
-        activeModal={this.state.isModalOpened ? MODAL_NAME : null}
-        onClose={() => this.setState({ isModalOpened: false })}
-      >
-        <ModalPage
-          id={MODAL_NAME}
-          onClose={() => this.setState({ isModalOpened: false })}
-          header={
-            <ModalPageHeader
-              left={
-                this.props.platform !== IOS && (
-                  <PanelHeaderClose
-                    onClick={() => this.setState({ isModalOpened: false })}
-                  />
-                )
-              }
-              right={
-                this.props.platform === IOS && (
-                  <PanelHeaderButton
-                    onClick={() => this.setState({ isModalOpened: false })}
-                  >
-                    <Icon24Dismiss />
-                  </PanelHeaderButton>
-                )
-              }
-            >
-              Group в модальном окне
-            </ModalPageHeader>
+          VK · Приложение для iPhone
+        </SimpleCell>
+        <SimpleCell
+          after={
+            platform === IOS ? (
+              <IconButton aria-label="Подробнее">
+                <Icon16MoreHorizontal />
+              </IconButton>
+            ) : (
+              <IconButton aria-label="Подробнее">
+                <Icon16MoreVertical />
+              </IconButton>
+            )
           }
+          description="Санкт-Петербург, Россия"
+          before={<Avatar size={32} mode="app" />}
         >
-          {this.renderGroup()}
-        </ModalPage>
-      </ModalRoot>
-    );
-
-    return (
-      <SplitLayout modal={modal}>
-        <SplitCol>
-          <View activePanel="group">
-            <Panel id="group">
-              <PanelHeader>Group</PanelHeader>
+          VK · Браузер Chrome для macOS
+        </SimpleCell>
+        <CellButton>Показать историю активности</CellButton>
+        <CellButton mode="danger">Завершить все остальные сеансы</CellButton>
+      </Group>
 
-              {this.renderGroup()}
-
-              <Group
-                header={
-                  <Header mode="secondary">Модальное окно с Group</Header>
-                }
-              >
-                <SimpleCell
-                  onClick={() => this.setState({ isModalOpened: true })}
-                >
-                  Открыть Group в модальном окне
-                </SimpleCell>
-              </Group>
-            </Panel>
-          </View>
-        </SplitCol>
-      </SplitLayout>
-    );
-  }
-}
-
-const AppWithPlatform = withPlatform(App);
+      <Group
+        header={<Header>Адреса</Header>}
+        description="Для использования в мини-приложениях, Delivery Cub, VK Taxi и других сервисах ВКонтакте. Эти адреса видны только Вам."
+      >
+        <CellButton>Добавить домашний адрес</CellButton>
+        <CellButton>Добавить рабочий адрес</CellButton>
+      </Group>
+    </>
+  );
+};
 
-<AppWithPlatform />;
+<Example />;
 ```

package/src/components/Header/Header.tsx

@@ -5,10 +5,10 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { HasComponent, HasPlatform, HasRootRef } from "../../types";
 import { hasReactNode, isPrimitiveReactNode } from "../../lib/utils";
 import { Platform } from "../../lib/platform";
-import Headline from "../Typography/Headline/Headline";
+import { Headline } from "../Typography/Headline/Headline";
 import { Caption } from "../Typography/Caption/Caption";
 import { Title } from "../Typography/Title/Title";
-import Text from "../Typography/Text/Text";
+import { Text } from "../Typography/Text/Text";
 import { Subhead } from "../Typography/Subhead/Subhead";
 import "./Header.css";
 
@@ -50,7 +50,7 @@ const HeaderContent: React.FC<HeaderContentProps> = ({
   if (platform === Platform.VKCOM) {
     switch (mode) {
       case "primary":
-        return <Headline weight="regular" {...restProps} />;
+        return <Headline weight="3" {...restProps} />;
       case "secondary":
       case "tertiary":
         return <Caption {...restProps} />;
@@ -60,7 +60,7 @@ const HeaderContent: React.FC<HeaderContentProps> = ({
   switch (mode) {
     case "primary":
     case "tertiary":
-      return <Headline weight="medium" {...restProps} />;
+      return <Headline weight="2" {...restProps} />;
     case "secondary":
       return <Caption weight="1" caps {...restProps} />;
   }
@@ -68,35 +68,11 @@ const HeaderContent: React.FC<HeaderContentProps> = ({
   return null;
 };
 
-type HeaderAsideProps = Pick<HeaderProps, "aside"> & HasPlatform & HasComponent;
-
-const HeaderAside: React.FC<HeaderAsideProps> = ({
-  platform,
-  ...restProps
-}) => {
-  return platform === Platform.VKCOM ? (
-    <Subhead {...restProps} />
-  ) : (
-    <Text weight="regular" {...restProps} />
-  );
-};
-
-type HeaderSubtitleProps = Pick<HeaderProps, "subtitle" | "mode"> &
-  HasComponent;
-
-const HeaderSubtitle: React.FC<HeaderSubtitleProps> = ({
-  mode,
-  ...restProps
-}) => {
-  return mode === "secondary" ? (
-    <Subhead {...restProps} />
-  ) : (
-    <Caption {...restProps} />
-  );
-};
-
-const Header: React.FC<HeaderProps> = ({
-  mode,
+/**
+ * @see https://vkcom.github.io/VKUI/#/Header
+ */
+export const Header: React.FC<HeaderProps> = ({
+  mode = "primary",
   children,
   subtitle,
   indicator,
@@ -107,6 +83,9 @@ const Header: React.FC<HeaderProps> = ({
 }: HeaderProps) => {
   const platform = usePlatform();
 
+  const AsideTypography = platform === Platform.VKCOM ? Subhead : Text;
+  const SubtitleTypography = mode === "secondary" ? Subhead : Caption;
+
   return (
     <header
       {...restProps}
@@ -146,32 +125,17 @@ const Header: React.FC<HeaderProps> = ({
         </HeaderContent>
 
         {hasReactNode(subtitle) && (
-          <HeaderSubtitle
-            vkuiClass="Header__subtitle"
-            Component="span"
-            mode={mode}
-          >
+          <SubtitleTypography vkuiClass="Header__subtitle" Component="span">
             {subtitle}
-          </HeaderSubtitle>
+          </SubtitleTypography>
         )}
       </div>
 
       {hasReactNode(aside) && (
-        <HeaderAside
-          vkuiClass="Header__aside"
-          Component="span"
-          platform={platform}
-        >
+        <AsideTypography vkuiClass="Header__aside" Component="span">
           {aside}
-        </HeaderAside>
+        </AsideTypography>
       )}
     </header>
   );
 };
-
-Header.defaultProps = {
-  mode: "primary",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default Header;

package/src/components/HorizontalCell/HorizontalCell.tsx

@@ -4,9 +4,9 @@ import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
 import { Caption } from "../Typography/Caption/Caption";
-import Tappable from "../Tappable/Tappable";
+import { Tappable } from "../Tappable/Tappable";
 import { Subhead } from "../Typography/Subhead/Subhead";
-import Avatar from "../Avatar/Avatar";
+import { Avatar } from "../Avatar/Avatar";
 import { HasComponent, HasRef, HasRootRef } from "../../types";
 import "./HorizontalCell.css";
 
@@ -39,6 +39,9 @@ export interface HorizontalCellProps
   disabled?: boolean;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/HorizontalCell
+ */
 export const HorizontalCell: React.FC<HorizontalCellProps> = ({
   className,
   header,

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -106,7 +106,10 @@ function doScroll({
     const currentLeft = startLeft + (endLeft - startLeft) * value;
     scrollElement.scrollLeft = Math.ceil(currentLeft);
 
-    if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft)) {
+    if (
+      roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) &&
+      elapsed !== 1
+    ) {
       requestAnimationFrame(scroll);
       return;
     }
@@ -220,6 +223,9 @@ const HorizontalScrollComponent: React.FC<HorizontalScrollProps> = ({
   );
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
+ */
 export const HorizontalScroll = withAdaptivity(HorizontalScrollComponent, {
   hasMouse: true,
 });

package/src/components/HorizontalScroll/HorizontalScrollArrow.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Icon24Chevron } from "@vkontakte/icons";
 import { classNames } from "../../lib/classNames";
-import Tappable from "../Tappable/Tappable";
+import { Tappable } from "../Tappable/Tappable";
 import "./HorizontalScrollArrow.css";
 
 export interface HorizontalScrollArrowProps {

package/src/components/IconButton/IconButton.css

@@ -9,7 +9,20 @@
   margin: 0;
   position: relative;
   height: 48px;
-  border-radius: 50%;
+
+  /**
+   * Чтобы закргуление было равно половине высоты.
+   * см. https://stackoverflow.com/questions/27233295/possible-to-make-border-radius-equal-to-half-the-total-height-without-javascript
+   */
+  border-radius: 9999px;
+}
+
+.IconButton[disabled] {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+.IconButton--ios {
+  border-radius: var(--vkui--size_border_radius--regular);
 }
 
 .IconButton .Icon--16 {
@@ -28,10 +41,6 @@
   padding: 10px;
 }
 
-.IconButton[disabled] {
-  opacity: 0.6;
-}
-
 .FormItem--removable .Removable__content > .IconButton,
 .FormLayoutGroup--removable .Removable__content > .IconButton,
 .FormField__after .IconButton {
@@ -48,10 +57,6 @@
   padding: 0;
 }
 
-.Removable__action.IconButton {
-  color: var(--icon_secondary);
-}
-
 /*
  * sizeY: COMPACT
  */
@@ -81,13 +86,3 @@
 .IconButton--sizeY-compact .Icon--28 {
   padding: 8px;
 }
-
-/*
- * Android & VKCOM
- */
-.IconButton--android.IconButton--active .Icon,
-.IconButton--vkcom.IconButton--active .Icon {
-  transition: inherit;
-  border-radius: inherit;
-  background-color: var(--background_highlighted);
-}

package/src/components/IconButton/IconButton.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
-import Tappable, { TappableProps } from "../Tappable/Tappable";
-import { getClassName } from "../../helpers/getClassName";
+import { TappableProps, Tappable } from "../Tappable/Tappable";
 import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
 import { withAdaptivity } from "../../hoc/withAdaptivity";
@@ -9,6 +8,7 @@ import { warnOnce } from "../../lib/warnOnce";
 import "./IconButton.css";
 
 export interface IconButtonProps extends TappableProps {
+  children?: React.ReactNode;
   /**
    * @deprecated будет удалено в 5.0.0. Используйте `children`
    */
@@ -16,11 +16,12 @@ export interface IconButtonProps extends TappableProps {
 }
 
 const warn = warnOnce("IconButton");
-const IconButton: React.FC<IconButtonProps> = ({
+
+const IconButtonComponent = ({
   icon,
   sizeY,
   children,
-  Component,
+  Component = "button",
   ...restProps
 }: IconButtonProps) => {
   const platform = usePlatform();
@@ -36,10 +37,11 @@ const IconButton: React.FC<IconButtonProps> = ({
       {...restProps}
       Component={restProps.href ? "a" : Component}
       activeEffectDelay={200}
-      activeMode={platform === IOS ? "opacity" : "IconButton--active"}
+      activeMode="background"
       vkuiClass={classNames(
-        getClassName("IconButton", platform),
-        `IconButton--sizeY-${sizeY}`
+        "IconButton",
+        `IconButton--sizeY-${sizeY}`,
+        platform === IOS && "IconButton--ios"
       )}
     >
       {icon || children}
@@ -47,11 +49,11 @@ const IconButton: React.FC<IconButtonProps> = ({
   );
 };
 
-IconButton.defaultProps = {
-  Component: "button",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(IconButton, {
+/**
+ * @see https://vkcom.github.io/VKUI/#/IconButton
+ */
+export const IconButton = withAdaptivity(IconButtonComponent, {
   sizeY: true,
 });
+
+IconButton.displayName = "IconButton";

package/src/components/IconButton/Readme.md

@@ -0,0 +1,51 @@
+Обёртка для иконки, если требуется сделать её интерактивной.
+
+```jsx { "props": { "layout": false, "adaptivity": true } }
+const Example = () => {
+  return (
+    <div style={rowStyles}>
+      <div>
+        <IconButton>
+          <Icon16Delete />
+        </IconButton>
+        <Caption style={captionStyles}>16</Caption>
+      </div>
+
+      <div>
+        <IconButton>
+          <Icon16MoreVertical />
+        </IconButton>
+        <Caption style={captionStyles}>8x16</Caption>
+      </div>
+
+      <div>
+        <IconButton>
+          <Icon24Delete />
+        </IconButton>
+        <Caption style={captionStyles}>24</Caption>
+      </div>
+
+      <div>
+        <IconButton>
+          <Icon28Delete />
+        </IconButton>
+        <Caption style={captionStyles}>28</Caption>
+      </div>
+    </div>
+  );
+};
+
+const rowStyles = {
+  display: "flex",
+  justifyContent: "center",
+  gap: 16,
+  padding: 16,
+};
+
+const captionStyles = {
+  marginTop: 8,
+  textAlign: "center",
+};
+
+<Example />;
+```

package/src/components/InfoRow/InfoRow.css

@@ -7,7 +7,7 @@
 .InfoRow__header {
   display: block;
   margin-bottom: 2px;
-  color: var(--text_subhead);
+  color: var(--text_subhead, var(--vkui--color_text_subhead));
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;