@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/HoverPopper/HoverPopper.tsx

@@ -0,0 +1,102 @@
+import * as React from "react";
+import { Popper, PopperCommonProps } from "../Popper/Popper";
+import { useEventListener } from "../../hooks/useEventListener";
+import { useTimeout } from "../../hooks/useTimeout";
+import { usePatchChildrenRef } from "../../hooks/usePatchChildrenRef";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+
+export interface HoverPopperProps extends PopperCommonProps {
+  /**
+   * Содержимое тултипа
+   */
+  content?: React.ReactNode;
+  /**
+   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства
+   */
+  shown?: boolean;
+  /**
+   * Вызывается при каждом изменении видимости тултипа
+   */
+  onShownChange?: (shown: boolean) => void;
+  /**
+   * Количество миллисекунд, после которых произойдет показ дропдауна
+   */
+  showDelay?: number;
+  /**
+   * Количество миллисекунд, после которых произойдет скрытие дропдауна
+   */
+  hideDelay?: number;
+  /**
+   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента
+   */
+  children?: React.ReactElement;
+}
+
+export const HoverPopper: React.FC<HoverPopperProps> = ({
+  getRef,
+  content,
+  children,
+  onShownChange,
+  shown: _shown,
+  showDelay = 150,
+  hideDelay = 150,
+  ...restProps
+}: HoverPopperProps) => {
+  const [computedShown, setComputedShown] = React.useState(_shown || false);
+
+  const shown = typeof _shown === "boolean" ? _shown : computedShown;
+
+  const setShown = (value: boolean) => {
+    if (typeof _shown !== "boolean") {
+      setComputedShown(value);
+    }
+    typeof onShownChange === "function" && onShownChange(value);
+  };
+
+  const showTimeout = useTimeout(() => {
+    setShown(true);
+  }, showDelay);
+
+  const hideTimeout = useTimeout(() => {
+    setShown(false);
+  }, hideDelay);
+
+  const [childRef, child] = usePatchChildrenRef(children);
+
+  const onTargetEnter = () => {
+    hideTimeout.clear();
+    showTimeout.set();
+  };
+
+  const onTargetLeave = () => {
+    showTimeout.clear();
+    hideTimeout.set();
+  };
+
+  const targetEnterListener = useEventListener("pointerenter", onTargetEnter);
+  const targetLeaveListener = useEventListener("pointerleave", onTargetLeave);
+
+  useIsomorphicLayoutEffect(() => {
+    if (childRef.current) {
+      targetEnterListener.add(childRef.current);
+      targetLeaveListener.add(childRef.current);
+    }
+  }, []);
+
+  return (
+    <React.Fragment>
+      {child}
+      {shown && (
+        <Popper
+          {...restProps}
+          onMouseOver={hideTimeout.clear}
+          onMouseOut={onTargetLeave}
+          getRef={getRef}
+          targetRef={childRef}
+        >
+          {content}
+        </Popper>
+      )}
+    </React.Fragment>
+  );
+};

package/src/components/IconButton/IconButton.css

@@ -0,0 +1,93 @@
+.IconButton {
+  appearance: none;
+  background: none;
+  border: none;
+  box-shadow: none;
+  display: block;
+  color: currentColor;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  height: 48px;
+  border-radius: 50%;
+}
+
+.IconButton .Icon--16 {
+  padding: 16px;
+}
+
+.IconButton .Icon--16.Icon--w-8 {
+  padding: 16px 14px;
+}
+
+.IconButton .Icon--24 {
+  padding: 12px;
+}
+
+.IconButton .Icon--28 {
+  padding: 10px;
+}
+
+.IconButton[disabled] {
+  opacity: 0.6;
+}
+
+.FormItem--removable .Removable__content > .IconButton,
+.FormLayoutGroup--removable .Removable__content > .IconButton,
+.FormField__after .IconButton {
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: inherit;
+}
+
+.FormField__after .IconButton .Icon.Icon.Icon {
+  padding: 0;
+}
+
+.Removable__action.IconButton {
+  color: var(--icon_secondary);
+}
+
+/*
+ * sizeY: COMPACT
+ */
+.IconButton--sizeY-compact {
+  height: 44px;
+}
+
+.FormField__after .IconButton--sizeY-compact {
+  width: 36px;
+  height: 36px;
+}
+
+.FormItem--removable .Removable__content > .IconButton--sizeY-compact,
+.FormLayoutGroup--removable .Removable__content > .IconButton--sizeY-compact {
+  height: 36px;
+}
+
+.IconButton--sizeY-compact .Icon--16,
+.IconButton--sizeY-compact .Icon--16.Icon--w-8 {
+  padding: 14px;
+}
+
+.IconButton--sizeY-compact .Icon--24 {
+  padding: 10px;
+}
+
+.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

