@vkontakte/vkui 4.27.0 → 4.28.0

package/src/components/ClickPopper/ClickPopper.tsx

@@ -1,86 +0,0 @@
-import * as React from "react";
-import { useDOM } from "../../lib/dom";
-import { Popper, PopperCommonProps } from "../Popper/Popper";
-import { useExternRef } from "../../hooks/useExternRef";
-import { useEventListener } from "../../hooks/useEventListener";
-import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
-import { usePatchChildrenRef } from "../../hooks/usePatchChildrenRef";
-
-export interface ClickPopperProps extends PopperCommonProps {
-  /**
-   * Содержимое `ClickPopper`
-   */
-  content?: React.ReactNode;
-  /**
-   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства
-   */
-  shown?: boolean;
-  /**
-   * Вызывается при каждом изменении видимости тултипа
-   */
-  onShownChange?: (shown: boolean) => void;
-  /**
-   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элемнету компонента
-   */
-  children?: React.ReactElement;
-}
-
-export const ClickPopper: React.FC<ClickPopperProps> = ({
-  getRef,
-  content,
-  children,
-  onShownChange,
-  shown: _shown,
-  ...restProps
-}: ClickPopperProps) => {
-  const [computedShown, setComputedShown] = React.useState(_shown || false);
-  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(
-    null
-  );
-
-  const shown = typeof _shown === "boolean" ? _shown : computedShown;
-
-  const { document } = useDOM();
-
-  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);
-
-  const [childRef, child] = usePatchChildrenRef(children);
-
-  const setShown = (value: boolean) => {
-    if (typeof _shown !== "boolean") {
-      setComputedShown(value);
-    }
-    typeof onShownChange === "function" && onShownChange(value);
-  };
-
-  useGlobalEventListener(document, "click", (e: MouseEvent) => {
-    if (
-      dropdownNode &&
-      !childRef.current?.contains(e.target as Node) &&
-      !dropdownNode.contains(e.target as Node)
-    ) {
-      setShown(false);
-    }
-  });
-
-  const targetClickEvent = useEventListener("click", () => {
-    setShown(!shown);
-  });
-
-  React.useEffect(() => {
-    if (childRef.current !== null) {
-      targetClickEvent.add(childRef.current);
-    }
-  }, [childRef, targetClickEvent]);
-
-  return (
-    <React.Fragment>
-      {child}
-      {shown && (
-        <Popper {...restProps} targetRef={childRef} getRef={patchedPopperRef}>
-          {content}
-        </Popper>
-      )}
-    </React.Fragment>
-  );
-};

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -1,126 +0,0 @@
-import * as React from "react";
-import { AppearanceType } from "@vkontakte/vk-bridge";
-import { canUseDOM, useDOM } from "../../lib/dom";
-import {
-  ConfigProviderContext,
-  ConfigProviderContextInterface,
-  defaultConfigProviderProps,
-} from "./ConfigProviderContext";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
-import { useObjectMemo } from "../../hooks/useObjectMemo";
-import { noop } from "../../lib/utils";
-import { warnOnce } from "../../lib/warnOnce";
-import {
-  normalizeScheme,
-  AppearanceScheme,
-  Scheme,
-} from "../../helpers/scheme";
-import {
-  AppearanceProvider,
-  generateVKUITokensClassName,
-} from "../AppearanceProvider/AppearanceProvider";
-
-export interface ConfigProviderProps
-  extends Partial<ConfigProviderContextInterface> {
-  /**
-   * @deprecated будет удалено в 5.0.0, устанавливать тему следует через appearance
-   * Цветовая схема приложения
-   */
-  scheme?: AppearanceScheme;
-}
-
-const warn = warnOnce("ConfigProvider");
-
-function useSchemeDetector(
-  node: HTMLElement | undefined | null,
-  _scheme: Scheme | "inherit"
-) {
-  const inherit = _scheme === "inherit";
-  const getScheme = React.useCallback(() => {
-    if (!inherit || !canUseDOM || !node) {
-      return undefined;
-    }
-    return node.getAttribute("scheme") as Scheme;
-  }, [inherit, node]);
-  const [resolvedScheme, setScheme] = React.useState(getScheme());
-
-  React.useEffect(() => {
-    if (!inherit || !node) {
-      return noop;
-    }
-    setScheme(getScheme());
-    const observer = new MutationObserver(() => setScheme(getScheme()));
-    observer.observe(node, { attributes: true, attributeFilter: ["scheme"] });
-    return () => observer.disconnect();
-  }, [getScheme, inherit, node]);
-
-  return _scheme === "inherit" ? resolvedScheme : _scheme;
-}
-
-const deriveAppearance = (scheme: Scheme | undefined): AppearanceType =>
-  scheme === Scheme.SPACE_GRAY || scheme === Scheme.VKCOM_DARK
-    ? "dark"
-    : "light";
-
-const ConfigProvider: React.FC<ConfigProviderProps> = ({
-  children,
-  ...props
-}) => {
-  const config = { ...defaultConfigProviderProps, ...props };
-  const { platform, appearance } = config;
-  const scheme = normalizeScheme({
-    scheme: config.scheme,
-    platform: platform,
-    appearance: appearance,
-  });
-  const { document } = useDOM();
-  const target = document?.body;
-
-  useIsomorphicLayoutEffect(() => {
-    if (scheme === "inherit") {
-      return noop;
-    }
-    if (
-      process.env.NODE_ENV === "development" &&
-      target?.hasAttribute("scheme")
-    ) {
-      warn(
-        '<body scheme> was set before VKUI mount - did you forget scheme="inherit"?'
-      );
-    }
-    target?.setAttribute("scheme", scheme);
-    return () => target?.removeAttribute("scheme");
-  }, [scheme]);
-
-  const realScheme = useSchemeDetector(target, scheme);
-  const derivedAppearance = deriveAppearance(realScheme);
-
-  useIsomorphicLayoutEffect(() => {
-    const VKUITokensClassName = generateVKUITokensClassName(
-      platform,
-      derivedAppearance
-    );
-
-    target?.classList.add(VKUITokensClassName);
-
-    return () => {
-      target?.classList.remove(VKUITokensClassName);
-    };
-  }, [platform, derivedAppearance]);
-
-  const configContext = useObjectMemo({
-    appearance: derivedAppearance,
-    ...config,
-  });
-
-  return (
-    <ConfigProviderContext.Provider value={configContext}>
-      <AppearanceProvider appearance={configContext.appearance}>
-        {children}
-      </AppearanceProvider>
-    </ConfigProviderContext.Provider>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default ConfigProvider;

package/src/components/ConfigProvider/ConfigProviderContext.tsx

@@ -1,52 +0,0 @@
-import * as React from "react";
-import vkBridge, { AppearanceType } from "@vkontakte/vk-bridge";
-import { PlatformType, platform } from "../../lib/platform";
-
-export enum WebviewType {
-  VKAPPS = "vkapps",
-  INTERNAL = "internal",
-}
-
-export interface ConfigProviderContextInterface {
-  /**
-   * Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере
-   */
-  isWebView: boolean;
-  /**
-   * Тип вебвью.<br>
-   * В случае `WebviewType.VKAPPS` интерфейс будет адаптирован для отображения в вебвью Mini Apps (системные контролы в правой части шапки)
-   */
-  webviewType: WebviewType.INTERNAL | WebviewType.VKAPPS;
-  /**
-   * Тип приложения
-   */
-  app?: string;
-  /**
-   * Тип цветовой схемы – `light` или `dark`
-   */
-  appearance?: AppearanceType;
-  /**
-   * Включена ли анимация переходов между экранами в `Root` и `View`
-   */
-  transitionMotionEnabled: boolean;
-  /**
-   * Платформа
-   */
-  platform: PlatformType;
-  hasNewTokens: boolean;
-}
-
-export const defaultConfigProviderProps = {
-  webviewType: WebviewType.VKAPPS,
-  isWebView: vkBridge.isWebView(),
-  transitionMotionEnabled: true,
-  platform: platform(),
-  hasNewTokens: false,
-  // appearance is auto-detected by default
-  // appearance: Appearance.LIGHT,
-};
-
-export const ConfigProviderContext =
-  React.createContext<ConfigProviderContextInterface>(
-    defaultConfigProviderProps
-  );

package/src/components/ConfigProvider/Readme.md

@@ -1 +0,0 @@
-Компонент для прокидывания конфига приложению. Помимо прочего, отвечает за установку [темы и платформы](#/PlatformsAndThemes).

package/src/components/ContentCard/ContentCard.css

@@ -1,39 +0,0 @@
-.ContentCard--disabled {
-  opacity: 0.6;
-}
-
-.ContentCard__body {
-  padding: 12px 16px;
-}
-
-.ContentCard__tappable {
-  border-radius: 8px;
-  text-decoration: none;
-  color: var(--text_primary);
-  display: block;
-}
-
-.ContentCard__img {
-  object-fit: cover;
-  display: block;
-  border-radius: 8px 8px 0 0;
-}
-
-.ContentCard__text:not(:last-child) {
-  margin-bottom: 4px;
-}
-
-.ContentCard__caption {
-  color: var(--text_secondary);
-}
-
-/*
- * iOS
- */
-.ContentCard--ios .ContentCard__tappable {
-  border-radius: 10px;
-}
-
-.ContentCard--ios .ContentCard__img {
-  border-radius: 10px 10px 0 0;
-}

package/src/components/ContentCard/ContentCard.tsx

@@ -1,159 +0,0 @@
-import * as React from "react";
-import { Card, CardProps } from "../Card/Card";
-import Caption from "../Typography/Caption/Caption";
-import Title from "../Typography/Title/Title";
-import Text from "../Typography/Text/Text";
-import Tappable, { TappableProps } from "../Tappable/Tappable";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
-import { hasReactNode } from "../../lib/utils";
-import { warnOnce } from "../../lib/warnOnce";
-import { HasRef, HasRootRef } from "../../types";
-import { classNames } from "../../lib/classNames";
-import "./ContentCard.css";
-
-export interface ContentCardProps
-  extends HasRootRef<HTMLDivElement>,
-    Omit<TappableProps, "getRootRef" | "crossOrigin">,
-    Omit<
-      React.ImgHTMLAttributes<HTMLImageElement>,
-      keyof React.HTMLAttributes<HTMLImageElement>
-    >,
-    HasRef<HTMLImageElement> {
-  /**
-   Текст над заголовком
-   */
-  subtitle?: React.ReactNode;
-  /**
-   Заголовок
-   */
-  header?: React.ReactNode;
-  /**
-   Текст
-   */
-  text?: React.ReactNode;
-  /**
-   Нижний текст
-   */
-  caption?: React.ReactNode;
-  /**
-    @deprecated будет удалено в 5.0.0. Используйте src
-   */
-  image?: string;
-  /**
-    Максимальная высота изображения
-   */
-  maxHeight?: number;
-  mode?: CardProps["mode"];
-}
-
-const warn = warnOnce("ContentCard");
-const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
-  const {
-    subtitle,
-    header,
-    text,
-    caption,
-    // card props
-    className,
-    mode,
-    style,
-    getRootRef,
-    // img props
-    getRef,
-    maxHeight,
-    image,
-    src,
-    srcSet,
-    alt,
-    width,
-    height,
-    crossOrigin,
-    decoding,
-    loading,
-    referrerPolicy,
-    sizes,
-    useMap,
-    ...restProps
-  } = props;
-  const platform = usePlatform();
-
-  const source = image || src;
-
-  if (image && process.env.NODE_ENV === "development") {
-    warn("Свойство image устарело и будет удалено в 5.0.0. Используйте src");
-  }
-
-  return (
-    <Card
-      mode={mode}
-      getRootRef={getRootRef}
-      vkuiClass={classNames(getClassName("ContentCard", platform), {
-        "ContentCard--disabled": restProps.disabled,
-      })}
-      style={style}
-      className={className}
-    >
-      <Tappable
-        {...restProps}
-        disabled={restProps.disabled || (!restProps.onClick && !restProps.href)}
-        hasHover={false}
-        hasActive={false}
-        vkuiClass="ContentCard__tappable"
-      >
-        {(source || srcSet) && (
-          <img
-            ref={getRef}
-            vkuiClass="ContentCard__img"
-            src={source}
-            srcSet={srcSet}
-            alt={alt}
-            crossOrigin={crossOrigin}
-            decoding={decoding}
-            loading={loading}
-            referrerPolicy={referrerPolicy}
-            sizes={sizes}
-            useMap={useMap}
-            height={height}
-            style={{ maxHeight }}
-            width="100%"
-          />
-        )}
-        <div vkuiClass="ContentCard__body">
-          {hasReactNode(subtitle) && (
-            <Caption
-              caps
-              vkuiClass="ContentCard__text"
-              weight="semibold"
-              level="3"
-            >
-              {subtitle}
-            </Caption>
-          )}
-          {hasReactNode(header) && (
-            <Title vkuiClass="ContentCard__text" weight="3" level="1">
-              {header}
-            </Title>
-          )}
-          {hasReactNode(text) && (
-            <Text vkuiClass="ContentCard__text" weight="regular">
-              {text}
-            </Text>
-          )}
-          {hasReactNode(caption) && (
-            <Caption vkuiClass="ContentCard__text" weight="regular" level="1">
-              {caption}
-            </Caption>
-          )}
-        </div>
-      </Tappable>
-    </Card>
-  );
-};
-
-ContentCard.defaultProps = {
-  mode: "shadow",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default ContentCard;

package/src/components/ContentCard/Readme.md

@@ -1,65 +0,0 @@
-Компонент на базе [Card](/#/Card). Принимает все валидные свойства для `img` и `Tappable`.
-
-Внутри распределяет переданные свойства между своими компонентами следующим образом:
-
-- корневой компонент `Card`
-  - `mode`,
-  - `getRootRef`,
-  - `style`,
-  - `className`;
-- `img`
-  - `getRef`,
-  - `src`,
-  - `srcSet`,
-  - `alt`,
-  - `width`,
-  - `height`,
-  - `maxHeight`,
-  - `crossOrigin`,
-  - `decoding`,
-  - `loading`,
-  - `referrerPolicy`,
-  - `sizes`,
-  - `useMap`,
-- внутренний `Tappable` получает все остальные свойства (кроме `subtitle`, `header`, `text` и `caption`).
-
-```jsx
-const Example = () => {
-  return (
-    <View activePanel="profile" id="profile">
-      <Panel id="profile">
-        <PanelHeader>ContentCardExample</PanelHeader>
-        <Group>
-          <CardGrid size="l">
-            <ContentCard
-              subtitle="VKUI"
-              header="ContentCard example"
-              caption="VKUI Styleguide > Blocks > ContentCard"
-            />
-            <ContentCard
-              onClick={() => {}}
-              src="https://images.unsplash.com/photo-1603988492906-4fb0fb251cf8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80"
-              subtitle="unsplash"
-              header="brown and gray mountains under blue sky during daytime photo"
-              text="Mountain changji"
-              caption="Photo by Siyuan on Unsplash"
-              maxHeight={150}
-            />
-            <ContentCard
-              disabled
-              src="https://images.unsplash.com/photo-1603928726698-a015a1015d0e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80"
-              subtitle="unsplash"
-              header="persons left hand with pink paint"
-              text="Five hours of makeup and paint to achieve the human anatomy photoshoot. Thank you Steph and Shay. See more and official credit on @jawfox.photography."
-              caption="Photo by Alexander Jawfox on Unsplash"
-              maxHeight={500}
-            />
-          </CardGrid>
-        </Group>
-      </Panel>
-    </View>
-  );
-};
-
-<Example />;
-```

package/src/components/Counter/Counter.css

@@ -1,161 +0,0 @@
-.Counter {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.Counter__in {
-  display: block;
-  width: 100%;
-  padding-left: 5px;
-  padding-right: 5px;
-  text-align: center;
-  box-sizing: border-box;
-}
-
-.Counter--primary {
-  background: var(--counter_primary_background);
-  color: var(--counter_primary_text);
-}
-
-.Counter--secondary {
-  background: var(--counter_secondary_background);
-  color: var(--counter_secondary_text);
-}
-
-.Counter--prominent {
-  background: var(--counter_prominent_background);
-  color: var(--counter_prominent_text);
-}
-
-.Counter--s-m {
-  height: 24px;
-  min-width: 24px;
-  border-radius: 12px;
-}
-
-.Counter--s-s {
-  height: 18px;
-  min-width: 18px;
-  border-radius: 9px;
-}
-
-.Counter--vkcom.Counter--s-m .Counter__in {
-  padding-left: 6px;
-  padding-right: 6px;
-}
-
-/**
- * CMP:
- * Button
- */
-.Button--lvl-primary.Button--clr-accent .Counter,
-.Button--lvl-secondary.Button--clr-neutral .Counter,
-.Button--lvl-tertiary.Button--clr-neutral .Counter {
-  background-color: var(
-    --button_primary_foreground,
-    var(--vkui--color_background_contrast)
-  );
-  color: var(--button_primary_background, var(--vkui--color_text_contrast));
-}
-
-.Button--lvl-secondary.Button--clr-accent .Counter {
-  background-color: var(
-    --button_secondary_foreground,
-    var(--vkui--color_background_accent)
-  );
-  color: var(--background_content, var(--vkui--color_text_contrast_themed));
-}
-
-.Button--lvl-tertiary.Button--clr-accent .Counter {
-  background-color: var(
-    --button_tertiary_foreground,
-    var(--vkui--color_background_accent)
-  );
-  color: var(--background_content, var(--vkui--color_text_contrast_themed));
-}
-
-.Button--lvl-outline.Button--clr-accent .Counter {
-  background-color: var(
-    --button_outline_foreground,
-    var(--vkui--color_background_accent)
-  );
-  color: var(--background_content, var(--vkui--color_text_contrast_themed));
-}
-
-.Button--lvl-primary.Button--clr-positive .Counter {
-  background-color: var(
-    --button_commerce_foreground,
-    var(--vkui--color_background_contrast)
-  );
-  color: var(--button_commerce_background, var(--vkui--color_text_positive));
-}
-
-.Button--lvl-secondary.Button--clr-positive .Counter,
-.Button--lvl-tertiary.Button--clr-positive .Counter,
-.Button--lvl-outline.Button--clr-positive .Counter {
-  background-color: var(
-    --button_commerce_background,
-    var(--vkui--color_background_positive)
-  );
-  color: var(--button_commerce_foreground, var(--vkui--color_text_contrast));
-}
-
-.Button--lvl-primary.Button--clr-negative .Counter {
-  background-color: var(--white, var(--vkui--color_background_contrast));
-  color: var(--destructive, var(--vkui--color_text_negative));
-}
-
-.Button--lvl-secondary.Button--clr-negative .Counter,
-.Button--lvl-tertiary.Button--clr-negative .Counter,
-.Button--lvl-outline.Button--clr-negative .Counter {
-  background-color: var(--destructive, var(--vkui--color_background_negative));
-  color: var(--white, var(--vkui--color_text_contrast));
-}
-
-.Button--lvl-primary.Button--clr-neutral .Counter {
-  background-color: var(
-    --media_overlay_button_background,
-    var(--vkui--color_background_contrast)
-  );
-  color: var(--text_primary, var(--vkui--color_text_primary));
-}
-
-.Button--lvl-primary.Button--clr-overlay .Counter {
-  background-color: var(
-    --media_overlay_button_foreground,
-    var(--vkui--color_icon_primary_invariably)
-  );
-  color: var(
-    --media_overlay_button_background,
-    var(--vkui--color_text_contrast)
-  );
-}
-
-.Button--lvl-secondary.Button--clr-overlay .Counter,
-.Button--lvl-tertiary.Button--clr-overlay .Counter,
-.Button--lvl-outline.Button--clr-overlay .Counter {
-  background-color: var(
-    --media_overlay_button_background,
-    var(--vkui--color_background_contrast)
-  );
-  color: var(
-    --media_overlay_button_foreground,
-    var(--vkui--color_text_primary_invariably)
-  );
-}
-
-.Button--lvl-secondary.Button--clr-accent .Counter--vkcom,
-.Button--lvl-tertiary.Button--clr-accent .Counter--vkcom,
-.Button--lvl-outline.Button--clr-accent .Counter--vkcom {
-  opacity: 0.72;
-}
-
-/**
- * CMP:
- * WriteBarIcon
- */
-.WriteBarIcon .Counter {
-  color: var(--button_commerce_foreground);
-  background: var(--button_commerce_background);
-}