@vkontakte/vkui 4.27.2 → 4.28.0

package/src/components/HoverPopper/HoverPopper.tsx

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

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

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

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

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

@@ -1,27 +0,0 @@
-Информационный блок. Используется для отрисовки некликабельных блоков с неизменяемым контентом (то есть без инпутов, слайдеров и т.п.)
-Если таких блоков несколько и они объединены по смыслу, то рекомендуется оборачивать список в `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

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

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

@@ -1,20 +0,0 @@
-Компонент для отображения текстовых аватаров на фоне градиента (например, когда у пользователя нет установленного изображения).
-Для лучшего отображения, рекомендуется использовать длину текста <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

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

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

@@ -1,46 +0,0 @@
-Надстройка над `<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/Link/Link.css

@@ -1,18 +0,0 @@
-.Link {
-  color: var(--accent);
-  text-decoration: none;
-  border: 0;
-  background: none;
-  margin: 0;
-  padding: 0;
-  cursor: pointer;
-  font-size: inherit;
-  display: inline;
-  border-radius: 0;
-}
-
-.Link .Icon {
-  margin-left: 4px;
-  display: inline-block;
-  vertical-align: middle;
-}