@vkontakte/vkui 4.27.0 → 4.28.0

package/src/components/Gradient/Gradient.css

@@ -1,83 +0,0 @@
-.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

@@ -1,29 +0,0 @@
-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

@@ -1,55 +0,0 @@
-```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

@@ -1,37 +0,0 @@
-.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

@@ -1,53 +0,0 @@
-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

@@ -1,24 +0,0 @@
-Отображение нескольких аватаров в сетке от 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

@@ -1,86 +0,0 @@
-.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

@@ -1,96 +0,0 @@
-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" weight="regular" level="1">
-            {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

@@ -1,156 +0,0 @@
-Группа – базовый компонент для группировки контента по смыслу.
-
-```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 />;
-```