@vkontakte/vkui 4.27.2 → 4.28.0

package/src/components/Typography/Subhead/Subhead.css

@@ -1,43 +0,0 @@
-.Subhead {
-  margin: 0;
-  font-size: var(--vkui--font_subhead--font_size--regular);
-  line-height: var(--vkui--font_subhead--line_height--regular);
-  font-weight: var(--vkui--font_subhead--font_weight--regular);
-}
-
-.Subhead--sizeY-compact {
-  font-size: var(--vkui--font_subhead--font_size--compact);
-  line-height: var(--vkui--font_subhead--line_height--compact);
-}
-
-/* TODO Удалить перед релизом 5.0.0 */
-.Subhead--w-regular {
-  font-weight: 400;
-}
-
-/* TODO Удалить перед релизом 5.0.0 */
-.Subhead--w-medium {
-  font-weight: 500;
-}
-
-/* TODO Удалить перед релизом 5.0.0 */
-.Subhead--w-semibold {
-  font-weight: 600;
-}
-
-/* TODO Удалить перед релизом 5.0.0 */
-.Subhead--w-bold {
-  font-weight: 700;
-}
-
-.Subhead--w-1 {
-  font-weight: var(--vkui--font_weight_accent1);
-}
-
-.Subhead--w-2 {
-  font-weight: var(--vkui--font_weight_accent2);
-}
-
-.Subhead--w-3 {
-  font-weight: var(--vkui--font_weight_accent3);
-}

package/src/components/Typography/Subhead/Subhead.tsx

