@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/Gradient/Gradient.css

@@ -0,0 +1,83 @@
+.Gradient--md-tint.Gradient--to-top {
+  background: linear-gradient(
+    to top,
+    #f5f5f5,
+    rgba(245, 245, 245, 0.98),
+    rgba(245, 245, 245, 0.94),
+    rgba(245, 245, 245, 0.88),
+    rgba(245, 245, 245, 0.8),
+    rgba(245, 245, 245, 0.71),
+    rgba(245, 245, 245, 0.61),
+    rgba(245, 245, 245, 0.5),
+    rgba(245, 245, 245, 0.39),
+    rgba(245, 245, 245, 0.29),
+    rgba(245, 245, 245, 0.2),
+    rgba(245, 245, 245, 0.12),
+    rgba(245, 245, 245, 0.06),
+    rgba(245, 245, 245, 0.02),
+    rgba(245, 245, 245, 0)
+  );
+}
+
+.Gradient--md-tint.Gradient--to-bottom {
+  background: linear-gradient(
+    to bottom,
+    #f5f5f5,
+    rgba(245, 245, 245, 0.98),
+    rgba(245, 245, 245, 0.94),
+    rgba(245, 245, 245, 0.88),
+    rgba(245, 245, 245, 0.8),
+    rgba(245, 245, 245, 0.71),
+    rgba(245, 245, 245, 0.61),
+    rgba(245, 245, 245, 0.5),
+    rgba(245, 245, 245, 0.39),
+    rgba(245, 245, 245, 0.29),
+    rgba(245, 245, 245, 0.2),
+    rgba(245, 245, 245, 0.12),
+    rgba(245, 245, 245, 0.06),
+    rgba(245, 245, 245, 0.02),
+    rgba(245, 245, 245, 0)
+  );
+}
+
+body[scheme="space_gray"] .Gradient--md-tint.Gradient--to-top {
+  background: linear-gradient(
+    to top,
+    #232324,
+    rgba(35, 35, 36, 0.98),
+    rgba(35, 35, 36, 0.94),
+    rgba(35, 35, 36, 0.88),
+    rgba(35, 35, 36, 0.8),
+    rgba(35, 35, 36, 0.71),
+    rgba(35, 35, 36, 0.61),
+    rgba(35, 35, 36, 0.5),
+    rgba(35, 35, 36, 0.39),
+    rgba(35, 35, 36, 0.29),
+    rgba(35, 35, 36, 0.2),
+    rgba(35, 35, 36, 0.12),
+    rgba(35, 35, 36, 0.06),
+    rgba(35, 35, 36, 0.02),
+    rgba(35, 35, 36, 0)
+  );
+}
+
+body[scheme="space_gray"] .Gradient--md-tint.Gradient--to-bottom {
+  background: linear-gradient(
+    to bottom,
+    #232324,
+    rgba(35, 35, 36, 0.98),
+    rgba(35, 35, 36, 0.94),
+    rgba(35, 35, 36, 0.88),
+    rgba(35, 35, 36, 0.8),
+    rgba(35, 35, 36, 0.71),
+    rgba(35, 35, 36, 0.61),
+    rgba(35, 35, 36, 0.5),
+    rgba(35, 35, 36, 0.39),
+    rgba(35, 35, 36, 0.29),
+    rgba(35, 35, 36, 0.2),
+    rgba(35, 35, 36, 0.12),
+    rgba(35, 35, 36, 0.06),
+    rgba(35, 35, 36, 0.02),
+    rgba(35, 35, 36, 0)
+  );
+}

