@vkontakte/vkui 4.27.2 → 4.28.0

package/src/components/Popper/Popper.tsx

@@ -1,231 +0,0 @@
-import * as React from "react";
-import { usePopper, Modifier } from "react-popper";
-import { AppRootPortal } from "../AppRoot/AppRootPortal";
-import { HasRef } from "../../types";
-import { usePlatform } from "../../hooks/usePlatform";
-import { getClassName } from "../../helpers/getClassName";
-import { useExternRef } from "../../hooks/useExternRef";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
-import "./Popper.css";
-
-export type Placement =
-  | "auto"
-  | "auto-start"
-  | "auto-end"
-  | "top-start"
-  | "top-end"
-  | "bottom-start"
-  | "bottom-end"
-  | "right-start"
-  | "right-end"
-  | "left-start"
-  | "left-end"
-  | "top"
-  | "bottom"
-  | "left"
-  | "right";
-
-export interface PopperCommonProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    HasRef<HTMLDivElement> {
-  /**
-   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
-   */
-  placement?: Placement;
-  /**
-   * Отступ по вспомогательной оси
-   */
-  offsetSkidding?: number;
-  /**
-   * Отступ по главной оси
-   */
-  offsetDistance?: number;
-  arrow?: boolean;
-  arrowClassName?: string;
-  /**
-   * Выставлять ширину равной target элементу
-   */
-  sameWidth?: boolean;
-  forcePortal?: boolean;
-  onPlacementChange?: (data: { placement?: Placement }) => void;
-}
-
-export interface PopperProps extends PopperCommonProps {
-  targetRef: React.RefObject<HTMLElement>;
-}
-
-const ARROW_PADDING = 8;
-const ARROW_WIDTH = 20;
-const ARROW_HEIGHT = 8;
-
-export const Popper: React.FC<PopperProps> = ({
-  targetRef,
-  children,
-  getRef,
-  placement = "bottom-start",
-  onPlacementChange,
-  arrow,
-  arrowClassName,
-  sameWidth,
-  offsetDistance = 8,
-  offsetSkidding = 0,
-  forcePortal = true,
-  style: compStyles,
-  ...restProps
-}: PopperProps) => {
-  const [popperNode, setPopperNode] = React.useState<HTMLDivElement | null>(
-    null
-  );
-  const [smallTargetOffsetSkidding, setSmallTargetOffsetSkidding] =
-    React.useState(0);
-  const platform = usePlatform();
-
-  const setExternalRef = useExternRef<HTMLDivElement>(getRef, setPopperNode);
-
-  const modifiers = React.useMemo(() => {
-    const modifiers: Array<Modifier<string>> = [
-      {
-        name: "preventOverflow",
-      },
-      {
-        name: "offset",
-        options: {
-          offset: [
-            arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding,
-            arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance,
-          ],
-        },
-      },
-      {
-        name: "flip",
-      },
-    ];
-
-    if (arrow) {
-      modifiers.push({
-        name: "arrow",
-        options: {
-          padding: ARROW_PADDING,
-        },
-      });
-    }
-
-    if (sameWidth) {
-      const sameWidth: Modifier<string> = {
-        name: "sameWidth",
-        enabled: true,
-        phase: "beforeWrite",
-        requires: ["computeStyles"],
-        fn: ({ state }) => {
-          state.styles.popper.width = `${state.rects.reference.width}px`;
-        },
-        effect: ({ state }) => {
-          state.elements.popper.style.width = `${
-            (state.elements.reference as HTMLElement).offsetWidth
-          }px`;
-        },
-      };
-
-      modifiers.push(sameWidth);
-    }
-
-    return modifiers;
-  }, [
-    arrow,
-    sameWidth,
-    smallTargetOffsetSkidding,
-    offsetSkidding,
-    offsetDistance,
-  ]);
-
-  const { styles, state, attributes } = usePopper(
-    targetRef.current,
-    popperNode,
-    {
-      placement,
-      modifiers,
-    }
-  );
-
-  const resolvedPlacement = state?.placement;
-  const isEdgePlacement =
-    !!resolvedPlacement && resolvedPlacement.includes("-"); // true, если поппер отрисован скраю
-
-  // Если поппер рисуется скраю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до
-  // таргета из-за маленьких размеров последнего
-  useIsomorphicLayoutEffect(() => {
-    if (arrow && isEdgePlacement) {
-      const placementDirection =
-        resolvedPlacement?.startsWith("bottom") ||
-        resolvedPlacement?.startsWith("top")
-          ? "vertical"
-          : "horizontal";
-
-      const arrowSize =
-        placementDirection === "vertical" ? ARROW_WIDTH : ARROW_HEIGHT;
-      const targetSize =
-        (placementDirection === "vertical"
-          ? targetRef.current?.offsetWidth
-          : targetRef.current?.offsetHeight) ?? 0;
-
-      if (targetSize < arrowSize + 2 * ARROW_PADDING) {
-        setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);
-      }
-    } else {
-      setSmallTargetOffsetSkidding(0);
-    }
-  }, [arrow, isEdgePlacement]);
-
-  React.useEffect(() => {
-    if (resolvedPlacement) {
-      onPlacementChange && onPlacementChange({ placement: resolvedPlacement });
-    }
-  }, [onPlacementChange, resolvedPlacement]);
-
-  const dropdown = (
-    <div
-      {...restProps}
-      {...attributes.popper}
-      vkuiClass={getClassName("Popper", platform)}
-      ref={setExternalRef}
-      style={{
-        ...compStyles,
-        ...styles.popper,
-        minWidth: sameWidth ? targetRef.current?.scrollWidth : undefined,
-      }}
-    >
-      {arrow && (
-        <div
-          {...attributes.arrow}
-          vkuiClass="Popper__arrow"
-          data-popper-arrow={true}
-          style={styles.arrow}
-        >
-          <svg
-            vkuiClass="Popper__arrow-in"
-            className={arrowClassName}
-            width="20"
-            height="8"
-            viewBox="0 0 20 8"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z"
-              fill="currentColor"
-            />
-          </svg>
-        </div>
-      )}
-      <div vkuiClass="Popper__content">{children}</div>
-    </div>
-  );
-
-  return (
-    <AppRootPortal forcePortal={forcePortal} vkuiClass="PopperPortal">
-      {dropdown}
-    </AppRootPortal>
-  );
-};