@@ -1,52 +0,0 @@
-import * as React from "react";
-import { HasComponent } from "../../../types";
-import { classNames } from "../../../lib/classNames";
-import { warnOnce } from "../../../lib/warnOnce";
-import { useAdaptivity } from "../../../hooks/useAdaptivity";
-import "./Subhead.css";
-
-export interface SubheadProps
-  extends React.AllHTMLAttributes<HTMLElement>,
-    HasComponent {
-  /**
-   * Начертания "regular", "medium", "semibold" и "bold" устарели и будут удалены в 5.0.0.
-   */
-  weight?: "regular" | "medium" | "semibold" | "bold" | "1" | "2" | "3";
-}
-
-const warn = warnOnce("Subhead");
-
-const Subhead: React.FC<SubheadProps> = ({
-  children,
-  weight,
-  Component = "h5",
-  ...restProps
-}: SubheadProps) => {
-  const { sizeY } = useAdaptivity();
-
-  if (process.env.NODE_ENV === "development") {
-    if (
-      weight &&
-      ["heavy", "bold", "semibold", "medium", "regular"].includes(weight)
-    )
-      warn(
-        `Начертание weight="${weight}" устарело и будет удалено в 5.0.0. Используйте значения "1", "2" и "3"`
-      );
-  }
-
-  return (
-    <Component
-      {...restProps}
-      vkuiClass={classNames(
-        "Subhead",
-        `Subhead--sizeY-${sizeY}`,
-        `Subhead--w-${weight}`
-      )}
-    >
-      {children}
-    </Component>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default Subhead;

package/src/components/Typography/Text/Readme.md

@@ -1,22 +0,0 @@
-Упрощения в Android-версии (происходят автоматически):
-
-- `semibold` превращается в `medium`
-
-```jsx
-<View activePanel="test">
-  <Panel id="test">
-    <PanelHeader>Text</PanelHeader>
-    <Group>
-      <Div>
-        <Text weight="regular" style={{ marginBottom: 16 }}>
-          Text regular
-        </Text>
-        <Text weight="medium" style={{ marginBottom: 16 }}>
-          Text medium
-        </Text>
-        <Text weight="semibold">Text semibold</Text>
-      </Div>
-    </Group>
-  </Panel>
-</View>
-```

package/src/components/Typography/Text/Text.css

@@ -1,25 +0,0 @@
-.Text {
-  display: block;
-  margin: 0;
-  font-size: 15px;
-  line-height: 20px;
-}
-
-.Text--w-regular {
-  font-weight: 400;
-}
-
-.Text--w-medium {
-  font-weight: 500;
-}
-
-.Text--w-semibold {
-  font-weight: 600;
-}
-
-/**
- * ANDROID
- */
-.Text--android.Text--w-semibold {
-  font-weight: 500;
-}

package/src/components/Typography/Text/Text.tsx

@@ -1,49 +0,0 @@
-import * as React from "react";
-import { usePlatform } from "../../../hooks/usePlatform";
-import { classNames } from "../../../lib/classNames";
-import { getClassName } from "../../../helpers/getClassName";
-import { HasComponent, HasRootRef } from "../../../types";
-import { warnOnce } from "../../../lib/warnOnce";
-import "./Text.css";
-
-export interface TextProps
-  extends React.AllHTMLAttributes<HTMLElement>,
-    HasRootRef<HTMLElement>,
-    HasComponent {
-  weight: "regular" | "medium" | "semibold";
-}
-
-const warn = warnOnce("Text");
-const Text: React.FC<TextProps> = ({
-  children,
-  weight = "regular",
-  Component = "span",
-  getRootRef,
-  ...restProps
-}: TextProps) => {
-  const platform = usePlatform();
-
-  if (
-    process.env.NODE_ENV === "development" &&
-    typeof Component !== "string" &&
-    getRootRef
-  ) {
-    warn("getRootRef can only be used with DOM components");
-  }
-
-  return (
-    <Component
-      {...restProps}
-      ref={getRootRef}
-      vkuiClass={classNames(
-        getClassName("Text", platform),
-        `Text--w-${weight}`
-      )}
-    >
-      {children}
-    </Component>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default Text;

package/src/components/Typography/Title/Readme.md

@@ -1,31 +0,0 @@
-Семейство заголовков.
-
-```jsx { "props": { "layout": false, "iframe": false } }
-<div style={{ padding: 20 }}>
-  <Title level="1" style={{ marginBottom: 16 }}>
-    Title 1
-  </Title>
-  <Title level="2" style={{ marginBottom: 16 }}>
-    Title 2
-  </Title>
-  <Title level="3">Title 3</Title>
-</div>
-```
-
-## Кастомизация
-
-Есть возможность переопределить жирность.
-
-```jsx { "props": { "layout": false, "iframe": false } }
-<div style={{ padding: 20 }}>
-  <Title level="3" weight="1" style={{ marginBottom: 16 }}>
-    Title 3 weight 1
-  </Title>
-  <Title level="3" weight="2" style={{ marginBottom: 16 }}>
-    Title 3 weight 2
-  </Title>
-  <Title level="3" weight="3">
-    Title 3 weight 3
-  </Title>
-</div>
-```

package/src/components/Typography/Title/Title.css

@@ -1,59 +0,0 @@
-.Title {
-  display: block;
-  margin: 0;
-}
-
-.Title--l-1 {
-  font-size: var(--vkui--font_title1--font_size--regular);
-  line-height: var(--vkui--font_title1--line_height--regular);
-  font-weight: var(--vkui--font_title1--font_weight--regular);
-}
-
-.Title--l-2 {
-  font-size: var(--vkui--font_title2--font_size--regular);
-  line-height: var(--vkui--font_title2--line_height--regular);
-  font-weight: var(--vkui--font_title2--font_weight--regular);
-}
-
-.Title--l-3 {
-  font-size: var(--vkui--font_title3--font_size--regular);
-  line-height: var(--vkui--font_title3--line_height--regular);
-  font-weight: var(--vkui--font_title3--font_weight--regular);
-}
-
-/* TODO удалить перед релизом 5.0.0 */
-.Title--w-regular {
-  font-weight: 400;
-}
-
-/* TODO удалить перед релизом 5.0.0 */
-.Title--w-medium {
-  font-weight: 500;
-}
-
-/* TODO удалить перед релизом 5.0.0 */
-.Title--w-semibold {
-  font-weight: 600;
-}
-
-/* TODO удалить перед релизом 5.0.0 */
-.Title--w-bold {
-  font-weight: 700;
-}
-
-/* TODO удалить перед релизом 5.0.0 */
-.Title--w-heavy {
-  font-weight: 800;
-}
-
-.Title--w-1 {
-  font-weight: var(--vkui--font_weight_accent1);
-}
-
-.Title--w-2 {
-  font-weight: var(--vkui--font_weight_accent2);
-}
-
-.Title--w-3 {
-  font-weight: var(--vkui--font_weight_accent3);
-}

package/src/components/Typography/Title/Title.tsx

@@ -1,61 +0,0 @@
-import * as React from "react";
-import { HasComponent } from "../../../types";
-import { classNames } from "../../../lib/classNames";
-import { warnOnce } from "../../../lib/warnOnce";
-import "./Title.css";
-
-export interface TitleProps
-  extends React.AllHTMLAttributes<HTMLElement>,
-    HasComponent {
-  /**
-   * Начертания "heavy", "bold", "semibold", "medium" и "regular" устарели и будут удалены в 5.0.0.
-   */
-  weight?:
-    | "heavy"
-    | "bold"
-    | "semibold"
-    | "medium"
-    | "regular"
-    | "1"
-    | "2"
-    | "3";
-  level: "1" | "2" | "3";
-}
-
-const warn = warnOnce("Title");
-
-const Title: React.FC<TitleProps> = ({
-  children,
-  weight,
-  level = "1",
-  Component,
-  ...restProps
-}: TitleProps) => {
-  if (!Component) {
-    Component = ("h" + level) as React.ElementType;
-  }
-
-  if (process.env.NODE_ENV === "development") {
-    if (
-      weight &&
-      ["heavy", "bold", "semibold", "medium", "regular"].includes(weight)
-    )
-      warn(
-        `Начертание weight="${weight}" устарело и будет удалено в 5.0.0. Используйте значения "1", "2" и "3"`
-      );
-  }
-
-  return (
-    <Component
-      {...restProps}
-      vkuiClass={classNames("Title", `Title--l-${level}`, {
-        [`Title--w-${weight}`]: !!weight,
-      })}
-    >
-      {children}
-    </Component>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default Title;

package/src/components/UsersStack/Readme.md

@@ -1,94 +0,0 @@
-Используется для отображения аватарок пользователей с каким-то сопроводительным текстом.
-
-У компонента есть вертикальный режим – когда текст располагается под аватарками. В таком режиме рекомендуется использовать размер `m`.
-
-```jsx
-<View activePanel="usersstack">
-  <Panel id="usersstack">
-    <PanelHeader>Аватарки пользователей</PanelHeader>
-
-    <Group>
-      <Div>
-        <UsersStack photos={[getAvatarUrl("user_lihachyov")]}>
-          Понравилось Муртолу Левзачеву
-        </UsersStack>
-      </Div>
-    </Group>
-
-    <Group>
-      <Div>
-        <UsersStack
-          photos={[getAvatarUrl("user_manzuk"), getAvatarUrl("user_ji")]}
-          size="m"
-        >
-          Настя и Jean пойдут на это мероприятие
-        </UsersStack>
-      </Div>
-    </Group>
-
-    <Group>
-      <Div>
-        <UsersStack
-          photos={[
-            getAvatarUrl("user_ox"),
-            getAvatarUrl("user_vitalyavolyn"),
-            getAvatarUrl("user_eee"),
-          ]}
-          size="xs"
-        >
-          Иван и ещё 2 ваших друга подписаны
-        </UsersStack>
-      </Div>
-    </Group>
-
-    <Group header={<Header mode="secondary">Вертикальный режим</Header>}>
-      <Div>
-        <UsersStack
-          photos={[
-            getAvatarUrl("user_mm"),
-            getAvatarUrl("user_ilyagrshn"),
-            getAvatarUrl("user_lihachyov"),
-            getAvatarUrl("user_wayshev"),
-            getAvatarUrl("user_arthurstam"),
-            getAvatarUrl("user_xyz"),
-          ]}
-          size="m"
-          count={3}
-          layout="vertical"
-        >
-          Алексей, Илья, Михаил
-          <br />и ещё 3 человека
-        </UsersStack>
-      </Div>
-    </Group>
-
-    <Group>
-      <Div>
-        <div
-          style={{
-            backgroundImage:
-              "linear-gradient(135deg, #f24973 0%, #3948e6 100%)",
-            height: 200,
-            display: "flex",
-            alignItems: "flex-end",
-            justifyContent: "center",
-            paddingBottom: "6px",
-            borderRadius: 12,
-          }}
-        >
-          <UsersStack
-            photos={[
-              getAvatarUrl("user_xyz"),
-              getAvatarUrl("user_va"),
-              getAvatarUrl("user_tc"),
-            ]}
-            style={{ color: "#fff", padding: "8px 16px" }}
-          >
-            Проголосовали 2 176 человек
-          </UsersStack>
-        </div>
-      </Div>
-    </Group>
-  </Panel>
-</View>
-```

package/src/components/UsersStack/UsersStack.css

@@ -1,99 +0,0 @@
-.UsersStack {
-  display: flex;
-  align-items: center;
-  color: var(--text_secondary);
-}
-
-.UsersStack__photos {
-  display: flex;
-}
-
-.UsersStack__photo {
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  border-radius: 50%;
-  background-color: var(--placeholder_icon_background);
-}
-
-.UsersStack__photo--others {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  background: var(--content_placeholder_icon);
-}
-
-.UsersStack--size-xs .UsersStack__photo {
-  width: 16px;
-  height: 16px;
-}
-
-.UsersStack--size-s .UsersStack__photo {
-  width: 24px;
-  height: 24px;
-}
-
-.UsersStack--size-m .UsersStack__photo {
-  width: 32px;
-  height: 32px;
-}
-
-.UsersStack__photo + .UsersStack__photo {
-  margin-left: -2px;
-}
-
-.UsersStack--size-xs .UsersStack__photo + .UsersStack__photo {
-  margin-left: -1px;
-  clip-path: url(#users_stack_mask_16_left);
-}
-
-.UsersStack--size-s .UsersStack__photo + .UsersStack__photo {
-  clip-path: url(#users_stack_mask_24_left);
-}
-
-.UsersStack--size-m .UsersStack__photo + .UsersStack__photo {
-  clip-path: url(#users_stack_mask_32_left);
-}
-
-.UsersStack--size-m.UsersStack--others .UsersStack__photo {
-  clip-path: url(#users_stack_mask_32_right);
-}
-
-.UsersStack--size-m.UsersStack--others .UsersStack__photo:last-child {
-  clip-path: none;
-}
-
-.UsersStack__text {
-  min-width: 0;
-  flex: 1;
-  margin: 0 0 0 8px;
-}
-
-/* Vertical layout */
-
-.UsersStack--l-vertical {
-  flex-direction: column;
-  justify-content: center;
-}
-
-.UsersStack--l-vertical .UsersStack__text {
-  margin: 8px 0 0;
-  text-align: center;
-}
-
-/**
- * CMP:
- * ModalCardBase
- */
-.ModalCardBase .UsersStack {
-  margin-top: 20px;
-}
-
-/**
- * CMP:
- * RichCell
- */
-.RichCell__bottom .UsersStack {
-  padding: 5px 0 0;
-}

package/src/components/UsersStack/UsersStack.tsx

@@ -1,103 +0,0 @@
-import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
-import { hasReactNode } from "../../lib/utils";
-import { classNames } from "../../lib/classNames";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
-import Caption from "../Typography/Caption/Caption";
-import Subhead from "../Typography/Subhead/Subhead";
-import { createMasks } from "./masks";
-import { useDOM } from "../../lib/dom";
-import "./UsersStack.css";
-
-export interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Массив ссылок на фотографии
-   */
-  photos?: string[];
-  /**
-   * Размер аватарок
-   */
-  size?: "xs" | "s" | "m";
-  /**
-   * Вертикальный режим рекомендуется использовать с размером `m`
-   */
-  layout?: "vertical" | "horizontal";
-  /**
-   * Количество аватарок, которые будут показаны.
-   * Если в массиве `photos` больше элементов и используется размер `m`, то будет показано количество остальных элементов
-   */
-  visibleCount?: number;
-}
-
-const UsersStack: React.FC<UsersStackProps> = (props: UsersStackProps) => {
-  const platform = usePlatform();
-  const {
-    photos = [],
-    visibleCount = 0,
-    size,
-    layout,
-    children,
-    ...restProps
-  } = props;
-  const { document } = useDOM();
-
-  useIsomorphicLayoutEffect(() => {
-    createMasks(document);
-  }, [document]);
-
-  const othersCount = Math.max(0, photos.length - visibleCount);
-  const canShowOthers = othersCount > 0 && size === "m";
-
-  const photosShown = photos.slice(0, visibleCount);
-
-  return (
-    <div
-      {...restProps}
-      vkuiClass={classNames(
-        getClassName("UsersStack", platform),
-        `UsersStack--size-${size}`,
-        `UsersStack--l-${layout}`,
-        {
-          "UsersStack--others": canShowOthers,
-        }
-      )}
-    >
-      <div vkuiClass="UsersStack__photos" role="presentation">
-        {photosShown.map((photo, i) => (
-          <div
-            key={i}
-            vkuiClass="UsersStack__photo"
-            style={{ backgroundImage: `url(${photo})` }}
-          />
-        ))}
-
-        {canShowOthers && (
-          <Caption
-            weight="medium"
-            level="1"
-            vkuiClass="UsersStack__photo UsersStack__photo--others"
-            aria-hidden="true"
-          >
-            <span>+{othersCount}</span>
-          </Caption>
-        )}
-      </div>
-      {hasReactNode(children) && (
-        <Subhead Component="span" vkuiClass="UsersStack__text">
-          {children}
-        </Subhead>
-      )}
-    </div>
-  );
-};
-
-UsersStack.defaultProps = {
-  photos: [],
-  size: "s",
-  visibleCount: 3,
-  layout: "horizontal",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default React.memo(UsersStack);

package/src/components/UsersStack/masks.tsx

@@ -1,46 +0,0 @@
-import { canUseDOM } from "../../lib/dom";
-
-const masksCreated: Document[] = [];
-
-export function createMasks(document?: Document): void {
-  if (!canUseDOM || !document || masksCreated.includes(document)) {
-    return;
-  }
-
-  // eslint-disable-next-line no-restricted-globals
-  const svgElement = document.createElementNS(
-    "http://www.w3.org/2000/svg",
-    "svg"
-  );
-  svgElement.setAttributeNS(null, "id", "__SVG_MASKS_NODE__");
-  svgElement.setAttributeNS(null, "width", "0");
-  svgElement.setAttributeNS(null, "height", "0");
-  svgElement.style.position = "absolute";
-  svgElement.style.width = "0px";
-  svgElement.style.height = "0px";
-
-  svgElement.innerHTML = `<defs>
-  <clipPath id="users_stack_mask_16_left">
-    <path transform="translate(1.5 0)" d="M1.20772 8C1.20772 6.32671 0.768742 4.75626 0 3.39821C1.44342 1.34278 3.8277 0 6.52463 0C10.9293 0 14.5 3.58172 14.5 8C14.5 12.4183 10.9293 16 6.52463 16C3.8277 16 1.44342 14.6572 0 12.6018C0.768742 11.2437 1.20772 9.6733 1.20772 8Z"></path>
-  </clipPath>
-
-  <clipPath id="users_stack_mask_24_left">
-    <path d="M3.9971785,12 C3.9971785,9.49005736 3.33667467,7.13438366 2.18,5.09731189 C4.35181237,2.01417617 7.93927741,0 11.9971785,0 C18.6245955,0 23.9971785,5.372583 23.9971785,12 C23.9971785,18.627417 18.6245955,24 11.9971785,24 C7.93927741,24 4.35181237,21.9858238 2.18,18.9026881 C3.33667467,16.8656163 3.9971785,14.5099426 3.9971785,12 Z"></path>
-  </clipPath>
-
-  <clipPath id="users_stack_mask_24_right">
-    <path d="M21.8171785,5.09731189 C20.6605038,7.13438366 20,9.49005736 20,12 C20,14.5099426 20.6605038,16.8656163 21.8171785,18.9026881 C19.6453661,21.9858238 16.0579011,24 12,24 C5.372583,24 3.90798505e-14,18.627417 3.90798505e-14,12 C3.90798505e-14,5.372583 5.372583,0 12,0 C16.0579011,0 19.6453661,2.01417617 21.8171785,5.09731189 Z"></path>
-  </clipPath>
-
-  <clipPath id="users_stack_mask_32_left">
-    <path d="M2.13430019,23.9892466 C3.32858917,21.5820026 4,18.8694095 4,16 C4,13.1305905 3.32858917,10.4179974 2.13430019,8.0107534 C4.89924175,3.22241289 10.0733034,-2.30926389e-14 16,-2.30926389e-14 C24.836556,-2.30926389e-14 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 C10.0733034,32 4.89924175,28.7775871 2.13430019,23.9892466 L2.13430019,23.9892466 Z"></path>
-  </clipPath>
-
-  <clipPath id="users_stack_mask_32_right">
-    <path d="M29.8656998,8.0107534 C28.6714108,10.4179974 28,13.1305905 28,16 C28,18.8694095 28.6714108,21.5820026 29.8656998,23.9892466 C27.1007583,28.7775871 21.9266966,32 16,32 C7.163444,32 3.90798505e-14,24.836556 3.90798505e-14,16 C3.90798505e-14,7.163444 7.163444,0 16,0 C21.9266966,0 27.1007583,3.22241289 29.8656998,8.0107534 Z"></path>
-  </clipPath>
-</defs>`;
-
-  document.body.appendChild(svgElement);
-  masksCreated.push(document);
-}