@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/Removable/Removable.css

@@ -0,0 +1,125 @@
+.Removable__content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding-left: var(--formitem_padding);
+}
+
+.Removable__action {
+  position: relative;
+  flex-grow: 0;
+  flex-shrink: 0;
+  border: none;
+}
+
+.Removable--start .Removable__action {
+  align-self: flex-start;
+}
+
+.FormItem--removable.FormItem--withTop .Removable__action,
+.FormLayoutGroup--removable .FormItem--withTop ~ .Removable__action {
+  top: 28px;
+}
+
+.FormItem--sizeY-compact.FormItem--removable.FormItem--withTop
+  .Removable__action,
+.FormLayoutGroup--sizeY-compact.FormLayoutGroup--removable
+  .FormItem--withTop
+  ~ .Removable__action {
+  top: 26px;
+}
+
+/**
+ * iOS
+ */
+.Removable--ios {
+  overflow: hidden;
+}
+
+.Removable__remove {
+  position: absolute;
+  left: 100%;
+  top: 0;
+  height: 100%;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 45px;
+  color: var(--white);
+  background-color: var(--destructive);
+  border: none;
+  border-radius: 0;
+}
+
+.Removable__remove-in {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .Removable--ios .Removable__content {
+    transition: transform 0.6s var(--ios-easing);
+  }
+}
+
+.Removable__toggle {
+  display: block;
+  width: 44px;
+  height: 44px;
+  margin: 0 2px;
+  background: none;
+}
+
+.Removable__toggle-in {
+  position: relative;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.Removable__toggle-in::after {
+  content: "";
+  width: 22px;
+  height: 22px;
+  background-color: var(--destructive);
+  border-radius: 50%;
+}
+
+.Removable__toggle-in::before {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 12px;
+  height: 2px;
+  background-color: var(--white);
+}
+
+.Removable--ios .Removable__content {
+  padding-left: 0;
+  padding-right: var(--formitem_padding);
+}
+
+.FormLayoutGroup--removable .Removable__content {
+  flex-wrap: wrap;
+}
+
+.FormLayoutGroup--removable
+  .FormItem--ios.FormItem--withTop
+  ~ .Removable__offset {
+  order: -1;
+  display: block;
+  width: 100%;
+  height: 28px;
+}
+
+.FormLayoutGroup--removable.FormLayoutGroup--sizeY-compact
+  .FormItem--ios.FormItem--withTop
+  ~ .Removable__offset {
+  height: 26px;
+}

package/src/components/Removable/Removable.tsx

@@ -0,0 +1,176 @@
+import * as React from "react";
+import { HasRootRef } from "../../types";
+import { classNames } from "../../lib/classNames";
+import { getTitleFromChildren, noop } from "../../lib/utils";
+import { useExternRef } from "../../hooks/useExternRef";
+import { usePlatform } from "../../hooks/usePlatform";
+import { getClassName } from "../../helpers/getClassName";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useDOM } from "../../lib/dom";
+import { ANDROID, IOS, VKCOM } from "../../lib/platform";
+import { Icon24Cancel } from "@vkontakte/icons";
+import IconButton from "../IconButton/IconButton";
+import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
+import Tappable from "../Tappable/Tappable";
+import "./Removable.css";
+
+export interface RemovableProps {
+  /**
+   * iOS only. Текст в выезжающей кнопке для удаления ячейки.
+   */
+  removePlaceholder?: React.ReactNode;
+  /**
+   * Коллбэк срабатывает при клике на контрол удаления.
+   */
+  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;
+}
+
+interface RemovableIosOwnProps extends RemovableProps {
+  removePlaceholderString?: string;
+}
+
+const RemovableIos: React.FC<RemovableIosOwnProps> = ({
+  onRemove,
+  removePlaceholder,
+  removePlaceholderString,
+  children,
+}) => {
+  const { window } = useDOM();
+
+  const removeButtonRef = React.useRef<HTMLElement>(null);
+  const disabledRef = React.useRef(true);
+  const [removeOffset, updateRemoveOffset] = React.useState(0);
+
+  useGlobalEventListener(
+    window,
+    "click",
+    () => {
+      if (removeOffset > 0) {
+        updateRemoveOffset(0);
+      }
+    },
+    { capture: true }
+  );
+
+  const onRemoveTransitionEnd = () => {
+    if (removeOffset > 0) {
+      removeButtonRef?.current?.focus();
+    } else {
+      disabledRef.current = true;
+    }
+  };
+
+  const onRemoveActivateClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!removeButtonRef.current) {
+      return;
+    }
+    const { offsetWidth } = removeButtonRef.current;
+    disabledRef.current = false;
+    updateRemoveOffset(offsetWidth);
+  };
+
+  return (
+    <div
+      vkuiClass="Removable__content"
+      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}
+      onTransitionEnd={onRemoveTransitionEnd}
+    >
+      <IconButton
+        hasActive={false}
+        hasHover={false}
+        aria-label={removePlaceholderString}
+        vkuiClass="Removable__action Removable__toggle"
+        onClick={onRemoveActivateClick}
+        disabled={removeOffset > 0}
+      >
+        <i vkuiClass="Removable__toggle-in" role="presentation" />
+      </IconButton>
+      {children}
+
+      <span vkuiClass="Removable__offset" aria-hidden="true"></span>
+
+      <Tappable
+        Component="button"
+        hasActive={false}
+        hasHover={false}
+        disabled={disabledRef.current}
+        getRootRef={removeButtonRef}
+        vkuiClass="Removable__remove"
+        onClick={onRemove}
+      >
+        <span vkuiClass="Removable__remove-in">{removePlaceholder}</span>
+      </Tappable>
+    </div>
+  );
+};
+
+interface RemovableOwnProps
+  extends React.AllHTMLAttributes<HTMLElement>,
+    RemovableProps,
+    HasRootRef<HTMLDivElement> {
+  /**
+   * Расположение кнопки удаления.
+   */
+  align?: "start" | "center";
+}
+
+export const Removable: React.FC<RemovableOwnProps> = ({
+  getRootRef,
+  children,
+  onRemove = noop,
+  removePlaceholder = "Удалить",
+  align = "center",
+  ...restProps
+}: RemovableOwnProps) => {
+  const platform = usePlatform();
+  const { sizeY } = useAdaptivity();
+
+  const ref = useExternRef(getRootRef);
+
+  const onRemoveClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    onRemove(e);
+  };
+
+  const removePlaceholderString: string =
+    getTitleFromChildren(removePlaceholder);
+
+  return (
+    <div
+      {...restProps}
+      ref={ref}
+      vkuiClass={classNames(
+        getClassName("Removable", platform),
+        `Removable--${align}`,
+        `Removable--sizeY-${sizeY}`
+      )}
+    >
+      {(platform === ANDROID || platform === VKCOM) && (
+        <div vkuiClass="Removable__content">
+          {children}
+
+          <IconButton
+            activeMode="opacity"
+            hoverMode="opacity"
+            vkuiClass="Removable__action"
+            onClick={onRemoveClick}
+            aria-label={removePlaceholderString}
+          >
+            <Icon24Cancel role="presentation" />
+          </IconButton>
+        </div>
+      )}
+
+      {platform === IOS && (
+        <RemovableIos
+          onRemove={onRemoveClick}
+          removePlaceholder={removePlaceholder}
+          removePlaceholderString={removePlaceholderString}
+        >
+          {children}
+        </RemovableIos>
+      )}
+    </div>
+  );
+};

