@vkontakte/vkui 4.32.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
-              before={
-                this.props.platform !== IOS && (
-                  <PanelHeaderClose
-                    onClick={() => this.setState({ isModalOpened: false })}
-                  />
-                )
-              }
-              after={
-                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

@@ -71,8 +71,8 @@ const HeaderContent: React.FC<HeaderContentProps> = ({
 /**
  * @see https://vkcom.github.io/VKUI/#/Header
  */
-const Header: React.FC<HeaderProps> = ({
-  mode,
+export const Header: React.FC<HeaderProps> = ({
+  mode = "primary",
   children,
   subtitle,
   indicator,
@@ -139,10 +139,3 @@ const Header: React.FC<HeaderProps> = ({
     </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";
 

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;
     }

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`
    */
@@ -17,14 +17,11 @@ export interface IconButtonProps extends TappableProps {
 
 const warn = warnOnce("IconButton");
 
-/**
- * @see https://vkcom.github.io/VKUI/#/IconButton
- */
-const IconButton: React.FC<IconButtonProps> = ({
+const IconButtonComponent = ({
   icon,
   sizeY,
   children,
-  Component,
+  Component = "button",
   ...restProps
 }: IconButtonProps) => {
   const platform = usePlatform();
@@ -40,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}
@@ -51,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/InitialsAvatar/InitialsAvatar.css

@@ -1,55 +1,52 @@
 .InitialsAvatar {
-  background: #99a2ad;
-  background: linear-gradient(135deg, #b1b6bd, #99a2ad);
-}
-
-.InitialsAvatar__text {
-  font-family: var(--font-display);
-  font-weight: 600;
-  color: var(
-    --white
-  ); /* stylelint-disable-line plugin/only-tokens-are-allowed */
-
-  text-transform: uppercase;
-  text-align: center;
+  background-color: #99a2ad;
+  background-image: linear-gradient(135deg, #b1b6bd, #99a2ad);
 }
 
 .InitialsAvatar--color-red {
-  background: #e52e40;
-  background: linear-gradient(135deg, #ff7583, #e52e40);
+  background-color: #e52e40;
+  background-image: linear-gradient(135deg, #ff7583, #e52e40);
 }
 
 .InitialsAvatar--color-pink {
-  background: #e62e6b;
-  background: linear-gradient(135deg, #ff8880, #e62e6b);
+  background-color: #e62e6b;
+  background-image: linear-gradient(135deg, #ff8880, #e62e6b);
 }
 
 .InitialsAvatar--color-orange {
-  background: #e66b2e;
-  background: linear-gradient(135deg, #ffbf80, #e66b2e);
+  background-color: #e66b2e;
+  background-image: linear-gradient(135deg, #ffbf80, #e66b2e);
 }
 
 .InitialsAvatar--color-yellow {
-  background: #e7a902;
-  background: linear-gradient(135deg, #ffd54f, #e7a902);
+  background-color: #e7a902;
+  background-image: linear-gradient(135deg, #ffd54f, #e7a902);
 }
 
 .InitialsAvatar--color-green {
-  background: #6cd97e;
-  background: linear-gradient(135deg, #6cd97e, #12b212);
+  background-color: #6cd97e;
+  background-image: linear-gradient(135deg, #6cd97e, #12b212);
 }
 
 .InitialsAvatar--color-l-blue {
-  background: #2bb4d6;
-  background: linear-gradient(135deg, #7df1fa, #2bb4d6);
+  background-color: #2bb4d6;
+  background-image: linear-gradient(135deg, #7df1fa, #2bb4d6);
 }
 
 .InitialsAvatar--color-blue {
-  background: #3f8ae0;
-  background: linear-gradient(135deg, #6cf, #3f8ae0);
+  background-color: #3f8ae0;
+  background-image: linear-gradient(135deg, #6cf, #3f8ae0);
 }
 
 .InitialsAvatar--color-violet {
-  background: #8f3fe0;
-  background: linear-gradient(135deg, #d3a6ff, #8f3fe0);
+  background-color: #8f3fe0;
+  background-image: linear-gradient(135deg, #d3a6ff, #8f3fe0);
+}
+
+.InitialsAvatar__text {
+  font-family: var(--font-display);
+  font-weight: 600;
+  color: var(--white, var(--vkui--color_text_contrast));
+  text-transform: uppercase;
+  text-align: center;
 }

package/src/components/InitialsAvatar/InitialsAvatar.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { HasRootRef } from "../../types";
 import { classNames } from "../../lib/classNames";
-import Avatar, { AVATAR_DEFAULT_SIZE, AvatarProps } from "../Avatar/Avatar";
+import { AVATAR_DEFAULT_SIZE, Avatar, AvatarProps } from "../Avatar/Avatar";
 import "./InitialsAvatar.css";
 
 /**
@@ -65,7 +65,7 @@ function getInitialsFontSize(avatarSize: number) {
 /**
  * @see https://vkcom.github.io/VKUI/#/InitialsAvatar
  */
-export const InitialsAvatar: React.FC<InitialsAvatarProps> = ({
+export const InitialsAvatar = ({
   size = AVATAR_DEFAULT_SIZE,
   children,
   gradientColor,

package/src/components/Link/Link.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
-import Tappable, { TappableProps } from "../Tappable/Tappable";
+import { TappableProps, Tappable } from "../Tappable/Tappable";
 import "./Link.css";
 
 export type LinkProps = TappableProps;
@@ -9,7 +9,10 @@ export type LinkProps = TappableProps;
 /**
  * @see https://vkcom.github.io/VKUI/#/Link
  */
-const Link: React.FC<LinkProps> = ({ children, ...restProps }: LinkProps) => {
+export const Link: React.FC<LinkProps> = ({
+  children,
+  ...restProps
+}: LinkProps) => {
   const platform = usePlatform();
 
   return (
@@ -25,6 +28,3 @@ const Link: React.FC<LinkProps> = ({ children, ...restProps }: LinkProps) => {
     </Tappable>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default Link;

package/src/components/List/List.tsx

@@ -8,10 +8,9 @@ import "./List.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/List
  */
-const List: React.FunctionComponent<React.HTMLAttributes<HTMLDivElement>> = ({
-  children,
-  ...restProps
-}: React.HTMLAttributes<HTMLDivElement>) => {
+export const List: React.FunctionComponent<
+  React.HTMLAttributes<HTMLDivElement>
+> = ({ children, ...restProps }: React.HTMLAttributes<HTMLDivElement>) => {
   const platform = usePlatform();
   const [isDragging, toggleDrag] = React.useState(false);
 
@@ -30,6 +29,3 @@ const List: React.FunctionComponent<React.HTMLAttributes<HTMLDivElement>> = ({
     </div>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default List;