@vkontakte/vkui 4.28.0 → 4.28.1

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

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

@@ -0,0 +1,54 @@
+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 {
+  /**
+   * Задаёт начертание шрифта отличное от стандартного.
+   *
+   * > ⚠️ Начертания `"semibold"`, `medium` и `"regular"` устарели и будут удалены в 5.0.0. Используйте значения `"1"`, `"2"` и `"3"`.
+   */
+  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

@@ -0,0 +1,22 @@
+Упрощения в 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

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

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

@@ -0,0 +1,31 @@
+Семейство заголовков.
+
+```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

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

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { HasComponent } from "../../../types";
+import { classNames } from "../../../lib/classNames";
+import { warnOnce } from "../../../lib/warnOnce";
+import { resolveWeight } from "../../../helpers/typography";
+import "./Title.css";
+
+export interface TitleProps
+  extends React.AllHTMLAttributes<HTMLElement>,
+    HasComponent {
+  /**
+   * Задаёт начертание шрифта отличное от стандартного.
+   *
+   * > ⚠️ Начертания `"heavy"`, `"bold"`, `"semibold"`, `medium` и `"regular"` устарели и будут удалены в 5.0.0. Используйте значения `"1"`, `"2"` и `"3"`.
+   */
+  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-${resolveWeight(weight)}`]: !!weight,
+      })}
+    >
+      {children}
+    </Component>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default Title;

package/src/components/UsersStack/Readme.md

@@ -0,0 +1,94 @@
+Используется для отображения аватарок пользователей с каким-то сопроводительным текстом.
+
+У компонента есть вертикальный режим – когда текст располагается под аватарками. В таком режиме рекомендуется использовать размер `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

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

@@ -0,0 +1,102 @@
+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="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

@@ -0,0 +1,46 @@
+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);
+}