@vkontakte/vkui 5.8.2 → 5.9.1

package/src/components/ConfigProvider/ConfigProviderContext.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import vkBridge from '@vkontakte/vk-bridge';
+import type { AppearanceType } from '../../lib/appearance';
+import { platform, PlatformType } from '../../lib/platform';
+
+/**
+ * TODO [>=6]: удалить enum (#5049).
+ *
+ * @deprecated v5.8.0
+ */
+export enum WebviewType {
+  VKAPPS = 'vkapps',
+  INTERNAL = 'internal',
+}
+
+export interface ConfigProviderContextInterface {
+  /**
+   * Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере.
+   *
+   * В условиях когда:
+   * - `isWebView={true}`
+   * - platform="ios"
+   *
+   * для компонента `View` включается возможность навигации через смахивание.
+   *
+   * По умолчанию определяется через `bridge.isWebView()`.
+   *
+   * > ⚠️ В **v6** будет удалена завязка на `@vkontakte/vk-bridge` (см. https://github.com/VKCOM/VKUI/issues/5049).
+   * > Если вы используете `@vkontakte/vk-bridge`, то передавать `bridge.isWebView()` необходимо самостоятельно.
+   */
+  isWebView: boolean; // TODO [>=6]: удалить коммент про v6 @vkontakte/vk-bridge выше
+  /**
+   * Тип вебвью.<br>
+   * В случае `WebviewType.VKAPPS` интерфейс будет адаптирован для отображения в вебвью Mini Apps (системные контролы в правой части шапки)
+   *
+   * > ⚠️ В **v6** свойство будет удалено (см. https://github.com/VKCOM/VKUI/issues/5049).
+   * >
+   * > Используйте вместо него новые свойства:
+   * >
+   * > - `webviewType={WebviewType.INTERNAL}` -> `hasCustomPanelHeaderAfter={false}`.
+   * > - `webviewType={WebviewType.VKAPPS}` -> `hasCustomPanelHeaderAfter={true}`. При необходимости передайте `customPanelHeaderAfterMinWidth={<value>}` (по умолчанию равен `90`).
+   *
+   * @deprecated v5.8.0
+   */
+  webviewType?: WebviewType.INTERNAL | WebviewType.VKAPPS;
+  /**
+   * При `true` слот `after` у `PanelHeader` игнорируется под размещение пользовательского
+   * "плавающего" элемента (например, панель управления webview).
+   *
+   * > Note: Правило не распространяется на `PanelHeader` внутри модальных окон, предоставляемых
+   * > библиотекой.
+   *
+   * > ⚠️ В **v6** свойство будет по умолчанию `false` (см. https://github.com/VKCOM/VKUI/issues/5049).
+   */
+  hasCustomPanelHeaderAfter: boolean;
+  /**
+   * Задаёт необходимый минимальную ширину слота `after` в `PanelHeader` под пользовательский
+   * "плавающий" элемент (например, ширина панели управления webview).
+   *
+   * Учитывается только при `hasCustomPanelHeaderAfter={true}` (см. документацию `hasCustomPanelHeaderAfter`).
+   *
+   * @default 90
+   */
+  customPanelHeaderAfterMinWidth: number | string;
+  /**
+   * Тип цветовой схемы – `light` или `dark`
+   */
+  appearance: AppearanceType | undefined;
+  /**
+   * Включена ли анимация переходов между экранами в `Root` и `View`
+   */
+  transitionMotionEnabled: boolean;
+  /**
+   * Платформа
+   */
+  platform: PlatformType;
+  /**
+   * Строка с языковой меткой BCP 47
+   */
+  locale: string;
+}
+
+export const ConfigProviderContext = React.createContext<ConfigProviderContextInterface>({
+  // TODO [>=6]: удалить свойство (#5049).
+  webviewType: undefined,
+  // TODO [>=6]: сделать по умолчанию `false` (#5049).
+  hasCustomPanelHeaderAfter: true,
+  customPanelHeaderAfterMinWidth: 90,
+  // TODO [>=6]: удалить использование vkBridge. Использовать `false` вместо него (#5049).
+  isWebView: vkBridge.isWebView(),
+  transitionMotionEnabled: true,
+  platform: platform(),
+  appearance: undefined, // undefined обозначает что тема должна определиться автоматически
+  locale: 'ru',
+});
+
+export const useConfigProvider = () => React.useContext(ConfigProviderContext);