package/src/components/Popper/Readme.md

@@ -1,33 +0,0 @@
-> **Важно**
->
-> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
-
-Низкоуровневый компонент для отрисовки выпадающего блока. Единственная его задача — корректно позициионироваться
-рядом с целевым элементом. На основе этого компонента сделаны [ClickPopper](#/ClickPopper) и [HoverPopper](#/HoverPopper),
-реализующие логику скрытия и показа по клику и по ховеру соответственно.
-
-```jsx { "props": { "layout": false, "iframe": false } }
-const [shown, setShown] = React.useState(false);
-const buttonRef = React.useRef();
-
-return (
-  <React.Fragment>
-    <Button
-      getRootRef={buttonRef}
-      onClick={() => setShown(!shown)}
-      style={{ margin: 50 }}
-    >
-      {shown ? "Закрыть" : "Открыть"}
-    </Button>
-    {shown && (
-      <Popper
-        offsetDistance={8}
-        style={{ padding: "9px 12px" }}
-        targetRef={buttonRef}
-      >
-        Привет
-      </Popper>
-    )}
-  </React.Fragment>
-);
-```

package/src/components/Progress/Progress.css

@@ -1,12 +0,0 @@
-.Progress {
-  border-radius: 1px;
-  background: var(--loader_track_fill);
-  height: 2px;
-}
-
-.Progress__in {
-  height: 100%;
-  border-radius: inherit;
-  transition: width 0.2s ease;
-  background: var(--accent);
-}

package/src/components/Progress/Progress.tsx

@@ -1,49 +0,0 @@
-import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import { HasRootRef } from "../../types";
-import { usePlatform } from "../../hooks/usePlatform";
-import "./Progress.css";
-
-export interface ProgressProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    HasRootRef<HTMLDivElement> {
-  value?: number;
-}
-
-const PROGRESS_MIN_VALUE = 0;
-const PROGRESS_MAX_VALUE = 100;
-
-const Progress: React.FC<ProgressProps> = ({
-  value = 0,
-  getRootRef,
-  ...restProps
-}: ProgressProps) => {
-  const platform = usePlatform();
-
-  const progress = Math.max(
-    PROGRESS_MIN_VALUE,
-    Math.min(value, PROGRESS_MAX_VALUE)
-  );
-
-  return (
-    <div
-      aria-valuenow={value}
-      {...restProps}
-      role="progressbar"
-      aria-valuemin={PROGRESS_MIN_VALUE}
-      aria-valuemax={PROGRESS_MAX_VALUE}
-      ref={getRootRef}
-      vkuiClass={getClassName("Progress", platform)}
-    >
-      <div vkuiClass="Progress__bg" aria-hidden="true" />
-      <div
-        vkuiClass="Progress__in"
-        style={{ width: `${progress}%` }}
-        aria-hidden="true"
-      />
-    </div>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default Progress;

package/src/components/Progress/Readme.md

@@ -1,14 +0,0 @@
-```
-  <View activePanel="progress">
-    <Panel id="progress">
-      <PanelHeader>
-        Progress
-      </PanelHeader>
-      <Group>
-        <Div>
-          <Progress value={40} />
-        </Div>
-      </Group>
-    </Panel>
-  </View>
-```

package/src/components/PromoBanner/PromoBanner.css

@@ -1,55 +0,0 @@
-.PromoBanner {
-  width: 100%;
-  box-sizing: border-box;
-  outline: 1px solid var(--separator_alpha);
-  color: var(--text_primary);
-  background: var(--background_content);
-  padding-bottom: 10px;
-  position: relative;
-}
-
-.PromoBanner__head {
-  display: flex;
-  padding-top: 14px;
-  padding-bottom: 10px;
-  color: var(--text_secondary);
-}
-
-.PromoBanner__age {
-  margin-left: 6px;
-}
-
-.PromoBanner__close {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 48px;
-  height: 48px;
-  color: var(--placeholder_icon_foreground_primary);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.PromoBanner__close:active {
-  opacity: 0.7;
-}
-
-.PromoBanner__pixels {
-  display: none;
-}
-
-/* iOS */
-
-.PromoBanner--ios .PromoBanner__head {
-  padding-left: 12px;
-  padding-right: 12px;
-}
-
-/* Android */
-
-.PromoBanner--android .PromoBanner__head,
-.PromoBanner--vkcom .PromoBanner__head {
-  padding-left: 16px;
-  padding-right: 16px;
-}

package/src/components/PromoBanner/PromoBanner.tsx

@@ -1,137 +0,0 @@
-import * as React from "react";
-import { Icon24Dismiss } from "@vkontakte/icons";
-import Button from "../Button/Button";
-import SimpleCell from "../SimpleCell/SimpleCell";
-import Avatar from "../Avatar/Avatar";
-import Caption from "../Typography/Caption/Caption";
-import { usePlatform } from "../../hooks/usePlatform";
-import { getClassName } from "../../helpers/getClassName";
-import { warnOnce } from "../../lib/warnOnce";
-import "./PromoBanner.css";
-
-type StatsType =
-  | "playbackStarted" // Начало показа
-  | "click"; // Клик по баннеру
-
-type BannerData = {
-  title?: string;
-  url_types?: string; // eslint-disable-line camelcase
-  bannerID?: string;
-  imageWidth?: number;
-  imageHeight?: number;
-  imageLink?: string;
-  trackingLink?: string;
-  type?: string;
-  iconWidth?: number;
-  domain?: string;
-  ctaText?: string;
-  advertisingLabel?: string;
-  iconLink?: string;
-  statistics?: Array<{ type: StatsType; url: string }>;
-  openInBrowser?: boolean;
-  iconHeight?: number;
-  directLink?: boolean;
-  navigationType?: string;
-  description?: string;
-  ageRestrictions?: string;
-  /** @deprecated */
-  ageRestriction?: number;
-};
-
-export interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Данные рекламного баннера, полученные из VKWebAppGetAds */
-  bannerData: BannerData;
-  /** Флаг скрытия кнопки закрытия рекламы */
-  isCloseButtonHidden?: boolean;
-  /** Хандлер закрытия рекламы */
-  onClose: () => void;
-}
-
-const warn = warnOnce("PromoBanner");
-const PromoBanner = (props: PromoBannerProps) => {
-  const platform = usePlatform();
-  const { bannerData = {}, onClose, ...restProps } = props;
-
-  const ageRestrictions =
-    bannerData.ageRestrictions != null
-      ? parseInt(bannerData.ageRestrictions)
-      : bannerData.ageRestriction;
-
-  if (bannerData.ageRestriction && process.env.NODE_ENV === "development") {
-    warn(
-      "Свойство bannerData.ageRestriction устарело и будет удалено в 5.0.0. Используйте bannerData.ageRestrictions"
-    );
-  }
-
-  const [currentPixel, setCurrentPixel] = React.useState("");
-
-  const statsPixels = React.useMemo(
-    () =>
-      (bannerData.statistics
-        ? bannerData.statistics.reduce(
-            (acc, item) => ({ ...acc, [item.type]: item.url }),
-            {}
-          )
-        : {}) as Record<StatsType, string | void>,
-    [bannerData.statistics]
-  );
-
-  const onClick = React.useCallback(
-    () => setCurrentPixel(statsPixels.click || ""),
-    [statsPixels.click]
-  );
-
-  React.useEffect(() => {
-    if (statsPixels.playbackStarted) {
-      setCurrentPixel(statsPixels.playbackStarted);
-    }
-  }, [statsPixels.playbackStarted]);
-
-  return (
-    <div vkuiClass={getClassName("PromoBanner", platform)} {...restProps}>
-      <div vkuiClass="PromoBanner__head">
-        <Caption weight="regular" level="1" vkuiClass="PromoBanner__label">
-          {bannerData.advertisingLabel || "Advertisement"}
-        </Caption>
-        {ageRestrictions != null && (
-          <Caption weight="regular" level="1" vkuiClass="PromoBanner__age">
-            {ageRestrictions}+
-          </Caption>
-        )}
-
-        {!props.isCloseButtonHidden && (
-          <div vkuiClass="PromoBanner__close" onClick={props.onClose}>
-            <Icon24Dismiss />
-          </div>
-        )}
-      </div>
-      <SimpleCell
-        href={bannerData.trackingLink}
-        onClick={onClick}
-        rel="nofollow noopener noreferrer"
-        target="_blank"
-        before={
-          <Avatar
-            mode="image"
-            size={48}
-            src={bannerData.iconLink}
-            alt={bannerData.title}
-          />
-        }
-        after={<Button mode="outline">{bannerData.ctaText}</Button>}
-        description={bannerData.domain}
-      >
-        {bannerData.title}
-      </SimpleCell>
-
-      {currentPixel.length > 0 && (
-        <div vkuiClass="PromoBanner__pixels">
-          <img src={currentPixel} alt="" />
-        </div>
-      )}
-    </div>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default PromoBanner;

package/src/components/PromoBanner/Readme.md

@@ -1,25 +0,0 @@
-```jsx
-const promoBannerProps = {
-  title: "Заголовок",
-  domain: "vk.com",
-  trackingLink: "https://vk.com",
-  ctaText: "Перейти",
-  advertisingLabel: "Реклама",
-  iconLink:
-    "https://sun9-7.userapi.com/c846420/v846420985/1526c3/ISX7VF8NjZk.jpg",
-  description: "Описание рекламы",
-  ageRestrictions: "14+",
-  statistics: [
-    { url: "", type: "playbackStarted" },
-    { url: "", type: "click" },
-  ],
-};
-
-<View activePanel="promo">
-  <Panel id="promo">
-    <FixedLayout vertical="bottom">
-      <PromoBanner bannerData={promoBannerProps} />
-    </FixedLayout>
-  </Panel>
-</View>;
-```

package/src/components/PullToRefresh/PullToRefresh.css

@@ -1,98 +0,0 @@
-.PullToRefresh {
-  flex-grow: 1;
-}
-
-.PullToRefresh--refreshing {
-  touch-action: none;
-  pointer-events: none;
-}
-
-.PullToRefresh__controls {
-  width: 100%;
-  pointer-events: none;
-  /* Прямо под шапкой, см https://github.com/VKCOM/VKUI/issues/1207 */
-  z-index: 9;
-}
-
-.PullToRefresh--ios .PullToRefresh__controls {
-  z-index: 0;
-}
-
-.PullToRefresh__spinner {
-  display: flex;
-  margin: auto;
-  width: 40px;
-  height: 40px;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  transition: transform 300ms cubic-bezier(0.1, 0, 0.25, 1),
-    opacity 220ms ease-out;
-  opacity: 0;
-}
-
-.PullToRefresh--ios .PullToRefresh__spinner {
-  color: var(--icon_outline_secondary);
-}
-
-.PullToRefresh--android .PullToRefresh__spinner,
-.PullToRefresh--vkcom .PullToRefresh__spinner {
-  background: var(--background_suggestions);
-  border-radius: 50%;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-  color: var(--accent);
-}
-
-.PullToRefresh--watching .PullToRefresh__spinner {
-  transition: opacity 220ms ease-out;
-}
-
-.PullToRefresh__spinner-self {
-  stroke: currentColor;
-}
-
-.PullToRefresh--ios.PullToRefresh--refreshing .PullToRefresh__spinner-self {
-  animation: vkui-PullToRefreshToRefreshing 380ms ease-out;
-}
-
-.PullToRefresh__spinner-path {
-  transform: rotate(-90deg);
-  transform-origin: center center;
-  transition: stroke-dashoffset 167ms ease-out;
-}
-
-.PullToRefresh--watching .PullToRefresh__spinner-path,
-.PullToRefresh--refreshing .PullToRefresh__spinner-path {
-  transition: none;
-}
-
-.PullToRefresh__spinner--on .PullToRefresh__spinner-path {
-  animation: vkui-rotator var(--duration) linear infinite;
-}
-
-.PullToRefresh__content {
-  overflow: hidden;
-  transition: transform 400ms var(--ios-easing);
-}
-
-.PullToRefresh--watching .PullToRefresh__content {
-  transition: none;
-}
-
-@keyframes vkui-PullToRefreshToRefreshing {
-  0% {
-    transform: scale(1);
-  }
-
-  30% {
-    transform: scale(0.6);
-  }
-
-  90% {
-    transform: scale(1.1);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}