package/src/components/Gradient/Gradient.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import "./Gradient.css";
+
+export interface GradientProps extends React.HTMLAttributes<HTMLDivElement> {
+  mode?: "tint" | "white" | "black";
+  to?: "top" | "bottom";
+}
+
+export const Gradient: React.FC<GradientProps> = ({
+  mode = "tint",
+  children,
+  to = "top",
+  ...restProps
+}) => {
+  return (
+    <div
+      role="presentation"
+      {...restProps}
+      vkuiClass={classNames(
+        "Gradient",
+        `Gradient--md-${mode}`,
+        `Gradient--to-${to}`
+      )}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/Gradient/Readme.md

@@ -0,0 +1,55 @@
+```jsx
+const Example = ({ sizeX }) => {
+  return (
+    <View activePanel="gradient">
+      <Panel id="gradient">
+        <PanelHeader>Gradient</PanelHeader>
+        <Group>
+          <Gradient
+            style={{
+              margin: sizeX === SizeType.REGULAR ? "-7px -7px 0 -7px" : 0,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              textAlign: "center",
+              padding: 32,
+            }}
+          >
+            <Avatar size={96} />
+            <Title
+              style={{ marginBottom: 8, marginTop: 20 }}
+              level="2"
+              weight="2"
+            >
+              Алексей Мазелюк
+            </Title>
+            <Text style={{ marginBottom: 24, color: "var(--text_secondary)" }}>
+              Учащийся
+            </Text>
+            <Button size="m" mode="secondary">
+              Редактировать
+            </Button>
+          </Gradient>
+          <Group mode="plain">
+            <Header>Учебные заведения и классы</Header>
+            <SimpleCell
+              before={<Icon28SchoolOutline />}
+              description="Екатеринбург"
+            >
+              Школа №180
+            </SimpleCell>
+            <CellButton before={<Icon28AddOutline />}>
+              Добавить учебное заведение
+            </CellButton>
+          </Group>
+        </Group>
+      </Panel>
+    </View>
+  );
+};
+
+const ExampleWithAdaptivity = withAdaptivity(Example, { sizeX: true });
+
+<ExampleWithAdaptivity />;
+```

package/src/components/GridAvatar/GridAvatar.css

@@ -0,0 +1,37 @@
+.GridAvatar__in {
+  display: flex;
+  flex-flow: column wrap;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  border-radius: inherit;
+
+  --grid-avatar-image-offset: 2px;
+}
+
+.GridAvatar__item {
+  width: calc(50% - var(--grid-avatar-image-offset) / 2);
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+}
+
+.GridAvatar--images-1 .GridAvatar__item {
+  width: 100%;
+}
+
+.GridAvatar--images-3 .GridAvatar__item:nth-child(1n + 2),
+.GridAvatar--images-4 .GridAvatar__item {
+  height: calc(50% - var(--grid-avatar-image-offset) / 2);
+}
+
+.GridAvatar--images-2 .GridAvatar__item:nth-child(1n + 2),
+.GridAvatar--images-3 .GridAvatar__item:nth-child(1n + 2),
+.GridAvatar--images-4 .GridAvatar__item:nth-child(1n + 3) {
+  margin-left: var(--grid-avatar-image-offset);
+}
+
+.GridAvatar--images-3 .GridAvatar__item:nth-child(2),
+.GridAvatar--images-4 .GridAvatar__item:nth-child(odd) {
+  margin-bottom: var(--grid-avatar-image-offset);
+}

package/src/components/GridAvatar/GridAvatar.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import Avatar, { AvatarProps } from "../Avatar/Avatar";
+import { classNames } from "../../lib/classNames";
+import { warnOnce } from "../../lib/warnOnce";
+import { HasRootRef } from "../../types";
+import "./GridAvatar.css";
+
+export interface GridAvatarProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRootRef<HTMLDivElement>,
+    Pick<AvatarProps, "size" | "shadow" | "badge"> {
+  src?: string[];
+}
+
+const MIN_GRID_LENGTH = 1;
+const MAX_GRID_LENGTH = 4;
+
+const warn = warnOnce("GridAvatar");
+
+export const GridAvatar: React.FC<GridAvatarProps> = ({
+  src = [],
+  ...restProps
+}: GridAvatarProps) => {
+  if (process.env.NODE_ENV === "development" && src.length > MAX_GRID_LENGTH) {
+    warn(
+      `Размер пропа src (${src.length}) больше максимального (${MAX_GRID_LENGTH})`
+    );
+  }
+
+  const count = Math.max(
+    MIN_GRID_LENGTH,
+    Math.min(MAX_GRID_LENGTH, src.length)
+  );
+
+  return (
+    <Avatar
+      {...restProps}
+      vkuiClass={classNames("GridAvatar", `GridAvatar--images-${count}`)}
+    >
+      <div vkuiClass="GridAvatar__in">
+        {src.slice(0, MAX_GRID_LENGTH).map((src, i) => {
+          return (
+            <div
+              key={i}
+              vkuiClass="GridAvatar__item"
+              style={{ backgroundImage: `url(${src})` }}
+            ></div>
+          );
+        })}
+      </div>
+    </Avatar>
+  );
+};

package/src/components/GridAvatar/Readme.md

@@ -0,0 +1,24 @@
+Отображение нескольких аватаров в сетке от 1 до 4 элементов.
+
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ display: "flex", padding: 12, gap: 8, flexFlow: "row wrap" }}>
+  <GridAvatar />
+  <GridAvatar src={[getAvatarUrl("user_ji")]} />
+  <GridAvatar src={[getAvatarUrl("user_wayshev"), getAvatarUrl("user_mm")]} />
+  <GridAvatar
+    src={[
+      getAvatarUrl("user_arthurstam"),
+      getAvatarUrl("user_xyz"),
+      getAvatarUrl("user_ox"),
+    ]}
+  />
+  <GridAvatar
+    src={[
+      getAvatarUrl("user_ilyagrshn"),
+      getAvatarUrl("user_tc"),
+      getAvatarUrl("user_lihachyov"),
+      getAvatarUrl("user_va"),
+    ]}
+  />
+</div>
+```

package/src/components/Group/Group.css

@@ -0,0 +1,86 @@
+.Group {
+  color: var(--text_primary);
+}
+
+.Group__inner {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.Group--sizeX-regular > .Group__inner {
+  padding: 8px;
+}
+
+.Group--card > .Group__inner {
+  background: var(--background_content);
+  border-radius: 8px;
+  box-shadow: inset 0 0 0 var(--thin-border) var(--input_border);
+}
+
+.Group--plain .Group__inner > .Tabs--default:first-child {
+  margin-top: -8px;
+}
+
+.Group--card > .Group__inner > .Tabs--default:first-child {
+  margin-top: -4px;
+}
+
+.Group--plain > .Group__separator {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.Group--sizeX-regular.Group--plain > .Group__separator {
+  padding: 8px;
+}
+
+.Group:last-of-type > .Group__separator {
+  display: none;
+}
+
+.Group:last-of-type > .Group__separator--force,
+.Group--sizeX-regular.Group--card:last-of-type > .Group__separator {
+  display: block;
+}
+
+.Group__description {
+  display: block;
+  padding: 4px 16px 16px;
+  color: var(--text_secondary);
+}
+
+.Group .Group > .Group__inner,
+.Group .Group > .Group__separator {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.Group .Group:first-of-type > .Group__inner {
+  padding-top: 0;
+}
+
+.Group .Group:last-of-type > .Group__inner {
+  padding-bottom: 0;
+}
+
+/**
+ * iOS
+ */
+.Group--ios .Group__description {
+  padding: 4px 12px 16px;
+}
+
+/**
+ * VKCOM
+ */
+.PanelHeader--vkcom ~ .Group--card:first-of-type,
+.PanelHeader--vkcom + * .Group--card:first-of-type {
+  position: relative;
+  top: -1px;
+}
+
+.PanelHeader--vkcom ~ .Group--card:first-of-type .Group__inner,
+.PanelHeader--vkcom + * .Group--card:first-of-type .Group__inner {
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}

package/src/components/Group/Group.tsx

@@ -0,0 +1,94 @@
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { HasRootRef } from "../../types";
+import { usePlatform } from "../../hooks/usePlatform";
+import Separator from "../Separator/Separator";
+import { hasReactNode } from "../../lib/utils";
+import { Caption } from "../Typography/Caption/Caption";
+import {
+  withAdaptivity,
+  AdaptivityProps,
+  SizeType,
+} from "../../hoc/withAdaptivity";
+import ModalRootContext from "../ModalRoot/ModalRootContext";
+import "./Group.css";
+
+export interface GroupProps
+  extends HasRootRef<HTMLElement>,
+    React.HTMLAttributes<HTMLElement>,
+    AdaptivityProps {
+  header?: React.ReactNode;
+  description?: React.ReactNode;
+  /**
+    show - разделитель всегда показывается,
+    hide – разделитель всегда спрятан,
+    auto – разделитель рисуется автоматически между соседними группами.
+   */
+  separator?: "show" | "hide" | "auto";
+  /**
+   * Режим отображения. Если установлен 'card', выглядит как карточка c
+   * обводкой и внешними отступами. Если 'plain' — без отступов и обводки.
+   * По умолчанию режим отображения зависит от `sizeX`. В модальных окнах
+   * по умолчанию 'plain'.
+   */
+  mode?: "plain" | "card";
+}
+
+const Group: React.FC<GroupProps> = (props: GroupProps) => {
+  const {
+    header,
+    description,
+    children,
+    separator,
+    getRootRef,
+    mode,
+    sizeX,
+    ...restProps
+  } = props;
+  const { isInsideModal } = React.useContext(ModalRootContext);
+  const platform = usePlatform();
+
+  let computedMode: GroupProps["mode"] = mode;
+
+  if (!mode) {
+    computedMode =
+      sizeX === SizeType.COMPACT || isInsideModal ? "plain" : "card";
+  }
+
+  return (
+    <section
+      {...restProps}
+      ref={getRootRef}
+      vkuiClass={classNames(
+        getClassName("Group", platform),
+        `Group--sizeX-${sizeX}`,
+        `Group--${computedMode}`
+      )}
+    >
+      <div vkuiClass="Group__inner">
+        {header}
+        {children}
+        {hasReactNode(description) && (
+          <Caption vkuiClass="Group__description">{description}</Caption>
+        )}
+      </div>
+
+      {separator !== "hide" && (
+        <Separator
+          vkuiClass={classNames("Group__separator", {
+            "Group__separator--force": separator === "show",
+          })}
+          expanded={computedMode === "card"}
+        />
+      )}
+    </section>
+  );
+};
+
+Group.defaultProps = {
+  separator: "auto",
+};
+
+// eslint-disable-next-line import/no-default-export
+export default withAdaptivity(Group, { sizeX: true });

package/src/components/Group/Readme.md

@@ -0,0 +1,156 @@
+Группа – базовый компонент для группировки контента по смыслу.
+
+```jsx { "props": { "layout": false, "adaptivity": true } }
+const MODAL_NAME = "modal";
+
+class App extends React.Component {
+  constructor() {
+    this.state = {
+      isModalOpened: 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 />}
+            >
+              Подтверждение входа
+            </SimpleCell>
+            <SimpleCell indicator="2" before={<Icon28DevicesOutline />}>
+              Привязанные устройства
+            </SimpleCell>
+          </Group>
+        </Group>
+
+        <Group header={<Header>Последняя активность</Header>}>
+          <SimpleCell
+            after={
+              <IconButton aria-label="Подробнее">
+                <Icon16MoreVertical />
+              </IconButton>
+            }
+            description="Санкт-Петербург, Россия"
+            before={<Avatar size={32} mode="app" />}
+          >
+            VK · Приложение для iPhone
+          </SimpleCell>
+          <SimpleCell
+            after={
+              <IconButton aria-label="Подробнее">
+                <Icon16MoreVertical />
+              </IconButton>
+            }
+            description="Санкт-Петербург, Россия"
+            before={<Avatar size={32} mode="app" />}
+          >
+            VK · Браузер Chrome для macOS
+          </SimpleCell>
+          <CellButton>Показать историю активности</CellButton>
+          <CellButton mode="danger">Завершить все остальные сеансы</CellButton>
+        </Group>
+
+        <Group
+          header={<Header>Адреса</Header>}
+          description="Для использования в мини-приложениях, Delivery Cub, VK Taxi и других сервисах ВКонтакте. Эти адреса видны только Вам."
+        >
+          <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>
+          }
+        >
+          {this.renderGroup()}
+        </ModalPage>
+      </ModalRoot>
+    );
+
+    return (
+      <SplitLayout modal={modal}>
+        <SplitCol>
+          <View activePanel="group">
+            <Panel id="group">
+              <PanelHeader>Group</PanelHeader>
+
+              {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);
+
+<AppWithPlatform />;
+```