@vkontakte/vkui 4.27.2 → 4.28.0

package/src/components/Link/Link.tsx

@@ -1,27 +0,0 @@
-import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
-import Tappable, { TappableProps } from "../Tappable/Tappable";
-import "./Link.css";
-
-export type LinkProps = TappableProps;
-
-const Link: React.FC<LinkProps> = ({ children, ...restProps }: LinkProps) => {
-  const platform = usePlatform();
-
-  return (
-    <Tappable
-      Component={restProps.href ? "a" : "button"}
-      {...restProps}
-      vkuiClass={getClassName("Link", platform)}
-      hasActive={false}
-      hoverMode="opacity"
-      focusVisibleMode="outside"
-    >
-      {children}
-    </Tappable>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default Link;

package/src/components/Link/Readme.md

@@ -1,8 +0,0 @@
-Надстройка над `<a />`. Компонент принимает все валидные для этого элемента свойства.
-
-```jsx static
-import { Link } from '@vkontakte/vkui';
-
-<Link href="https://google.com" target="_blank">Google</Link>
-<Link href="/profile">Profile</Link>
-```

package/src/components/List/List.css

@@ -1,2 +0,0 @@
-.List {
-}

package/src/components/List/List.tsx

@@ -1,31 +0,0 @@
-import * as React from "react";
-import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
-import { ListContext } from "./ListContext";
-import "./List.css";
-
-const List: React.FunctionComponent<React.HTMLAttributes<HTMLDivElement>> = ({
-  children,
-  ...restProps
-}: React.HTMLAttributes<HTMLDivElement>) => {
-  const platform = usePlatform();
-  const [isDragging, toggleDrag] = React.useState(false);
-
-  return (
-    <div
-      role="list"
-      {...restProps}
-      vkuiClass={classNames(getClassName("List", platform), {
-        "List--dragging": isDragging,
-      })}
-    >
-      <ListContext.Provider value={React.useMemo(() => ({ toggleDrag }), [])}>
-        {children}
-      </ListContext.Provider>
-    </div>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default List;

package/src/components/List/ListContext.ts

@@ -1,6 +0,0 @@
-import * as React from "react";
-import { noop } from "../../lib/utils";
-
-export const ListContext = React.createContext({
-  toggleDrag: noop as (value: boolean) => void,
-});

package/src/components/List/Readme.md

@@ -1,22 +0,0 @@
-Контейнер для однородных [Cell](#!/Cell).
-
-```jsx
-<View activePanel="list">
-  <Panel id="list">
-    <PanelHeader>List</PanelHeader>
-    <Group>
-      <List>
-        <Cell expandable before={<Icon28UserOutline />}>
-          Учетная запись
-        </Cell>
-        <Cell expandable before={<Icon28SettingsOutline />}>
-          Основные
-        </Cell>
-        <Cell expandable before={<Icon28PrivacyOutline />}>
-          Приватность
-        </Cell>
-      </List>
-    </Group>
-  </Panel>
-</View>
-```

package/src/components/MiniInfoCell/MiniInfoCell.css

@@ -1,67 +0,0 @@
-.MiniInfoCell {
-  display: flex;
-  padding: 6px 12px;
-}
-
-.MiniInfoCell--lvl-primary {
-  color: var(--text_primary);
-}
-
-.MiniInfoCell--lvl-secondary {
-  color: var(--text_subhead);
-}
-
-.MiniInfoCell__icon {
-  margin-right: 12px;
-  color: var(--icon_outline_secondary);
-}
-
-.MiniInfoCell__content {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.MiniInfoCell--wr-short .MiniInfoCell__content {
-  white-space: initial;
-  display: -webkit-box;
-  max-height: 60px;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-}
-
-.MiniInfoCell--wr-full .MiniInfoCell__content {
-  overflow: inherit;
-  white-space: initial;
-}
-
-.MiniInfoCell__after {
-  margin-left: 12px;
-  margin-top: -2px;
-  margin-bottom: -2px;
-}
-
-.MiniInfoCell--md-add,
-.MiniInfoCell--md-add .MiniInfoCell__icon {
-  color: var(--accent);
-}
-
-.MiniInfoCell--md-more,
-.MiniInfoCell--md-more .MiniInfoCell__icon {
-  color: var(--link_alternate);
-}
-
-.MiniInfoCell--md-more {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-/**
- * ANDROID
- */
-.MiniInfoCell--android {
-  padding-left: 16px;
-  padding-right: 16px;
-}

package/src/components/MiniInfoCell/MiniInfoCell.tsx

@@ -1,94 +0,0 @@
-import * as React from "react";
-import { classNames } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
-import { getClassName } from "../../helpers/getClassName";
-import Text from "../Typography/Text/Text";
-import Tappable from "../../components/Tappable/Tappable";
-import { hasReactNode } from "../../lib/utils";
-import "./MiniInfoCell.css";
-
-export interface MiniInfoCellProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Иконка слева.<br />
-   * Рекомендуется использовать иконки размера 20.
-   */
-  before: React.ReactNode;
-
-  /**
-   * Содержимое справа.<br />
-   * `<UsersStack size="s" />` или `<Avatar size={24} />`
-   */
-  after?: React.ReactNode;
-
-  /**
-   * Тип ячейки:
-   *
-   * - `base` – базовая ячейка с серой иконкой и серым текстом.<br />
-   * В компонент можно передать `Link`, чтобы визуально сделать часть текста ссылкой.
-   * - `add` – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.
-   * - `more` – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.
-   */
-  mode?: "base" | "add" | "more";
-
-  /**
-   * Тип отображения текста:
-   *
-   * - `nowrap` – в одну строку, текст не переносится и обрезается.
-   * - `short` – максимально отображается 3 строки, остальное обрезается.
-   * - `full` – текст отображается полностью.
-   */
-  textWrap?: "nowrap" | "short" | "full";
-
-  /**
-   * Стиль текста:
-   *
-   * - `primary` – используйте этот стиль, если хотите выделить информацию в общем списке.<br />Пример использования: подробная информация на странице сообщества
-   * - `secondary` – стиль по-умолчанию.
-   */
-  textLevel?: "primary" | "secondary";
-}
-
-export const MiniInfoCell: React.FC<MiniInfoCellProps> = (
-  props: MiniInfoCellProps
-) => {
-  const platform = usePlatform();
-  const { before, after, mode, textWrap, textLevel, children, ...restProps } =
-    props;
-
-  const isClickable = !!restProps.onClick;
-
-  return (
-    <Tappable
-      Component="div"
-      disabled={!isClickable}
-      role={isClickable ? "button" : undefined}
-      {...restProps}
-      vkuiClass={classNames(
-        getClassName("MiniInfoCell", platform),
-        {
-          [`MiniInfoCell--md-${mode}`]: mode !== "base",
-          [`MiniInfoCell--wr-${textWrap}`]: textWrap !== "nowrap",
-        },
-        `MiniInfoCell--lvl-${textLevel}`
-      )}
-    >
-      <span vkuiClass="MiniInfoCell__icon">{before}</span>
-      <Text
-        vkuiClass="MiniInfoCell__content"
-        weight={mode === "more" ? "medium" : "regular"}
-      >
-        {children}
-      </Text>
-      {hasReactNode(after) && (
-        <span vkuiClass="MiniInfoCell__after">{after}</span>
-      )}
-    </Tappable>
-  );
-};
-
-MiniInfoCell.defaultProps = {
-  mode: "base",
-  textWrap: "nowrap",
-  textLevel: "secondary",
-};

package/src/components/MiniInfoCell/Readme.md

@@ -1,150 +0,0 @@
-```jsx { "props": { "layout": false, "adaptivity": true } }
-function MiniInfoCellExample() {
-  const platform = usePlatform();
-  const [activeModal, setActiveModal] = React.useState(null);
-
-  const handleExtendedInfoClick = () => {
-    setActiveModal("extended_info");
-  };
-
-  const closeModal = () => {
-    setActiveModal(null);
-  };
-
-  const modal = (
-    <ModalRoot activeModal={activeModal} onClose={closeModal}>
-      <ModalPage
-        header={
-          <ModalPageHeader
-            left={
-              (platform === ANDROID || platform === VKCOM) && (
-                <PanelHeaderButton onClick={closeModal}>
-                  <Icon24Cancel />
-                </PanelHeaderButton>
-              )
-            }
-            right={
-              platform === IOS && (
-                <PanelHeaderButton onClick={closeModal}>
-                  <Icon24Dismiss />
-                </PanelHeaderButton>
-              )
-            }
-            noShadow
-          >
-            Подробнее
-          </ModalPageHeader>
-        }
-        id="extended_info"
-      >
-        <Separator style={{ marginBottom: 12 }} />
-
-        <MiniInfoCell
-          before={<Icon20CommunityName />}
-          textWrap="full"
-          textLevel="primary"
-        >
-          Команда вконтакте
-        </MiniInfoCell>
-
-        <MiniInfoCell
-          before={<Icon20MessageOutline />}
-          textWrap="full"
-          textLevel="primary"
-        >
-          Официальная страница Команды ВКонтакте.
-        </MiniInfoCell>
-
-        <MiniInfoCell
-          before={<Icon20ArticleOutline />}
-          textWrap="full"
-          textLevel="primary"
-        >
-          ВКонтакте начинался как сайт для выпускников вузов, а сейчас это
-          огромная экосистема с безграничными возможностями и миллионами
-          пользователей.
-        </MiniInfoCell>
-
-        <Separator style={{ marginTop: 12, marginBottom: 12 }} />
-
-        <MiniInfoCell before={<Icon20PlaceOutline />}>
-          Санкт-Петербург, Россия
-        </MiniInfoCell>
-
-        <MiniInfoCell before={<Icon20MentionOutline />}>team</MiniInfoCell>
-
-        <div style={{ height: 24 }} />
-      </ModalPage>
-    </ModalRoot>
-  );
-
-  return (
-    <SplitLayout modal={modal}>
-      <SplitCol>
-        <View activePanel="information_cell">
-          <Panel id="information_cell">
-            <PanelHeader>Ячейка информации</PanelHeader>
-
-            <Group>
-              <MiniInfoCell before={<Icon20ArticleOutline />} textWrap="short">
-                ВКонтакте начинался как сайт для выпускников вузов, а сейчас это
-                огромная экосистема с безграничными возможностями и миллионами
-                пользователей.
-              </MiniInfoCell>
-
-              <MiniInfoCell
-                before={<Icon20FollowersOutline />}
-                after={
-                  <UsersStack
-                    photos={[
-                      getAvatarUrl("user_mm"),
-                      getAvatarUrl("user_arthurstam"),
-                      getAvatarUrl("user_xyz"),
-                    ]}
-                  />
-                }
-              >
-                514,7K подписчиков · 77 друзей
-              </MiniInfoCell>
-
-              <MiniInfoCell before={<Icon20GlobeOutline />}>
-                <Link href="https://vk.com/team">vk.com/team</Link>
-              </MiniInfoCell>
-
-              <MiniInfoCell
-                before={<Icon20WorkOutline />}
-                after={
-                  <Avatar
-                    size={24}
-                    src="https://sun9-29.userapi.com/c623616/v623616034/1c184/MnbEYczHxSY.jpg?ava=1"
-                  />
-                }
-              >
-                Место работы: Команда ВКонтакте
-              </MiniInfoCell>
-
-              <MiniInfoCell
-                before={<Icon20WorkOutline />}
-                mode="add"
-                onClick={() => console.log("Указать место учёбы")}
-              >
-                Укажите место учёбы
-              </MiniInfoCell>
-
-              <MiniInfoCell
-                before={<Icon20Info />}
-                mode="more"
-                onClick={handleExtendedInfoClick}
-              >
-                Подробная информация
-              </MiniInfoCell>
-            </Group>
-          </Panel>
-        </View>
-      </SplitCol>
-    </SplitLayout>
-  );
-}
-
-<MiniInfoCellExample />;
-```

package/src/components/ModalCard/ModalCard.css

@@ -1,77 +0,0 @@
-.ModalCard {
-  box-sizing: border-box;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: flex-end;
-  z-index: 1;
-}
-
-.ModalCard__in {
-  width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 8px;
-  transform: translateY(100%);
-}
-
-.ModalCard__dismiss {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  width: 48px;
-  height: 48px;
-  color: var(--placeholder_icon_foreground_primary);
-  justify-content: center;
-}
-
-/**
- * iOS
- */
-
-.ModalCard--ios .ModalCard__in {
-  transition: transform 340ms var(--ios-easing);
-  max-width: 414px;
-}
-
-/**
- * Android + vkcom
- */
-
-.ModalCard--android .ModalCard__in,
-.ModalCard--vkcom .ModalCard__in {
-  transition: transform 340ms var(--android-easing);
-}
-
-.ModalCard--android .ModalCard__in {
-  max-width: 440px;
-}
-
-.ModalCard--vkcom .ModalCard__in {
-  max-width: 400px;
-}
-
-/**
- * Desktop
- */
-
-.ModalCard--desktop {
-  align-items: center;
-}
-
-.ModalCard--desktop .ModalCard__in {
-  transform: unset;
-  opacity: 0;
-  transition: opacity 340ms var(--android-easing);
-}
-
-/**
- * Common
- */
-
-.ModalRoot--touched .ModalCard__in {
-  transition: none;
-}

package/src/components/ModalCard/ModalCard.tsx

@@ -1,93 +0,0 @@
-import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import { classNames } from "../../lib/classNames";
-import { withPlatform } from "../../hoc/withPlatform";
-import { HasPlatform } from "../../types";
-import {
-  withAdaptivity,
-  ViewHeight,
-  ViewWidth,
-} from "../../hoc/withAdaptivity";
-import ModalRootContext, {
-  useModalRegistry,
-} from "../ModalRoot/ModalRootContext";
-import { ModalType } from "../ModalRoot/types";
-import { getNavId, NavIdProps } from "../../lib/getNavId";
-import { warnOnce } from "../../lib/warnOnce";
-import {
-  ModalCardBase,
-  ModalCardBaseProps,
-} from "../ModalCardBase/ModalCardBase";
-import {
-  AdaptivityContextInterface,
-  AdaptivityProps,
-} from "../AdaptivityProvider/AdaptivityContext";
-import "./ModalCard.css";
-
-export interface ModalCardProps
-  extends HasPlatform,
-    AdaptivityProps,
-    NavIdProps,
-    ModalCardBaseProps {}
-
-const warn = warnOnce("ModalCard");
-
-const ModalCard: React.FC<ModalCardProps & AdaptivityContextInterface> = (
-  props
-) => {
-  const {
-    icon,
-    header,
-    subheader,
-    children,
-    actions,
-    actionsLayout,
-    onClose,
-    platform,
-    viewWidth,
-    viewHeight,
-    hasMouse,
-    nav,
-    ...restProps
-  } = props;
-
-  const isDesktop =
-    viewWidth >= ViewWidth.SMALL_TABLET &&
-    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
-
-  const modalContext = React.useContext(ModalRootContext);
-  const { refs } = useModalRegistry(getNavId(props, warn), ModalType.CARD);
-
-  return (
-    <div
-      {...restProps}
-      vkuiClass={classNames(getClassName("ModalCard", platform), {
-        "ModalCard--desktop": isDesktop,
-      })}
-    >
-      <ModalCardBase
-        vkuiClass="ModalCard__in"
-        getRootRef={refs.innerElement}
-        icon={icon}
-        header={header}
-        subheader={subheader}
-        actions={actions}
-        actionsLayout={actionsLayout}
-        onClose={onClose || modalContext.onClose}
-      >
-        {children}
-      </ModalCardBase>
-    </div>
-  );
-};
-
-ModalCard.defaultProps = {
-  actionsLayout: "horizontal",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(withPlatform(ModalCard), {
-  viewWidth: true,
-  viewHeight: true,
-  hasMouse: true,
-});

package/src/components/ModalCard/Readme.md

@@ -1,9 +0,0 @@
-Модальные карточки.
-
-Карточка может быть закрыта смахиванием вниз, нажатием на полупрозрачную черную область, либо нажатием по иконке крестика (только на iOS). При этом вызовется свойство `onClose`.
-
-> **Важно**
->
-> в качестве значения свойства `icon` использовать либо контурные иконки размером 56, например, `<Icon56NotificationOutline />`, либо `<Avatar size={72} src="" />`.
-
-Пример использования показан в компоненте `ModalRoot`.

package/src/components/ModalCardBase/ModalCardBase.css

@@ -1,94 +0,0 @@
-.ModalCardBase {
-}
-
-.ModalCardBase__container {
-  box-sizing: border-box;
-  position: relative;
-  background: var(--modal_card_background);
-  border-radius: 18px;
-  padding: 16px;
-  margin-bottom: var(--safe-area-inset-bottom);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  pointer-events: initial;
-}
-
-.ModalCardBase__container--softwareKeyboardOpened {
-  margin-bottom: 0;
-}
-
-.ModalCardBase__header,
-.ModalCardBase__subheader {
-  text-align: center;
-  margin: 0;
-  padding: 0 8px;
-  word-break: break-word;
-}
-
-.ModalCardBase__header {
-  color: var(--text_primary);
-}
-
-.ModalCardBase__subheader {
-  color: var(--text_secondary);
-}
-
-.ModalCardBase__header + .ModalCardBase__subheader {
-  margin-top: 8px;
-}
-
-.ModalCardBase__icon {
-  margin: 8px auto 16px;
-  color: var(--accent);
-}
-
-.ModalCardBase__actions {
-  display: flex;
-  margin-left: -6px;
-  margin-right: -6px;
-  margin-top: 16px;
-}
-
-.ModalCardBase .UsersStack + .ModalCardBase__actions {
-  margin-top: 32px;
-}
-
-.ModalCardBase__header + .ModalCardBase__actions,
-.ModalCardBase__subheader + .ModalCardBase__actions {
-  margin-top: 32px;
-}
-
-.ModalCardBase__actions--v {
-  flex-direction: column;
-  margin-left: 0;
-  margin-right: 0;
-}
-
-/**
- * iOS
- */
-
-.ModalCardBase--ios .ModalCardBase__header:first-child {
-  padding-left: 36px;
-  padding-right: 36px;
-}
-
-/**
- * Android + vkcom
- */
-
-.ModalCardBase--android .ModalCardBase__container,
-.ModalCardBase--vkcom .ModalCardBase__container {
-  border-radius: 12px;
-  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.16), 0 0 4px 0 rgba(0, 0, 0, 0.08);
-}
-
-/**
- * Desktop
- */
-
-.ModalCardBase--desktop .ModalCardBase__container {
-  border-radius: 8px;
-  box-shadow: 0 16px 16px rgba(0, 0, 0, 0.16), 0 0 8px rgba(0, 0, 0, 0.12);
-}