package/src/components/RichCell/Readme.md

@@ -0,0 +1,65 @@
+```jsx
+<View activePanel="list">
+  <Panel id="list">
+    <PanelHeader>RichCell</PanelHeader>
+    <Group>
+      <RichCell
+        disabled
+        multiline
+        before={<Avatar size={72} src={getAvatarUrl("user_ti")} />}
+        text="Держи за обед в EZO"
+        caption="Вчера в 20:30"
+        after="+ 1 500 ₽"
+        actions={
+          <ButtonGroup mode="horizontal" gap="s">
+            <Button>Принять</Button>
+            <Button mode="secondary">Отклонить</Button>
+          </ButtonGroup>
+        }
+      >
+        Тарас Иванов
+      </RichCell>
+      <RichCell
+        disabled
+        after={<Icon28UserAddOutline />}
+        before={<Avatar size={72} src={getAvatarUrl("user_ilyagrshn")} />}
+        caption="Команда ВКонтакте, Санкт-Петербург"
+        bottom={
+          <UsersStack
+            photos={[
+              getAvatarUrl("user_ox"),
+              getAvatarUrl("user_vitalyavolyn"),
+              getAvatarUrl("user_eee"),
+            ]}
+          >
+            73 общих друга
+          </UsersStack>
+        }
+        actions={
+          <ButtonGroup mode="horizontal" gap="s">
+            <Button>Добавить</Button>
+            <Button mode="secondary">Скрыть</Button>
+          </ButtonGroup>
+        }
+      >
+        Илья Гришин
+      </RichCell>
+      <RichCell
+        before={<Avatar size={48} src={getAvatarUrl("user_lihachyov")} />}
+        text="Поездка в Лиссабон"
+        caption="Вчера в 20:30"
+        after="+ 1 500 ₽"
+      >
+        Михаил Лихачев
+      </RichCell>
+      <RichCell
+        before={<Avatar size={48} src={getAvatarUrl("user_tc")} />}
+        caption="Вчера в 20:30"
+        after="- 700 ₽"
+      >
+        Тимофей Чаптыков
+      </RichCell>
+    </Group>
+  </Panel>
+</View>
+```