package/src/components/ConfigProvider/ConfigProviderOverride.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { useObjectMemo } from '../../hooks/useObjectMemo';
+import {
+  ConfigProviderContext,
+  ConfigProviderContextInterface,
+  useConfigProvider,
+} from './ConfigProviderContext';
+
+export interface ConfigProviderOverrideProps extends Partial<ConfigProviderContextInterface> {
+  children: React.ReactNode;
+}
+
+/**
+ * Компонент предназначен для перебивания одного из значений контекста
+ */
+export function ConfigProviderOverride({ children, ...contextValue }: ConfigProviderOverrideProps) {
+  const parentConfig = useConfigProvider();
+
+  const configContext = useObjectMemo({
+    ...parentConfig,
+    ...contextValue,
+  });
+
+  return (
+    <ConfigProviderContext.Provider value={configContext}>
+      {children}
+    </ConfigProviderContext.Provider>
+  );
+}

package/src/components/ContentCard/ContentCard.module.css

@@ -0,0 +1,31 @@
+.ContentCard--disabled {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+.ContentCard__body {
+  padding: var(--vkui--size_base_padding_vertical--regular)
+    var(--vkui--size_base_padding_horizontal--regular);
+}
+
+.ContentCard__tappable {
+  border-radius: var(--vkui--size_card_border_radius--regular);
+  text-decoration: none;
+  color: var(--vkui--color_text_primary);
+  display: block;
+}
+
+.ContentCard__img {
+  object-fit: cover;
+  display: block;
+  border-radius: var(--vkui--size_card_border_radius--regular)
+    var(--vkui--size_card_border_radius--regular) 0 0;
+}
+
+.ContentCard__text:not(:last-child) {
+  margin-bottom: 4px;
+}
+
+.ContentCard__caption,
+.ContentCard__subtitle {
+  color: var(--vkui--color_text_secondary);
+}

package/src/components/ContentCard/ContentCard.tsx

@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { HasRef, HasRootRef } from '../../types';
+import { Card, CardProps } from '../Card/Card';
+import { Tappable, TappableProps } from '../Tappable/Tappable';
+import { Caption } from '../Typography/Caption/Caption';
+import { Footnote } from '../Typography/Footnote/Footnote';
+import { Headline } from '../Typography/Headline/Headline';
+import { Text } from '../Typography/Text/Text';
+import styles from './ContentCard.module.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;
+  /**
+    Максимальная высота изображения
+   */
+  maxHeight?: number;
+  mode?: CardProps['mode'];
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/ContentCard
+ */
+export const ContentCard = ({
+  subtitle,
+  header,
+  text,
+  caption,
+  // card props
+  className,
+  mode = 'shadow',
+  style,
+  getRootRef,
+  // img props
+  getRef,
+  maxHeight,
+  src,
+  srcSet,
+  alt = '',
+  width,
+  height,
+  crossOrigin,
+  decoding,
+  loading,
+  referrerPolicy,
+  sizes,
+  useMap,
+  hasHover = false,
+  hasActive = false,
+  ...restProps
+}: ContentCardProps) => {
+  return (
+    <Card
+      mode={mode}
+      getRootRef={getRootRef}
+      style={style}
+      className={classNames(restProps.disabled && styles['ContentCard--disabled'], className)}
+    >
+      <Tappable
+        {...restProps}
+        disabled={restProps.disabled || (!restProps.onClick && !restProps.href)}
+        hasHover={hasHover}
+        hasActive={hasActive}
+        className={styles['ContentCard__tappable']}
+      >
+        {(src || srcSet) && (
+          <img
+            ref={getRef}
+            className={styles['ContentCard__img']}
+            src={src}
+            srcSet={srcSet}
+            alt={alt}
+            crossOrigin={crossOrigin}
+            decoding={decoding}
+            loading={loading}
+            referrerPolicy={referrerPolicy}
+            sizes={sizes}
+            useMap={useMap}
+            height={height}
+            style={{ maxHeight }}
+            width="100%"
+          />
+        )}
+        <div className={styles['ContentCard__body']}>
+          {hasReactNode(subtitle) && (
+            <Caption
+              className={classNames(styles['ContentCard__text'], styles['ContentCard__subtitle'])}
+              weight="1"
+              level="3"
+              caps
+            >
+              {subtitle}
+            </Caption>
+          )}
+          {hasReactNode(header) && (
+            <Headline className={styles['ContentCard__text']} weight="2" level="1">
+              {header}
+            </Headline>
+          )}
+          {hasReactNode(text) && <Text className={styles['ContentCard__text']}>{text}</Text>}
+          {hasReactNode(caption) && (
+            <Footnote
+              className={classNames(styles['ContentCard__text'], styles['ContentCard__caption'])}
+            >
+              {caption}
+            </Footnote>
+          )}
+        </div>
+      </Tappable>
+    </Card>
+  );
+};

package/src/components/Counter/Counter.module.css

@@ -0,0 +1,70 @@
+.Counter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: 5px;
+  padding-right: 5px;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.Counter--mode-primary {
+  background: var(--vkui--color_background_accent);
+  color: var(--vkui--color_text_contrast);
+}
+
+.Counter--mode-secondary {
+  background: var(--vkui--color_icon_secondary);
+  color: var(--vkui--color_text_contrast_themed);
+}
+
+.Counter--mode-prominent {
+  background: var(--vkui--color_accent_red);
+  color: var(--vkui--color_text_contrast);
+}
+
+.Counter--mode-contrast {
+  background: var(--vkui--color_background_content);
+  color: var(--vkui--color_text_accent_themed);
+}
+
+.Counter--size-m {
+  height: 24px;
+  min-width: 24px;
+  border-radius: 12px;
+}
+
+.Counter--size-s {
+  height: 18px;
+  min-width: 18px;
+  border-radius: 9px;
+}
+
+.Counter--mode-inherit {
+  background-color: var(
+    --vkui_internal--counter_inherit_background,
+    var(--vkui--color_icon_secondary)
+  );
+  color: var(--vkui_internal--counter_inherit_color, var(--vkui--color_text_contrast_themed));
+}
+
+/**
+ * CMP:
+ * PanelHeaderButton
+ */
+:global(.vkuiInternalPanelHeaderButton) .Counter {
+  position: absolute;
+  padding: 0;
+  top: 8px;
+  right: 2px;
+}
+
+/**
+ * CMP:
+ * TabbarItem
+ */
+:global(.vkuiInternalTabbarItem__label) .Counter {
+  position: absolute;
+  top: -2px;
+  right: -9px;
+}

package/src/components/Counter/Counter.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { HTMLAttributesWithRootRef } from '../../types';
+import { Caption } from '../Typography/Caption/Caption';
+import { Headline } from '../Typography/Headline/Headline';
+import styles from './Counter.module.css';
+
+const modeClassNames = {
+  secondary: styles['Counter--mode-secondary'],
+  primary: styles['Counter--mode-primary'],
+  prominent: styles['Counter--mode-prominent'],
+  contrast: styles['Counter--mode-contrast'],
+  inherit: styles['Counter--mode-inherit'],
+};
+
+const sizeClassNames = {
+  s: styles['Counter--size-s'],
+  m: styles['Counter--size-m'],
+};
+
+export interface CounterProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {
+  /**
+   * Тип счетчика.  В режиме `inherit` если компонент находится в кнопке, то
+   * цвета зависят от кнопки. Если компонент находится вне кнопки, применяется
+   * режим `secondary`
+   */
+  mode?: 'secondary' | 'primary' | 'prominent' | 'contrast' | 'inherit';
+  size?: 's' | 'm';
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Counter
+ */
+export const Counter = ({
+  mode = 'inherit',
+  size = 'm',
+  children,
+  className,
+  ...restProps
+}: CounterProps) => {
+  if (React.Children.count(children) === 0) {
+    return null;
+  }
+
+  const CounterTypography = size === 's' ? Caption : Headline;
+  const counterLevel = size === 's' ? '1' : '2';
+
+  return (
+    <CounterTypography
+      {...restProps}
+      Component="span"
+      className={classNames(
+        'vkuiInternalCounter',
+        styles['Counter'],
+        modeClassNames[mode],
+        sizeClassNames[size],
+        className,
+      )}
+      level={counterLevel}
+    >
+      {children}
+    </CounterTypography>
+  );
+};

package/src/components/CustomScrollView/CustomScrollView.module.css

@@ -0,0 +1,82 @@
+.CustomScrollView {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.CustomScrollView__box {
+  max-height: inherit;
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  padding-right: 100px;
+  position: relative;
+
+  /**
+   * Для удаление скролла в Firefox.
+   * В версии ниже 64 будет виден скролл, но это не ломает функциональность.
+   */
+  scrollbar-width: none;
+}
+
+.CustomScrollView__box::-webkit-scrollbar {
+  display: none;
+}
+
+.CustomScrollView__barY:active + .CustomScrollView__box {
+  pointer-events: none;
+}
+
+.CustomScrollView__barY {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 10px;
+}
+
+.CustomScrollView__trackerY {
+  width: 10px;
+  box-sizing: border-box;
+  padding: 4px 4px 4px 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  user-select: none;
+}
+
+.CustomScrollView__trackerY--hidden {
+  opacity: 0;
+  transition: opacity 200ms;
+}
+
+.CustomScrollView__trackerY::before {
+  content: '';
+  opacity: 0.48;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-color: var(--vkui--color_icon_medium);
+  border-radius: 12px;
+  transition: transform 200ms, opacity 200ms;
+}
+
+.CustomScrollView__trackerY:hover::before,
+.CustomScrollView__trackerY:active::before {
+  opacity: 0.8;
+  transform: scaleX(1.3333);
+}
+
+/**
+ * CMP:
+ * CustomSelectDropdown
+ */
+:global(.vkuiInternalCustomSelectDropdown) .CustomScrollView__box {
+  padding-right: 8px;
+}
+
+:global(.vkuiInternalCustomSelectDropdown--wide) .CustomScrollView__box {
+  padding-right: 0;
+}

package/src/components/CustomScrollView/CustomScrollView.tsx

@@ -0,0 +1,196 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useEventListener } from '../../hooks/useEventListener';
+import { useExternRef } from '../../hooks/useExternRef';
+import { DOMProps, useDOM } from '../../lib/dom';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { stopPropagation } from '../../lib/utils';
+import { TrackerOptionsProps, useTrackerVisibility } from './useTrackerVisibility';
+import styles from './CustomScrollView.module.css';
+
+export interface CustomScrollViewProps extends DOMProps, TrackerOptionsProps {
+  windowResize?: boolean;
+  boxRef?: React.Ref<HTMLDivElement>;
+  className?: HTMLDivElement['className'];
+  onScroll?(event: React.UIEvent<HTMLDivElement>): void;
+  children: React.ReactNode;
+}
+
+export const CustomScrollView = ({
+  className,
+  children,
+  boxRef: externalBoxRef,
+  windowResize,
+  autoHideScrollbar = false,
+  autoHideScrollbarDelay,
+  onScroll,
+}: CustomScrollViewProps) => {
+  const { document, window } = useDOM();
+
+  const ratio = React.useRef(NaN);
+  const lastTrackerTop = React.useRef(0);
+  const clientHeight = React.useRef(0);
+  const trackerHeight = React.useRef(0);
+  const scrollHeight = React.useRef(0);
+  const transformProp = React.useRef('');
+  const startY = React.useRef(0);
+  const trackerTop = React.useRef(0);
+
+  const boxRef = useExternRef(externalBoxRef);
+
+  const barY = React.useRef<HTMLDivElement>(null);
+  const trackerY = React.useRef<HTMLDivElement>(null);
+
+  const setTrackerPosition = (scrollTop: number) => {
+    lastTrackerTop.current = scrollTop;
+    if (trackerY.current !== null) {
+      (trackerY.current.style as any)[transformProp.current] = `translate(0, ${scrollTop}px)`;
+    }
+  };
+
+  const setTrackerPositionFromScroll = (scrollTop: number) => {
+    const progress = scrollTop / (scrollHeight.current - clientHeight.current);
+    setTrackerPosition((clientHeight.current - trackerHeight.current) * progress);
+  };
+
+  const resize = () => {
+    if (!boxRef.current || !barY.current || !trackerY.current) {
+      return;
+    }
+    const localClientHeight = boxRef.current.clientHeight;
+    const localScrollHeight = boxRef.current.scrollHeight;
+    const localRatio = localClientHeight / localScrollHeight;
+    const localTrackerHeight = Math.max(localClientHeight * localRatio, 40);
+
+    ratio.current = localRatio;
+    clientHeight.current = localClientHeight;
+    scrollHeight.current = localScrollHeight;
+    trackerHeight.current = localTrackerHeight;
+
+    if (localRatio >= 1) {
+      barY.current.style.display = 'none';
+    } else {
+      barY.current.style.display = '';
+      trackerY.current.style.height = `${localTrackerHeight}px`;
+      setTrackerPositionFromScroll(boxRef.current.scrollTop);
+    }
+  };
+
+  const resizeHandler = useEventListener('resize', resize);
+
+  useIsomorphicLayoutEffect(() => {
+    if (windowResize && window) {
+      resizeHandler.add(window);
+    }
+  }, [windowResize, window]);
+
+  useIsomorphicLayoutEffect(() => {
+    let style = trackerY.current?.style;
+    let prop = '';
+    if (style !== undefined) {
+      if ('transform' in style) {
+        prop = 'transform';
+      } else if ('webkitTransform' in style) {
+        prop = 'webkitTransform';
+      }
+    }
+    transformProp.current = prop;
+  }, []);
+
+  useIsomorphicLayoutEffect(resize);
+
+  const setScrollPositionFromTracker = (trackerTop: number) => {
+    const progress = trackerTop / (clientHeight.current - trackerHeight.current);
+    if (boxRef.current !== null) {
+      boxRef.current.scrollTop = (scrollHeight.current - clientHeight.current) * progress;
+    }
+  };
+
+  const onMove = (e: MouseEvent) => {
+    e.preventDefault();
+    const diff = e.clientY - startY.current;
+    const position = Math.min(
+      Math.max(trackerTop.current + diff, 0),
+      clientHeight.current - trackerHeight.current,
+    );
+
+    setScrollPositionFromTracker(position);
+  };
+
+  const {
+    trackerVisible,
+    onTargetScroll,
+    onTrackerDragStart,
+    onTrackerDragStop,
+    onTrackerMouseEnter,
+    onTrackerMouseLeave,
+  } = useTrackerVisibility(autoHideScrollbar, autoHideScrollbarDelay);
+
+  const onUp = (e: MouseEvent) => {
+    e.preventDefault();
+
+    if (autoHideScrollbar) {
+      onTrackerDragStop();
+    }
+
+    unsubscribe();
+  };
+
+  const scroll = (event: React.UIEvent<HTMLDivElement>) => {
+    if (ratio.current >= 1 || !boxRef.current) {
+      return;
+    }
+
+    if (autoHideScrollbar) {
+      onTargetScroll();
+    }
+
+    setTrackerPositionFromScroll(boxRef.current.scrollTop);
+    onScroll?.(event);
+  };
+
+  const listeners = [useEventListener('mousemove', onMove), useEventListener('mouseup', onUp)];
+
+  function subscribe(el: Document | undefined) {
+    if (el) {
+      listeners.forEach((l) => l.add(el));
+    }
+  }
+
+  function unsubscribe() {
+    listeners.forEach((l) => l.remove());
+  }
+
+  const onDragStart = (e: React.MouseEvent) => {
+    e.preventDefault();
+    startY.current = e.clientY;
+    trackerTop.current = lastTrackerTop.current;
+
+    if (autoHideScrollbar) {
+      onTrackerDragStart();
+    }
+
+    subscribe(document);
+  };
+
+  return (
+    <div className={classNames(styles['CustomScrollView'], className)}>
+      <div className={styles['CustomScrollView__box']} tabIndex={-1} ref={boxRef} onScroll={scroll}>
+        {children}
+      </div>
+
+      <div className={styles['CustomScrollView__barY']} ref={barY} onClick={stopPropagation}>
+        <div
+          className={classNames(
+            styles['CustomScrollView__trackerY'],
+            !trackerVisible && styles['CustomScrollView__trackerY--hidden'],
+          )}
+          onMouseEnter={autoHideScrollbar ? onTrackerMouseEnter : undefined}
+          onMouseLeave={autoHideScrollbar ? onTrackerMouseLeave : undefined}
+          ref={trackerY}
+          onMouseDown={onDragStart}
+        />
+      </div>
+    </div>
+  );
+};