@vkontakte/vkui 4.27.0 → 4.28.0

package/src/components/Snackbar/Snackbar.css

@@ -1,159 +0,0 @@
-.Snackbar {
-  user-select: none;
-  z-index: 101;
-  position: fixed;
-  bottom: 0;
-  left: auto;
-  width: 100%;
-  padding-left: var(--safe-area-inset-left);
-  padding-right: var(--safe-area-inset-right);
-  padding-bottom: var(--safe-area-inset-bottom);
-}
-
-.Epic .Snackbar {
-  padding-bottom: calc(var(--tabbar_height) + var(--safe-area-inset-bottom));
-}
-
-.Snackbar__in {
-  padding: 8px;
-}
-
-.Snackbar--closing .Snackbar__in {
-  transform: translate3d(0, 140%, 0);
-}
-
-.Snackbar__body {
-  box-sizing: border-box;
-  padding: 12px 16px;
-  min-height: 56px;
-  display: flex;
-  align-items: center;
-  background: var(--modal_card_background);
-  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.08);
-}
-
-.Snackbar__before {
-  margin-left: -4px;
-  margin-right: 12px;
-}
-
-.Snackbar__after {
-  margin-right: -4px;
-  margin-left: 12px;
-}
-
-.Snackbar__content {
-  flex: 1;
-  display: flex;
-  align-items: center;
-}
-
-.Snackbar--l-vertical .Snackbar__content {
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.Snackbar__content-text {
-  flex: 1;
-}
-
-.Snackbar__content-text {
-  color: var(--text_primary);
-}
-
-.Snackbar--l-horizontal .Snackbar__action {
-  margin-right: -16px;
-  position: relative;
-  top: 2px;
-}
-
-.Snackbar--l-vertical .Snackbar__action {
-  margin-top: 2px;
-  margin-bottom: -6px;
-  margin-left: -16px;
-}
-
-.ModalRoot .Snackbar {
-  padding-bottom: var(--safe-area-inset-bottom);
-}
-
-/* iOS */
-.Snackbar--ios .Snackbar__in,
-.Snackbar--ios .Snackbar__body {
-  transition: transform 400ms var(--ios-easing);
-}
-
-.Snackbar--ios .Snackbar__in {
-  animation: vkui-animation-snackbar-intro-vertical 340ms var(--ios-easing);
-}
-
-.Snackbar--ios .Snackbar__body {
-  border-radius: 10px;
-}
-
-/* Android */
-.Snackbar--android .Snackbar__in,
-.Snackbar--android .Snackbar__body,
-.Snackbar--vkcom .Snackbar__in,
-.Snackbar--vkcom .Snackbar__body {
-  transition: transform 320ms var(--android-easing);
-}
-
-.Snackbar--android .Snackbar__in,
-.Snackbar--vkcom .Snackbar__in {
-  animation: vkui-animation-snackbar-intro-vertical 340ms var(--android-easing);
-}
-
-.Snackbar--android .Snackbar__body,
-.Snackbar--vkcom .Snackbar__body {
-  border-radius: 8px;
-}
-
-/**
- * Desktop
- */
-
-.Snackbar--desktop {
-  max-width: 328px;
-  left: 0;
-  bottom: 0;
-}
-
-.Snackbar--desktop .Snackbar__in {
-  padding: 12px;
-  animation-name: vkui-animation-snackbar-intro-horizontal;
-}
-
-.Snackbar--desktop.Snackbar--closing .Snackbar__in {
-  transform: translate3d(-140%, 0, 0);
-}
-
-/**
- * Touch-interaction
- */
-.Snackbar--touched .Snackbar__body {
-  transition: none;
-}
-
-/**
- * Animations
- */
-@keyframes vkui-animation-snackbar-intro-vertical {
-  from {
-    transform: translate3d(0, 140%, 0);
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes vkui-animation-snackbar-intro-horizontal {
-  from {
-    transform: translate3d(-140%, 0, 0);
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}

package/src/components/Snackbar/Snackbar.tsx

@@ -1,254 +0,0 @@
-import * as React from "react";
-import { Touch, TouchEvent } from "../Touch/Touch";
-import { classNames } from "../../lib/classNames";
-import { HasPlatform } from "../../types";
-import { getClassName } from "../../helpers/getClassName";
-import { ANDROID, VKCOM } from "../../lib/platform";
-import { rubber } from "../../lib/touch";
-import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
-import Text from "../Typography/Text/Text";
-import Button from "../Button/Button";
-import { AppRootPortal } from "../AppRoot/AppRootPortal";
-import { useWaitTransitionFinish } from "../../hooks/useWaitTransitionFinish";
-import { usePlatform } from "../../hooks/usePlatform";
-import { useTimeout } from "../../hooks/useTimeout";
-import {
-  AdaptivityContextInterface,
-  AdaptivityProps,
-} from "../AdaptivityProvider/AdaptivityContext";
-import "./Snackbar.css";
-
-export interface SnackbarProps
-  extends React.HTMLAttributes<HTMLElement>,
-    HasPlatform,
-    AdaptivityProps {
-  /**
-   * Название кнопки действия в уведомлении
-   */
-  action?: string | React.ComponentType;
-
-  /**
-   * Будет вызвано при клике на кнопку действия
-   */
-  onActionClick?: (e: React.MouseEvent) => void;
-
-  /**
-   * Цветная иконка 24x24 пикселя
-   */
-  before?: React.ReactNode;
-  /**
-   * Контент в правой части, может быть `<Avatar size={32} />`
-   */
-  after?: React.ReactNode;
-  /**
-   * Варианты расположения кнопки
-   */
-  layout?: "vertical" | "horizontal";
-  /**
-   * Время в миллисекундах, через которое плашка скроется
-   */
-  duration?: number;
-  /**
-   * Обработчик закрытия уведомления
-   */
-  onClose: () => void;
-}
-
-const SnackbarComponent: React.FC<
-  SnackbarProps & AdaptivityContextInterface
-> = (props) => {
-  const {
-    children,
-    layout,
-    action,
-    before,
-    after,
-    viewWidth,
-    duration = 0,
-    onActionClick,
-    onClose,
-    ...restProps
-  } = props;
-
-  const platform = usePlatform();
-
-  const { waitTransitionFinish } = useWaitTransitionFinish();
-
-  const [closing, setClosing] = React.useState(false);
-  const [touched, setTouched] = React.useState(false);
-
-  const shiftXPercentRef = React.useRef<number>(0);
-  const shiftXCurrentRef = React.useRef<number>(0);
-
-  const bodyElRef = React.useRef<HTMLDivElement | null>(null);
-  const innerElRef = React.useRef<HTMLDivElement | null>(null);
-
-  const animationFrameRef = React.useRef<ReturnType<
-    typeof requestAnimationFrame
-  > | null>(null);
-
-  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
-  const transitionFinishDurationFallback =
-    platform === ANDROID || platform === VKCOM ? 400 : 320;
-
-  const close = () => {
-    setClosing(true);
-    waitTransitionFinish(
-      innerElRef.current,
-      () => {
-        onClose();
-      },
-      transitionFinishDurationFallback
-    );
-  };
-
-  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {
-    close();
-
-    if (action && typeof onActionClick === "function") {
-      onActionClick(e);
-    }
-  };
-
-  const closeTimeout = useTimeout(close, duration);
-
-  const setBodyTransform = (percent: number) => {
-    if (animationFrameRef.current !== null) {
-      cancelAnimationFrame(animationFrameRef.current);
-    }
-    animationFrameRef.current = requestAnimationFrame(() => {
-      if (bodyElRef.current) {
-        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;
-      }
-    });
-  };
-
-  const onTouchStart = closeTimeout.clear;
-
-  const onTouchMoveX = (event: TouchEvent) => {
-    const { shiftX, originalEvent } = event;
-    originalEvent.preventDefault();
-
-    if (!touched) {
-      setTouched(true);
-    }
-
-    shiftXPercentRef.current =
-      (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;
-    shiftXCurrentRef.current = rubber(
-      shiftXPercentRef.current,
-      72,
-      1.2,
-      platform === ANDROID || platform === VKCOM
-    );
-
-    setBodyTransform(shiftXCurrentRef.current);
-  };
-
-  const onTouchEnd = (e: TouchEvent) => {
-    let callback: VoidFunction | undefined;
-
-    if (touched) {
-      let shiftXCurrent = shiftXCurrentRef.current;
-      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;
-      shiftXCurrent = shiftXCurrent + expectTranslateY;
-
-      if (isDesktop && shiftXCurrent <= -50) {
-        closeTimeout.clear();
-        waitTransitionFinish(
-          bodyElRef.current,
-          () => {
-            onClose();
-          },
-          transitionFinishDurationFallback
-        );
-        setBodyTransform(-120);
-      } else if (!isDesktop && shiftXCurrent >= 50) {
-        closeTimeout.clear();
-        waitTransitionFinish(
-          bodyElRef.current,
-          () => {
-            onClose();
-          },
-          transitionFinishDurationFallback
-        );
-        setBodyTransform(120);
-      } else {
-        callback = () => {
-          closeTimeout.set();
-          setBodyTransform(0);
-        };
-      }
-    } else {
-      closeTimeout.set();
-    }
-
-    setTouched(false);
-    callback && requestAnimationFrame(callback);
-  };
-
-  React.useEffect(() => closeTimeout.set(), [closeTimeout]);
-
-  const resolvedLayout = after || isDesktop ? "vertical" : layout;
-
-  return (
-    <AppRootPortal>
-      <div
-        {...restProps}
-        vkuiClass={classNames(
-          getClassName("Snackbar", platform),
-          `Snackbar--l-${resolvedLayout}`,
-          {
-            "Snackbar--closing": closing,
-            "Snackbar--touched": touched,
-            "Snackbar--desktop": isDesktop,
-          }
-        )}
-      >
-        <Touch
-          vkuiClass="Snackbar__in"
-          getRootRef={innerElRef}
-          onStart={onTouchStart}
-          onMoveX={onTouchMoveX}
-          onEnd={onTouchEnd}
-        >
-          <div vkuiClass="Snackbar__body" ref={bodyElRef}>
-            {before && <div vkuiClass="Snackbar__before">{before}</div>}
-
-            <div vkuiClass="Snackbar__content">
-              <Text weight="regular" vkuiClass="Snackbar__content-text">
-                {children}
-              </Text>
-
-              {action && (
-                <Button
-                  align="left"
-                  hasHover={false}
-                  mode="tertiary"
-                  size="s"
-                  vkuiClass="Snackbar__action"
-                  onClick={handleActionClick}
-                >
-                  {action}
-                </Button>
-              )}
-            </div>
-
-            {after && <div vkuiClass="Snackbar__after">{after}</div>}
-          </div>
-        </Touch>
-      </div>
-    </AppRootPortal>
-  );
-};
-
-SnackbarComponent.displayName = "Snackbar";
-
-SnackbarComponent.defaultProps = {
-  duration: 4000,
-  layout: "horizontal",
-};
-
-export const Snackbar = withAdaptivity(SnackbarComponent, {
-  viewWidth: true,
-});

package/src/components/Spacing/Readme.md

@@ -1,98 +0,0 @@
-Компонент для разделения контента
-
-Для большинства случаев будет достаточно дефолтного поведения компонента
-
-```jsx static
-<Spacing /> // - пустой отступ высотой 8px
-
-<Spacing size={16} />  // - пустой отступ высотой 16px
-
-<Spacing separator size={16} /> // - сепаратор с отступами 8px сверху и снизу
-```
-
-Для более гибкой настройки положения линии и отступов, можно комбинировать два отступа вместе
-
-Например - нужен сепаратор с отступом сверху 12px и снизу 20px:
-
-```jsx static
-<Spacing separator="bottom" size={12} />
-<Spacing size={20} />
-```
-
-```jsx
-<View activePanel="separator">
-  <Panel id="separator">
-    <PanelHeader>Spacing</PanelHeader>
-
-    <Group
-      header={<Header mode="secondary">Default Spacing (empty, 8px)</Header>}
-    >
-      <Cell before={<Icon28Notifications />}>Уведомления</Cell>
-      <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
-
-      <Spacing />
-
-      <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
-      <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
-    </Group>
-
-    <Group header={<Header mode="secondary">Spacing 16px</Header>}>
-      <Cell before={<Icon28Notifications />}>Уведомления</Cell>
-      <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
-
-      <Spacing size={16} />
-
-      <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
-      <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
-    </Group>
-
-    <Group
-      header={
-        <Header mode="secondary">Spacing with centered separator 16px</Header>
-      }
-    >
-      <Cell before={<Icon28Notifications />}>Уведомления</Cell>
-      <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
-
-      <Spacing separator size={16} />
-
-      <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
-      <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
-    </Group>
-
-    <Group
-      header={
-        <Header mode="secondary">
-          Combined Spacings with bottom separator
-        </Header>
-      }
-    >
-      <Cell before={<Icon28Notifications />}>Уведомления</Cell>
-      <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
-
-      <Spacing separator="bottom" />
-      <Spacing />
-
-      <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
-      <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
-    </Group>
-
-    <Group
-      header={
-        <Header mode="secondary">
-          Combined Spacings with bottom separator and custom size
-        </Header>
-      }
-    >
-      <Cell before={<Icon28Notifications />}>Уведомления</Cell>
-      <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
-
-      <Spacing separator="bottom" size={12} />
-      <Spacing size={20} />
-
-      <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
-      <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
-    </Group>
-  </Panel>
-</View>
-```

package/src/components/Spacing/Spacing.css

@@ -1,46 +0,0 @@
-.Spacing {
-  color: var(--separator_common);
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-flow: column;
-}
-
-.Spacing--separator-center {
-  justify-content: center;
-}
-
-.Spacing--separator-bottom {
-  flex-direction: column-reverse;
-}
-
-.Spacing--separator::after {
-  content: "";
-  display: block;
-  height: 1px;
-  background: currentColor;
-  transform-origin: center top;
-}
-
-@media (min-resolution: 2dppx) {
-  .Spacing--separator::after {
-    transform: scaleY(0.5);
-  }
-}
-
-@media (min-resolution: 3dppx) {
-  .Spacing--separator::after {
-    transform: scaleY(0.32);
-  }
-}
-
-.Spacing--ios {
-  padding-left: 12px;
-  padding-right: 12px;
-}
-
-.Spacing--android,
-.Spacing--vkcom {
-  padding-left: 16px;
-  padding-right: 16px;
-}

package/src/components/Spacing/Spacing.tsx

@@ -1,53 +0,0 @@
-import * as React from "react";
-import { classNames } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
-import { getClassName } from "../../helpers/getClassName";
-import "./Spacing.css";
-
-export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Высота спэйсинга
-   */
-  size?: number;
-  /**
-   * Настройка положения сепаратора:
-   *
-   * - separator=false (default) - без сепаратора
-   * - separator=true | separator='center' - сепаратор располагается по середине
-   * - separator='top'
-   * - separator='bottom'
-   */
-  separator?: boolean | "top" | "bottom" | "center";
-}
-
-export const Spacing: React.FC<SpacingProps> = ({
-  size,
-  separator,
-  style,
-  ...restProps
-}: SpacingProps) => {
-  const platfrom = usePlatform();
-  const styles = {
-    height: size,
-    ...style,
-  };
-
-  return (
-    <div
-      {...restProps}
-      aria-hidden="true"
-      vkuiClass={classNames(getClassName("Spacing", platfrom), {
-        "Spacing--separator": !!separator,
-        "Spacing--separator-center":
-          separator === true || separator === "center",
-        "Spacing--separator-top": separator === "top",
-        "Spacing--separator-bottom": separator === "bottom",
-      })}
-      style={styles}
-    />
-  );
-};
-
-Spacing.defaultProps = {
-  size: 8,
-};

package/src/components/Spinner/Readme.md

@@ -1,11 +0,0 @@
-Используется для визуализации выполнения асинхронного процесса (например ajax запроса). Если нужно на момент загрузки
-заблокировать интерфейс, то можно использовать надстройку над `Spinner` – [ScreenSpinner](#!/ScreenSpinner).
-
-```jsx { "props": { "layout": false, "iframe": false } }
-<div style={{ display: "flex", alignItems: "center", flexDirection: "column" }}>
-  <Spinner size="large" style={{ margin: "20px 0" }} />
-  <Spinner size="medium" style={{ margin: "20px 0" }} />
-  <Spinner size="regular" style={{ margin: "20px 0" }} />
-  <Spinner size="small" style={{ margin: "20px 0" }} />
-</div>
-```

package/src/components/Spinner/Spinner.css

@@ -1,33 +0,0 @@
-.Spinner {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--icon_outline_secondary);
-}
-
-.Spinner__self {
-  animation: vkui-rotator var(--duration) linear infinite;
-  transform-origin: center;
-}
-
-.Spinner__self svg {
-  transform: scale(1);
-}
-
-/**
- * PanelHeader
- */
-
-.PanelHeader .Spinner {
-  color: currentColor;
-}
-
-/**
- * Button
- */
-
-.Button .Spinner {
-  color: currentColor;
-}

package/src/components/Spinner/Spinner.tsx

@@ -1,53 +0,0 @@
-import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import {
-  Icon24Spinner,
-  Icon32Spinner,
-  Icon44Spinner,
-  Icon16Spinner,
-} from "@vkontakte/icons";
-import { usePlatform } from "../../hooks/usePlatform";
-import "./Spinner.css";
-
-export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
-  size?: "small" | "regular" | "large" | "medium";
-}
-
-const Spinner: React.FC<SpinnerProps> = ({
-  size,
-  ...restProps
-}: SpinnerProps) => {
-  const platform = usePlatform();
-
-  let SpinnerIcon = Icon24Spinner;
-
-  if (size === "large") {
-    SpinnerIcon = Icon44Spinner;
-  }
-
-  if (size === "medium") {
-    SpinnerIcon = Icon32Spinner;
-  }
-
-  if (size === "small") {
-    SpinnerIcon = Icon16Spinner;
-  }
-
-  return (
-    <span
-      role="status"
-      {...restProps}
-      vkuiClass={getClassName("Spinner", platform)}
-    >
-      <SpinnerIcon aria-hidden="true" vkuiClass="Spinner__self" />
-    </span>
-  );
-};
-
-Spinner.defaultProps = {
-  size: "regular",
-  "aria-label": "Загружается...",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default React.memo(Spinner);