package/src/components/RichCell/RichCell.css

@@ -0,0 +1,115 @@
+.RichCell {
+  display: flex;
+  min-height: 64px;
+  padding-right: 16px;
+  padding-left: 16px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  text-decoration: none;
+  color: var(--text_primary);
+}
+
+.FormItem .RichCell {
+  width: 100%;
+  box-sizing: content-box;
+  margin: 0 calc(-1 * var(--formitem_padding));
+}
+
+.RichCell--mult {
+  white-space: normal;
+}
+
+.RichCell__in {
+  flex-grow: 1;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  font-size: 0;
+  line-height: 0;
+}
+
+.RichCell__in > :first-child:not(.RichCell__content) {
+  display: none;
+  pointer-events: none;
+}
+
+.RichCell__in > .Icon--28:first-child ~ * {
+  margin-right: 32px;
+}
+
+.RichCell__content {
+  display: flex;
+}
+
+.RichCell__after {
+  flex-shrink: 0;
+  padding-left: 4px;
+  white-space: nowrap;
+}
+
+.RichCell__after .Icon--28 {
+  position: absolute;
+  right: 0;
+  color: var(--accent);
+}
+
+.RichCell > .Avatar--sz-72 + .RichCell__in .RichCell__after .Icon--28 {
+  top: 22px;
+}
+
+.RichCell > .Avatar--sz-48 + .RichCell__in .RichCell__after .Icon--28 {
+  top: 10px;
+}
+
+.RichCell__children {
+  flex-grow: 1;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.RichCell__caption {
+  display: block;
+  margin-top: 1px;
+  color: var(--text_secondary);
+}
+
+.RichCell__children,
+.RichCell__text,
+.RichCell__caption {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.RichCell__actions {
+  display: flex;
+  margin-top: 8px;
+}
+
+/**
+ * iOS
+ */
+.RichCell--ios {
+  padding-right: 12px;
+  padding-left: 12px;
+}
+
+/**
+ * sizeY === 'compact'
+ */
+.RichCell--sizeY-compact {
+  min-height: 60px;
+}
+
+.RichCell--sizeY-compact .RichCell__actions {
+  margin-top: 11px;
+}
+
+.RichCell--sizeY-compact .UsersStack + .RichCell__actions {
+  margin-top: 12px;
+}

package/src/components/RichCell/RichCell.tsx

@@ -0,0 +1,104 @@
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { usePlatform } from "../../hooks/usePlatform";
+import { getClassName } from "../../helpers/getClassName";
+import Tappable, { TappableProps } from "../Tappable/Tappable";
+import { hasReactNode } from "../../lib/utils";
+import Text from "../Typography/Text/Text";
+import Subhead from "../Typography/Subhead/Subhead";
+import { withAdaptivity } from "../../hoc/withAdaptivity";
+import "./RichCell.css";
+
+export interface RichCellProps extends TappableProps {
+  /**
+   * Контейнер для текста под `children`.
+   */
+  text?: React.ReactNode;
+  /**
+   * Контейнер для текста под `text`.
+   */
+  caption?: React.ReactNode;
+  /**
+   * Контейнер для контента под `caption`. Например `<UsersStack size="s" />`
+   */
+  bottom?: React.ReactNode;
+  /**
+   * Кнопка `<Button size="s" />`. Располагается под `bottom`.
+   * Для набора кнопок следует использовать обёртку `<ButtonGroup mode="horizontal" gap="s">...</ButtonGroup>`.
+   */
+  actions?: React.ReactNode;
+  /**
+   * `<Avatar size={48|72} />`
+   */
+  before?: React.ReactNode;
+  /**
+   * Иконка 28 или текст
+   */
+  after?: React.ReactNode;
+  /**
+   * Убирает анимацию нажатия
+   */
+  disabled?: boolean;
+  multiline?: boolean;
+}
+
+const RichCell: React.FC<RichCellProps> = ({
+  children,
+  text,
+  caption,
+  before,
+  after,
+  bottom,
+  actions,
+  multiline,
+  sizeY,
+  ...restProps
+}) => {
+  const platform = usePlatform();
+
+  return (
+    <Tappable
+      {...restProps}
+      vkuiClass={classNames(
+        getClassName("RichCell", platform),
+        {
+          "RichCell--mult": multiline,
+        },
+        `RichCell--sizeY-${sizeY}`
+      )}
+    >
+      {before}
+      <div vkuiClass="RichCell__in">
+        {/* Этот after будет скрыт из верстки. Он нужен для CSS */}
+        {after}
+        <Text weight="medium" vkuiClass="RichCell__content">
+          <div vkuiClass="RichCell__children">{children}</div>
+          {hasReactNode(after) && (
+            <div vkuiClass="RichCell__after">{after}</div>
+          )}
+        </Text>
+        {hasReactNode(text) && (
+          <Text weight="regular" vkuiClass="RichCell__text">
+            {text}
+          </Text>
+        )}
+        {hasReactNode(caption) && (
+          <Subhead Component="span" vkuiClass="RichCell__caption">
+            {caption}
+          </Subhead>
+        )}
+        {(hasReactNode(bottom) || hasReactNode(actions)) && (
+          <div vkuiClass="RichCell__bottom">
+            {bottom}
+            {hasReactNode(actions) && (
+              <div vkuiClass="RichCell__actions">{actions}</div>
+            )}
+          </div>
+        )}
+      </div>
+    </Tappable>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default withAdaptivity(RichCell, { sizeY: true });

package/src/components/RichTooltip/Readme.md

@@ -0,0 +1,59 @@
+> **Важно**
+>
+> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
+
+Тултип, открывающийся при наведении мыши на `children`. В отличие от [TextTooltip](#/TextTooltip), имеет меньше ограничений
+по содержимому. Компонент всё ещё предназначен для информирования пользователей, но внутри допускаются кнопки, ссылки, картинки.
+
+```jsx { "props": { "layout": false, "iframe": true } }
+<Checkbox>
+  Специальные возможности
+  <RichTooltip style={{maxWidth: 320}} content={
+    <Subhead weight="regular" style={{padding: '8px 12px', color: 'var(--text_primary)'}}>
+      Если включить эту настройку, элементы управления на сайте будут определены и озвучены синтезатором речи.
+      <br/><br/>
+      Настройка повышает доступность сайта и подходит для пользователей с ограниченными возможностями.
+    </Subhead>
+  }>
+    <Icon16HelpOutline style={{
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      position: 'relative',
+      top: -1,
+      color: 'var(--icon_secondary)'
+    }}/>
+  </RichTooltip>
+</Checkbox>
+
+<RichTooltip style={{maxWidth: 320}} content={
+  <RichCell
+    disabled
+    after={
+      <TextTooltip text="Добавить">
+        <Icon28UserAddOutline/>
+      </TextTooltip>
+    }
+    before={<Avatar size={72} src={getAvatarUrl('user_ilyagrshn')}/>}
+    caption="Команда ВКонтакте, Санкт-Петербург"
+    bottom={
+      <UsersStack
+        photos={[
+          getAvatarUrl('user_ox'),
+          getAvatarUrl('user_vitalyavolyn'),
+          getAvatarUrl('user_eee'),
+        ]}
+      >73 общих друга</UsersStack>
+    }
+    actions={
+      <React.Fragment>
+        <Button>Добавить</Button>
+        <Button mode="secondary">Скрыть</Button>
+      </React.Fragment>
+    }
+  >
+    Илья Гришин
+  </RichCell>
+}>
+  <Link style={{display: 'inline-block', margin: 20}}>Илья Гришин</Link>
+</RichTooltip>
+```

package/src/components/RichTooltip/RichTooltip.css

@@ -0,0 +1,10 @@
+.RichTooltip {
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.04), 0 4px 32px rgba(0, 0, 0, 0.16);
+  border-radius: 8px;
+  background: var(--background_content);
+  animation: vkui-popper-fadein 0.2s ease;
+}
+
+.RichTooltip__arrow {
+  color: var(--background_content);
+}

package/src/components/RichTooltip/RichTooltip.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { HoverPopper, HoverPopperProps } from "../HoverPopper/HoverPopper";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useAppearance } from "../../hooks/useAppearance";
+import { classNames } from "../../lib/classNames";
+import { prefixClass } from "../../lib/prefixClass";
+import "./RichTooltip.css";
+
+export type RichTooltipProps = Omit<HoverPopperProps, "arrowClassName">;
+
+export const RichTooltip: React.FC<RichTooltipProps> = ({
+  children,
+  arrow = true,
+  ...popperProps
+}: RichTooltipProps) => {
+  const platform = usePlatform();
+  const appearance = useAppearance();
+
+  return (
+    <HoverPopper
+      vkuiClass={classNames(getClassName("RichTooltip", platform), {
+        [`RichTooltip--${appearance}`]: !!appearance,
+      })}
+      arrow={arrow}
+      arrowClassName={prefixClass("RichTooltip__arrow")}
+      {...popperProps}
+    >
+      {children}
+    </HoverPopper>
+  );
+};