@@ -0,0 +1,57 @@
+import * as React from "react";
+import Tappable, { TappableProps } from "../Tappable/Tappable";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { usePlatform } from "../../hooks/usePlatform";
+import { withAdaptivity } from "../../hoc/withAdaptivity";
+import { IOS } from "../../lib/platform";
+import { warnOnce } from "../../lib/warnOnce";
+import "./IconButton.css";
+
+export interface IconButtonProps extends TappableProps {
+  /**
+   * @deprecated будет удалено в 5.0.0. Используйте `children`
+   */
+  icon?: React.ReactNode;
+}
+
+const warn = warnOnce("IconButton");
+const IconButton: React.FC<IconButtonProps> = ({
+  icon,
+  sizeY,
+  children,
+  Component,
+  ...restProps
+}: IconButtonProps) => {
+  const platform = usePlatform();
+
+  if (icon && process.env.NODE_ENV === "development") {
+    warn(
+      "Свойство icon устарело и будет удалено в 5.0.0. Используйте children"
+    );
+  }
+
+  return (
+    <Tappable
+      {...restProps}
+      Component={restProps.href ? "a" : Component}
+      activeEffectDelay={200}
+      activeMode={platform === IOS ? "opacity" : "IconButton--active"}
+      vkuiClass={classNames(
+        getClassName("IconButton", platform),
+        `IconButton--sizeY-${sizeY}`
+      )}
+    >
+      {icon || children}
+    </Tappable>
+  );
+};
+
+IconButton.defaultProps = {
+  Component: "button",
+};
+
+// eslint-disable-next-line import/no-default-export
+export default withAdaptivity(IconButton, {
+  sizeY: true,
+});

package/src/components/InfoRow/InfoRow.css

