@vkontakte/vkui 4.27.0 → 4.28.0

package/src/components/Removable/Removable.tsx

@@ -1,174 +0,0 @@
-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 Pick<RemovableProps, "removePlaceholder"> {
-  onRemoveClick?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;
-  removePlaceholderString?: string;
-}
-
-const RemovableIos: React.FC<RemovableIosOwnProps> = ({
-  onRemoveClick,
-  removePlaceholder,
-  removePlaceholderString,
-  children,
-}) => {
-  const { window } = useDOM();
-
-  const removeButtonRef = React.useRef<HTMLElement>(null);
-  const [removeOffset, updateRemoveOffset] = React.useState(0);
-
-  useGlobalEventListener(
-    window,
-    "click",
-    () => {
-      if (removeOffset > 0) {
-        updateRemoveOffset(0);
-      }
-    },
-    { capture: true }
-  );
-
-  const onRemoveTransitionEnd = () => {
-    if (removeOffset > 0) {
-      removeButtonRef?.current?.focus();
-    }
-  };
-
-  const onRemoveActivateClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (!removeButtonRef.current) {
-      return;
-    }
-    const { offsetWidth } = removeButtonRef.current;
-    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={removeOffset === 0}
-        getRootRef={removeButtonRef}
-        vkuiClass="Removable__remove"
-        onClick={onRemoveClick}
-      >
-        <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
-          onRemoveClick={onRemoveClick}
-          removePlaceholder={removePlaceholder}
-          removePlaceholderString={removePlaceholderString}
-        >
-          {children}
-        </RemovableIos>
-      )}
-    </div>
-  );
-};

package/src/components/RichCell/Readme.md

@@ -1,65 +0,0 @@
-```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={
-          <React.Fragment>
-            <Button>Принять</Button>
-            <Button mode="secondary">Отклонить</Button>
-          </React.Fragment>
-        }
-      >
-        Тарас Иванов
-      </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={
-          <React.Fragment>
-            <Button>Добавить</Button>
-            <Button mode="secondary">Скрыть</Button>
-          </React.Fragment>
-        }
-      >
-        Илья Гришин
-      </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

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

@@ -1,107 +0,0 @@
-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`.
-   */
-  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"
-            weight="regular"
-            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

@@ -1,59 +0,0 @@
-> **Важно**
->
-> Это нестабильный компонент. Его 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

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

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

package/src/components/Root/Readme.md

@@ -1,36 +0,0 @@
-Используется для создания модальных окон. Содержимое `Root` – это коллекция `View`. У каждой `View` должен быть `id`.
-Свойство `activeView` определяет, какая `View` сейчас активна.
-
-При смене значения свойства `activeView` происходит плавный переход от одной `View` к другой.
-Как только он заканчивается, вызывается свойство-функция `onTransition`.
-
-```jsx
-const [activeView, setActiveView] = useState("view1");
-
-<Root activeView={activeView}>
-  <View activePanel="panel1.1" id="view1">
-    <Panel id="panel1.1">
-      <PanelHeader>View 1</PanelHeader>
-      <Group>
-        <div style={{ height: 200 }} />
-        <CellButton onClick={() => setActiveView("view2")}>
-          Open View 2
-        </CellButton>
-        <div style={{ height: 600 }} />
-      </Group>
-    </Panel>
-  </View>
-  <View header activePanel="panel2.1" id="view2">
-    <Panel id="panel2.1">
-      <PanelHeader>View 2</PanelHeader>
-      <Group>
-        <div style={{ height: 200 }} />
-        <CellButton onClick={() => setActiveView("view1")}>
-          Back to View 1
-        </CellButton>
-        <div style={{ height: 600 }} />
-      </Group>
-    </Panel>
-  </View>
-</Root>;
-```