@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/ClickPopper/ClickPopper.tsx

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

@@ -0,0 +1,144 @@
+import * as React from "react";
+import vkBridge, { AppearanceType } from "@vkontakte/vk-bridge";
+import { canUseDOM, useDOM } from "../../lib/dom";
+import {
+  ConfigProviderContext,
+  ConfigProviderContextInterface,
+  WebviewType,
+} 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";
+import { LocaleProviderContext } from "../LocaleProviderContext/LocaleProviderContext";
+import { platform as resolvePlatform } from "../../lib/platform";
+
+export interface ConfigProviderProps
+  extends Partial<ConfigProviderContextInterface> {
+  /**
+   * @deprecated будет удалено в 5.0.0, устанавливать тему следует через appearance
+   * Цветовая схема приложения
+   */
+  scheme?: AppearanceScheme;
+  /**
+    Локаль ([список](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry))
+   */
+  locale?: string;
+}
+
+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,
+  webviewType = WebviewType.VKAPPS,
+  isWebView = vkBridge.isWebView(),
+  transitionMotionEnabled = true,
+  platform = resolvePlatform(),
+  hasNewTokens = false,
+  appearance,
+  scheme,
+  locale = "ru",
+}) => {
+  const normalizedScheme = normalizeScheme({
+    scheme,
+    platform,
+    appearance,
+  });
+  const { document } = useDOM();
+  const target = document?.body;
+
+  useIsomorphicLayoutEffect(() => {
+    if (normalizedScheme === "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", normalizedScheme);
+    return () => target?.removeAttribute("scheme");
+  }, [normalizedScheme]);
+
+  const realScheme = useSchemeDetector(target, normalizedScheme);
+  const derivedAppearance = deriveAppearance(realScheme);
+
+  useIsomorphicLayoutEffect(() => {
+    const VKUITokensClassName = generateVKUITokensClassName(
+      platform,
+      derivedAppearance
+    );
+
+    target?.classList.add(VKUITokensClassName);
+
+    return () => {
+      target?.classList.remove(VKUITokensClassName);
+    };
+  }, [platform, derivedAppearance]);
+
+  const configContext = useObjectMemo({
+    webviewType,
+    isWebView,
+    transitionMotionEnabled,
+    hasNewTokens,
+    platform,
+    scheme,
+    appearance: appearance || derivedAppearance,
+  });
+
+  return (
+    <ConfigProviderContext.Provider value={configContext}>
+      <LocaleProviderContext.Provider value={locale}>
+        <AppearanceProvider appearance={configContext.appearance}>
+          {children}
+        </AppearanceProvider>
+      </LocaleProviderContext.Provider>
+    </ConfigProviderContext.Provider>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default ConfigProvider;

package/src/components/ConfigProvider/ConfigProviderContext.tsx

@@ -0,0 +1,48 @@
+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 ConfigProviderContext =
+  React.createContext<ConfigProviderContextInterface>({
+    webviewType: WebviewType.VKAPPS,
+    isWebView: vkBridge.isWebView(),
+    transitionMotionEnabled: true,
+    platform: platform(),
+    hasNewTokens: false,
+    // appearance is auto-detected by default
+    // appearance: Appearance.LIGHT,
+  });

package/src/components/ConfigProvider/Readme.md

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

package/src/components/ContentCard/ContentCard.css

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

@@ -0,0 +1,152 @@
+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="1" 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">{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

@@ -0,0 +1,65 @@
+Компонент на базе [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

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