@@ -0,0 +1,14 @@
+.InfoRow {
+  user-select: text;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.InfoRow__header {
+  display: block;
+  margin-bottom: 2px;
+  color: var(--text_subhead);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/components/InfoRow/InfoRow.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import Subhead from "../Typography/Subhead/Subhead";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import Headline from "../Typography/Headline/Headline";
+import { hasReactNode } from "../../lib/utils";
+import "./InfoRow.css";
+
+export interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {
+  header: React.ReactNode;
+}
+
+const InfoRow: React.FunctionComponent<InfoRowProps> = ({
+  header,
+  children,
+  ...restProps
+}: InfoRowProps) => {
+  const platform = usePlatform();
+
+  return (
+    <Headline
+      {...restProps}
+      vkuiClass={getClassName("InfoRow", platform)}
+      weight="regular"
+    >
+      {hasReactNode(header) && (
+        <Subhead Component="span" vkuiClass="InfoRow__header">
+          {header}
+        </Subhead>
+      )}
+      {children}
+    </Headline>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default InfoRow;

package/src/components/InfoRow/Readme.md

@@ -0,0 +1,27 @@
+Информационный блок. Используется для отрисовки некликабельных блоков с неизменяемым контентом (то есть без инпутов, слайдеров и т.п.)
+Если таких блоков несколько и они объединены по смыслу, то рекомендуется оборачивать список в `Group` с указанием `header`.
+
+```jsx
+<View activePanel="info-row">
+  <Panel id="info-row">
+    <PanelHeader>InfoRow</PanelHeader>
+    <Group>
+      <SimpleCell>
+        <InfoRow header="Общий бюджет">3000 р.</InfoRow>
+      </SimpleCell>
+    </Group>
+    <Group>
+      <Header mode="secondary">Информация о пользователе</Header>
+      <SimpleCell multiline>
+        <InfoRow header="Дата рождения">30 января 1993</InfoRow>
+      </SimpleCell>
+      <SimpleCell>
+        <InfoRow header="Родной город">Ереван</InfoRow>
+      </SimpleCell>
+      <SimpleCell>
+        <InfoRow header="Место работы">Команда ВКонтакте</InfoRow>
+      </SimpleCell>
+    </Group>
+  </Panel>
+</View>
+```

package/src/components/InitialsAvatar/InitialsAvatar.css

@@ -0,0 +1,55 @@
+.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;
+}
+
+.InitialsAvatar--color-red {
+  background: #e52e40;
+  background: linear-gradient(135deg, #ff7583, #e52e40);
+}
+
+.InitialsAvatar--color-pink {
+  background: #e62e6b;
+  background: linear-gradient(135deg, #ff8880, #e62e6b);
+}
+
+.InitialsAvatar--color-orange {
+  background: #e66b2e;
+  background: linear-gradient(135deg, #ffbf80, #e66b2e);
+}
+
+.InitialsAvatar--color-yellow {
+  background: #e7a902;
+  background: linear-gradient(135deg, #ffd54f, #e7a902);
+}
+
+.InitialsAvatar--color-green {
+  background: #6cd97e;
+  background: linear-gradient(135deg, #6cd97e, #12b212);
+}
+
+.InitialsAvatar--color-l-blue {
+  background: #2bb4d6;
+  background: linear-gradient(135deg, #7df1fa, #2bb4d6);
+}
+
+.InitialsAvatar--color-blue {
+  background: #3f8ae0;
+  background: linear-gradient(135deg, #6cf, #3f8ae0);
+}
+
+.InitialsAvatar--color-violet {
+  background: #8f3fe0;
+  background: linear-gradient(135deg, #d3a6ff, #8f3fe0);
+}

package/src/components/InitialsAvatar/InitialsAvatar.tsx

@@ -0,0 +1,95 @@
+import * as React from "react";
+import { HasRootRef } from "../../types";
+import { classNames } from "../../lib/classNames";
+import Avatar, { AVATAR_DEFAULT_SIZE, AvatarProps } from "../Avatar/Avatar";
+import "./InitialsAvatar.css";
+
+/**
+ * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.
+ * @example user.id % 6 + 1
+ */
+export type InitialsAvatarNumberGradients = 1 | 2 | 3 | 4 | 5 | 6;
+export type InitialsAvatarTextGradients =
+  | "red"
+  | "pink"
+  | "orange"
+  | "yellow"
+  | "green"
+  | "l-blue"
+  | "blue"
+  | "violet";
+
+export interface InitialsAvatarProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRootRef<HTMLDivElement>,
+    Pick<AvatarProps, "size" | "shadow" | "badge"> {
+  children?: React.ReactNode;
+  /**
+   * `'red' | 'pink' | 'orange' | 'yellow' | 'green' | 'l-blue' | 'blue' | 'violet'`
+   *
+   * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:
+   *
+   * 1: 'red'
+   *
+   * 2: 'orange'
+   *
+   * 3: 'yellow'
+   *
+   * 4: 'green'
+   *
+   * 5: 'l-blue'
+   *
+   * 6: 'violet'
+   */
+  gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients;
+}
+
+const COLORS_NUMBER_TO_TEXT_MAP: Record<
+  InitialsAvatarNumberGradients,
+  InitialsAvatarTextGradients
+> = {
+  1: "red",
+  2: "orange",
+  3: "yellow",
+  4: "green",
+  5: "l-blue",
+  6: "violet",
+};
+
+function getInitialsFontSize(avatarSize: number) {
+  const calculatedFontSize = Math.ceil(avatarSize * 0.36);
+  const evenFix = calculatedFontSize % 2;
+  return calculatedFontSize + evenFix;
+}
+
+export const InitialsAvatar: React.FC<InitialsAvatarProps> = ({
+  size = AVATAR_DEFAULT_SIZE,
+  children,
+  gradientColor,
+  style,
+  ...restProps
+}: InitialsAvatarProps) => {
+  const gradientName =
+    typeof gradientColor === "string"
+      ? gradientColor
+      : gradientColor && COLORS_NUMBER_TO_TEXT_MAP[gradientColor];
+
+  return (
+    <Avatar
+      {...restProps}
+      style={{
+        ...style,
+        fontSize: getInitialsFontSize(size),
+      }}
+      size={size}
+      vkuiClass={classNames(
+        "InitialsAvatar",
+        `InitialsAvatar--color-${gradientName}`
+      )}
+    >
+      <span aria-hidden="true" vkuiClass="InitialsAvatar__text">
+        {children}
+      </span>
+    </Avatar>
+  );
+};

package/src/components/InitialsAvatar/Readme.md

@@ -0,0 +1,20 @@
+Компонент для отображения текстовых аватаров на фоне градиента (например, когда у пользователя нет установленного изображения).
+Для лучшего отображения, рекомендуется использовать длину текста <b>не более 2 символов</b>.
+
+ВКонтакте использует формулу `user_id % 6 + 1` (см. функцию [`calcInitialsAvatarColor`](#/Utils)) для определения градиента пользователя. Например, у пользователя c id 106 будет 5-й (`l-blue`) цвет градиента.
+
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ display: "flex", padding: 12, gap: 8, flexFlow: "row wrap" }}>
+  {[16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96].map((size) => {
+    const user = getRandomUser();
+    return (
+      <InitialsAvatar
+        size={size}
+        gradientColor={calcInitialsAvatarColor(user.id)}
+      >
+        {user.initials}
+      </InitialsAvatar>
+    );
+  })}
+</div>
+```

package/src/components/Input/Input.css

@@ -0,0 +1,52 @@
+.Input {
+  position: relative;
+  line-height: 20px;
+  font-size: 16px;
+}
+
+.Input--center .Input__el {
+  text-align: center;
+}
+
+.Input--right .Input__el {
+  text-align: right;
+}
+
+.Input__el {
+  margin: 0;
+  width: 100%;
+  display: block;
+  box-sizing: border-box;
+  box-shadow: none;
+  border: none;
+  appearance: none;
+  text-overflow: ellipsis;
+  height: 42px;
+  line-height: 20px;
+  font-size: 16px;
+  color: var(--text_primary);
+  padding: 11px;
+  position: relative;
+  z-index: 2;
+  background: transparent;
+}
+
+.Input--sizeY-compact .Input__el {
+  height: 34px;
+  padding-top: 9px;
+  padding-bottom: 9px;
+  line-height: 20px;
+  font-size: 15px;
+}
+
+.Input__el:disabled {
+  opacity: 0.4;
+}
+
+.Input__el::placeholder {
+  color: var(--field_text_placeholder);
+}
+
+.Input__el:disabled::placeholder {
+  color: var(--text_secondary);
+}

package/src/components/Input/Input.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { FormField, FormFieldProps } from "../FormField/FormField";
+import { HasAlign, HasRef, HasRootRef } from "../../types";
+import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
+import { usePlatform } from "../../hooks/usePlatform";
+import "./Input.css";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    HasRef<HTMLInputElement>,
+    HasRootRef<HTMLDivElement>,
+    HasAlign,
+    AdaptivityProps,
+    FormFieldProps {}
+
+const Input: React.FunctionComponent<InputProps> = ({
+  align,
+  getRef,
+  className,
+  getRootRef,
+  sizeY,
+  style,
+  after,
+  ...restProps
+}: InputProps) => {
+  const platform = usePlatform();
+  return (
+    <FormField
+      vkuiClass={classNames(
+        getClassName("Input", platform),
+        { [`Input--${align}`]: !!align },
+        `Input--sizeY-${sizeY}`
+      )}
+      style={style}
+      className={className}
+      getRootRef={getRootRef}
+      after={after}
+      disabled={restProps.disabled}
+    >
+      <input {...restProps} vkuiClass="Input__el" ref={getRef} />
+    </FormField>
+  );
+};
+
+Input.defaultProps = {
+  type: "text",
+};
+
+// eslint-disable-next-line import/no-default-export
+export default withAdaptivity(Input, {
+  sizeY: true,
+});

package/src/components/Input/Readme.md

@@ -0,0 +1,46 @@
+Надстройка над `<input type="text" />`. Компонент принимает все валидные для этого элемента свойства.
+
+```jsx
+const textInput = React.createRef();
+const clear = () => (textInput.current.value = "");
+
+<View activePanel="input">
+  <Panel id="input">
+    <PanelHeader>Input</PanelHeader>
+    <Group>
+      <FormItem top="Фамилия">
+        <Input type="text" defaultValue="Петров" />
+      </FormItem>
+      <FormItem>
+        <Input type="text" defaultValue="Иванов" align="center" />
+      </FormItem>
+      <FormItem>
+        <Input type="text" defaultValue="Сидоров" align="right" />
+      </FormItem>
+      <FormItem top="С иконкой">
+        <Input
+          type="text"
+          defaultValue="Смирнов"
+          after={<Icon20User aria-hidden="true" />}
+        />
+      </FormItem>
+      <FormItem top="С IconButton">
+        <Input
+          getRef={textInput}
+          type="text"
+          defaultValue="Кузнецов"
+          after={
+            <IconButton
+              hoverMode="opacity"
+              aria-label="Очистить поле"
+              onClick={clear}
+            >
+              <Icon16Clear />
+            </IconButton>
+          }
+        />
+      </FormItem>
+    </Group>
+  </Panel>
+</View>;
+```

package/src/components/InputLike/InputLike.css

@@ -0,0 +1,25 @@
+.InputLike__mask {
+  position: relative;
+}
+
+.InputLike__mask::after {
+  content: "";
+  position: absolute;
+  width: calc(100% - 0.1em);
+  height: 1px;
+  bottom: 0;
+  left: 0;
+  border-bottom: solid 1px var(--vkui--color_text_secondary);
+}
+
+.InputLike__mask:last-child {
+  margin-right: 1px;
+}
+
+.InputLike__last_character {
+  letter-spacing: 1px;
+}
+
+.InputLike--full + .InputLikeDivider {
+  color: var(--vkui--color_text_primary);
+}