@vkontakte/vkui 5.8.2 → 5.9.1

package/src/components/View/utils.ts

@@ -0,0 +1,28 @@
+import { getOverflowAncestors } from '../../lib/floating';
+import { TouchEvent } from '../Touch/Touch';
+
+const swipeBackExcludedSelector = 'input, textarea, [data-vkui-swipe-back=false]';
+
+export function swipeBackExcluded(e: TouchEvent) {
+  const target = e.originalEvent.target as HTMLElement;
+  // eslint-disable-next-line no-restricted-properties
+  return Boolean(target?.closest?.(swipeBackExcludedSelector));
+}
+
+export function hasHorizontalScrollableElementWithScrolledToLeft(node: HTMLElement) {
+  return getOverflowAncestors(node).some((node) =>
+    'scrollLeft' in node ? node.scrollLeft > 0 : false,
+  );
+}
+
+export const SWIPE_BACK_EDGE_SIZE_THRESHOLD = 20;
+
+export const SWIPE_BACK_SHIFT_THRESHOLD = 10;
+
+export const getSwipeBackPredicates = (startX: number, shiftX: number, innerWidth: number) => {
+  const swipedToOpposite = shiftX < 0;
+  const swipeBackTriggered = shiftX >= SWIPE_BACK_SHIFT_THRESHOLD;
+  const viewportStartEdgeTouched = startX <= SWIPE_BACK_EDGE_SIZE_THRESHOLD;
+  const viewportEndEdgeTouched = startX >= innerWidth - SWIPE_BACK_EDGE_SIZE_THRESHOLD;
+  return { swipedToOpposite, swipeBackTriggered, viewportStartEdgeTouched, viewportEndEdgeTouched };
+};

package/src/components/VisuallyHidden/VisuallyHidden.module.css

@@ -0,0 +1,15 @@
+/* stylelint-disable declaration-no-important */
+.VisuallyHidden {
+  position: absolute !important;
+  height: 1px !important;
+  width: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important; /* Fix for https://github.com/twbs/bootstrap/issues/25686 */
+  white-space: nowrap !important;
+  clip: rect(0, 0, 0, 0) !important;
+  clip-path: inset(50%);
+  overflow: hidden !important;
+  border: 0 !important;
+  opacity: 0;
+}
+/* stylelint-enable declaration-no-important */

package/src/components/VisuallyHidden/VisuallyHidden.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { HasComponent, HasRootRef } from '../../types';
+import { RootComponent } from '../RootComponent/RootComponent';
+import styles from './VisuallyHidden.module.css';
+
+interface VisuallyHiddenProps
+  extends React.AllHTMLAttributes<HTMLElement>,
+    HasRootRef<HTMLElement>,
+    HasComponent {}
+
+/**
+ * Компонент-обертка. Позволяет скрыть контент визуально, но оставить его
+ * доступным для ассистивных технологий. По умолчанию — `span`.
+ *
+ * @since v5.4.0
+ * @see https://vkcom.github.io/VKUI/#/VisuallyHidden
+ */
+export const VisuallyHidden = ({ Component = 'span', ...restProps }: VisuallyHiddenProps) => (
+  <RootComponent Component={Component} {...restProps} baseClassName={styles['VisuallyHidden']} />
+);

package/src/components/VisuallyHiddenInput/VisuallyHiddenInput.module.css

@@ -0,0 +1,9 @@
+.VisuallyHiddenInput {
+  position: absolute;
+  height: 1px;
+  white-space: nowrap;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  opacity: 0;
+}

package/src/components/VisuallyHiddenInput/VisuallyHiddenInput.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { warnOnce } from '../../lib/warnOnce';
+import { HasRef } from '../../types';
+import styles from './VisuallyHiddenInput.module.css';
+
+const warn = warnOnce('VisuallyHiddenInput');
+export interface VisuallyHiddenInputProps
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    HasRef<HTMLInputElement> {}
+/**
+ * @deprecated v5.4.0
+ *
+ * Компонент устарел и будет удален в v6. Используйте
+ * `<VisuallyHidden Component="input" />`
+ */
+export const VisuallyHiddenInput = ({
+  getRef,
+  className,
+  ...restProps
+}: VisuallyHiddenInputProps) => {
+  if (process.env.NODE_ENV === 'development') {
+    warn(
+      'Компонент устарел и будет удален в v6. Используйте https://vkcom.github.io/VKUI/#/VisuallyHidden',
+    );
+  }
+
+  return (
+    <input
+      {...restProps}
+      className={classNames(styles['VisuallyHiddenInput'], className)}
+      ref={getRef}
+    />
+  );
+};

package/src/components/WriteBar/WriteBar.module.css

@@ -0,0 +1,106 @@
+.WriteBar {
+  background: var(--vkui--color_background_modal);
+}
+
+.WriteBar--shadow {
+  box-shadow: var(--vkui--elevation3);
+}
+
+.WriteBar__before,
+.WriteBar__form,
+.WriteBar__after {
+  display: flex;
+  align-items: flex-end;
+}
+
+.WriteBar__form {
+  min-height: 52px;
+}
+
+.WriteBar__formIn {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  position: relative;
+}
+
+.WriteBar__textarea {
+  box-sizing: border-box;
+  width: 100%;
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  resize: none;
+  color: var(--vkui--color_text_primary);
+  -webkit-appearance: none;
+  max-height: 120px;
+}
+
+.WriteBar__textarea::placeholder {
+  color: var(--vkui--color_text_subhead);
+  /* Для Firefox */
+  opacity: 1;
+}
+
+.WriteBar__textarea:focus {
+  outline: none;
+}
+
+.WriteBar__inlineAfter {
+  display: flex;
+  align-items: flex-end;
+}
+
+.WriteBar__before {
+  padding-left: 4px;
+}
+
+.WriteBar__after {
+  padding-right: 4px;
+}
+
+.WriteBar__textarea {
+  height: 52px;
+  padding: 16px 12px;
+}
+
+/**
+ * iOS
+ */
+.WriteBar--ios {
+  background: var(--vkui--color_background_content);
+}
+
+.WriteBar--ios .WriteBar__before,
+.WriteBar--ios .WriteBar__after {
+  padding: 0 4px;
+}
+
+.WriteBar--ios .WriteBar__formIn {
+  box-sizing: border-box;
+  background-color: var(--vkui--color_write_bar_input_background);
+  border: var(--vkui--size_border--regular) solid var(--vkui--color_write_bar_input_border);
+  border-radius: 18px;
+  margin: 8px 0;
+}
+
+.WriteBar--ios .WriteBar__formIn:first-child {
+  margin-left: 12px;
+}
+
+.WriteBar--ios .WriteBar__inlineAfter {
+  /* чтобы правильно выровнять иконку, нужно учитывать border */
+  --vkui_internal--writebar-right-gap: calc(-1 * var(--vkui--size_border--regular));
+  --vkui_internal--writebar-vertical-gap: calc(var(--vkui_internal--writebar-right-gap) - 8px);
+
+  margin-right: var(--vkui_internal--writebar-right-gap);
+  margin-top: var(--vkui_internal--writebar-vertical-gap);
+  margin-bottom: var(--vkui_internal--writebar-vertical-gap);
+}
+
+.WriteBar--ios .WriteBar__textarea {
+  height: 36px;
+  padding: 6px 0 6px 12px;
+}

package/src/components/WriteBar/WriteBar.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { useEnsuredControl } from '../../hooks/useEnsuredControl';
+import { useExternRef } from '../../hooks/useExternRef';
+import { usePlatform } from '../../hooks/usePlatform';
+import { Platform } from '../../lib/platform';
+import { HasRef, HasRootRef } from '../../types';
+import { Headline } from '../Typography/Headline/Headline';
+import { Title } from '../Typography/Title/Title';
+import { TypographyProps } from '../Typography/Typography';
+import styles from './WriteBar.module.css';
+
+export interface WriteBarProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    HasRootRef<HTMLDivElement>,
+    HasRef<HTMLTextAreaElement> {
+  /**
+   * Содержимое, отображаемое слева от поля ввода.
+   */
+  before?: React.ReactNode;
+  /**
+   * Содержимое, отображаемое поверх поля ввода (актуально для iOS)
+   */
+  inlineAfter?: React.ReactNode;
+  /**
+   * Содержимое, отображаемое справа от поля ввода
+   */
+  after?: React.ReactNode;
+  /**
+   * Вызывается при смене высоты поля ввода
+   */
+  onHeightChange?: VoidFunction;
+  /**
+   * Добавляет тень вокруг поля ввода
+   */
+  shadow?: boolean;
+
+  children?: never;
+}
+
+const WriteBarTypography = (props: TypographyProps) => {
+  const platform = usePlatform();
+
+  if (platform === Platform.IOS) {
+    return <Title {...props} level="3" weight="3" />;
+  }
+
+  return <Headline {...props} />;
+};
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/WriteBar
+ */
+export const WriteBar = ({
+  className,
+  style,
+  before,
+  inlineAfter,
+  after,
+  getRootRef,
+  getRef,
+  onHeightChange,
+  shadow = false,
+  defaultValue,
+  ...restProps
+}: WriteBarProps) => {
+  const platform = usePlatform();
+
+  const [value, onChange] = useEnsuredControl({
+    defaultValue,
+    ...restProps,
+  });
+
+  const textareaRef = useExternRef(getRef);
+  const currentScrollHeight = React.useRef<number>();
+
+  const resize = React.useCallback(() => {
+    const textareaEl = textareaRef.current;
+    if (!textareaEl) {
+      return;
+    }
+
+    if (textareaEl.offsetParent) {
+      textareaEl.style.height = '';
+      textareaEl.style.height = `${textareaEl.scrollHeight}px`;
+
+      if (textareaEl.scrollHeight !== currentScrollHeight.current && onHeightChange) {
+        onHeightChange();
+        currentScrollHeight.current = textareaEl.scrollHeight;
+      }
+    }
+  }, [onHeightChange, textareaRef]);
+
+  React.useEffect(resize, [resize, value, platform]);
+
+  return (
+    <div
+      ref={getRootRef}
+      className={classNames(
+        styles['WriteBar'],
+        platform === Platform.IOS && styles['WriteBar--ios'],
+        shadow && styles['WriteBar--shadow'],
+        className,
+      )}
+      style={style}
+    >
+      <div className={styles['WriteBar__form']}>
+        {hasReactNode(before) && <div className={styles['WriteBar__before']}>{before}</div>}
+
+        <div className={styles['WriteBar__formIn']}>
+          <WriteBarTypography
+            {...restProps}
+            Component="textarea"
+            className={styles['WriteBar__textarea']}
+            onChange={onChange}
+            getRootRef={textareaRef}
+            value={value}
+          />
+          {hasReactNode(inlineAfter) && (
+            <div className={styles['WriteBar__inlineAfter']}>{inlineAfter}</div>
+          )}
+        </div>
+
+        {hasReactNode(after) && <div className={styles['WriteBar__after']}>{after}</div>}
+      </div>
+    </div>
+  );
+};

package/src/components/WriteBarIcon/WriteBarIcon.module.css

@@ -0,0 +1,81 @@
+.WriteBarIcon {
+  background: none;
+  border: 0;
+  position: relative;
+  color: var(--vkui--color_icon_secondary);
+  height: 52px;
+  width: 44px;
+  cursor: pointer;
+  border-radius: var(--vkui--size_border_radius--regular);
+  margin: 0;
+  padding: 0;
+}
+
+.WriteBarIcon__in {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.WriteBarIcon:disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.WriteBarIcon__active {
+  opacity: 0.6;
+}
+
+.WriteBarIcon__counter {
+  position: absolute;
+  top: 6px;
+  right: 2px;
+  box-shadow: 0 0 0 2px var(--vkui--color_background_modal);
+}
+
+.WriteBarIcon--ios .WriteBarIcon__counter {
+  box-shadow: 0 0 0 2px var(--vkui--color_background_content);
+}
+
+.WriteBarIcon.WriteBarIcon--mode-send,
+.WriteBarIcon.WriteBarIcon--mode-done {
+  color: var(--vkui--color_icon_accent);
+}
+
+/**
+ * iOS
+ */
+.WriteBarIcon--ios {
+  color: var(--vkui--color_icon_accent_themed);
+}
+
+.WriteBarIcon--ios.WriteBarIcon--mode-send,
+.WriteBarIcon--ios.WriteBarIcon--mode-done {
+  color: var(--vkui--color_icon_accent_themed);
+  width: 48px;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.WriteBarIcon--ios.WriteBarIcon--mode-send,
+.WriteBarIcon--ios.WriteBarIcon--mode-done {
+  /* компенсируем отступ WriteBar__after справа */
+  margin-right: -4px;
+}
+
+.WriteBarIcon--ios.WriteBarIcon--mode-send:only-child,
+.WriteBarIcon--ios.WriteBarIcon--mode-done:only-child {
+  /* для одной иконки нужно компенсировать отступ WriteBar__after слева */
+  margin-left: -4px;
+}
+
+/**
+ * Impact:
+ * Counter
+ */
+.WriteBarIcon {
+  --vkui_internal--counter_inherit_color: var(--vkui--color_text_contrast_themed);
+  --vkui_internal--counter_inherit_background: var(--vkui--color_background_positive);
+}

package/src/components/WriteBarIcon/WriteBarIcon.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import {
+  Icon24Attach,
+  Icon24CheckCircleOutline,
+  Icon24Send,
+  Icon28AddCircleOutline,
+  Icon28AttachOutline,
+  Icon28CheckCircleOutline,
+  Icon28Send,
+  Icon48WritebarDone,
+  Icon48WritebarSend,
+} from '@vkontakte/icons';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { usePlatform } from '../../hooks/usePlatform';
+import { Platform } from '../../lib/platform';
+import { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';
+import { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';
+import { Counter } from '../Counter/Counter';
+import { Tappable } from '../Tappable/Tappable';
+import styles from './WriteBarIcon.module.css';
+
+export interface WriteBarIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Предустановленные типы кнопок в WriteBar для отрисовки иконки в зависимости от платформы.
+   * Если передать валидное значение для этого свойства, `children` игнорируется.
+   *
+   * - `attach` – иконка прикрепления.
+   * - `send` – иконка отправки.
+   * - `done` – иконка отправки в режиме редактирования.
+   */
+  mode?: 'attach' | 'send' | 'done';
+  /**
+   * Значение счётчика для кнопки. Например, для количества прикреплённых файлов.
+   */
+  count?: number;
+}
+
+const warn = warnOnce('WriteBarIcon');
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/WriteBarIcon
+ */
+export const WriteBarIcon = ({
+  mode,
+  children,
+  count,
+  className,
+  ...restProps
+}: WriteBarIconProps) => {
+  const platform = usePlatform();
+  let modeLabel: string | undefined = undefined;
+
+  let predefinedIcons;
+  switch (mode) {
+    case 'attach':
+      predefinedIcons = {
+        IconCompact: platform === Platform.IOS ? Icon28AddCircleOutline : Icon24Attach,
+        IconRegular: platform === Platform.IOS ? Icon28AddCircleOutline : Icon28AttachOutline,
+      };
+      modeLabel = 'Прикрепить файл';
+      break;
+
+    case 'send':
+      predefinedIcons = {
+        IconCompact: platform === Platform.IOS ? Icon48WritebarSend : Icon24Send,
+        IconRegular: platform === Platform.IOS ? Icon48WritebarSend : Icon28Send,
+      };
+      modeLabel = 'Отправить';
+      break;
+
+    case 'done':
+      predefinedIcons = {
+        IconCompact: platform === Platform.IOS ? Icon48WritebarDone : Icon24CheckCircleOutline,
+        IconRegular: platform === Platform.IOS ? Icon48WritebarDone : Icon28CheckCircleOutline,
+      };
+      modeLabel = 'Готово';
+      break;
+
+    default:
+      break;
+  }
+
+  if (process.env.NODE_ENV === 'development') {
+    const isAccessible = !modeLabel && (!restProps['aria-label'] || restProps['aria-labelledby']);
+
+    if (!isAccessible) {
+      warn(COMMON_WARNINGS.a11y['button-name'], 'error');
+    }
+  }
+
+  return (
+    <Tappable
+      aria-label={modeLabel}
+      {...restProps}
+      Component="button"
+      hasHover={false}
+      activeMode={styles['WriteBarIcon__active']}
+      className={classNames(
+        styles['WriteBarIcon'],
+        platform === Platform.IOS && styles['WriteBarIcon--ios'],
+        mode === 'send' && styles['WriteBarIcon--mode-send'],
+        mode === 'done' && styles['WriteBarIcon--mode-done'],
+        className,
+      )}
+    >
+      <span className={styles['WriteBarIcon__in']}>
+        {predefinedIcons ? <AdaptiveIconRenderer {...predefinedIcons} /> : children}
+      </span>
+      {hasReactNode(count) && (
+        <Counter className={styles['WriteBarIcon__counter']} size="s">
+          {count}
+        </Counter>
+      )}
+    </Tappable>
+  );
+};

package/src/helpers/appearance.ts

@@ -0,0 +1,39 @@
+import { AppearanceSchemeType, AppearanceType } from '@vkontakte/vk-bridge';
+
+export enum Scheme {
+  BRIGHT_LIGHT = 'bright_light',
+  SPACE_GRAY = 'space_gray',
+  VKCOM_LIGHT = 'vkcom_light',
+  VKCOM_DARK = 'vkcom_dark',
+}
+
+export type AppearanceScheme = AppearanceSchemeType | Scheme.VKCOM_DARK | Scheme.VKCOM_LIGHT;
+
+export enum Appearance {
+  DARK = 'dark',
+  LIGHT = 'light',
+}
+
+export const deriveAppearance = (scheme: AppearanceScheme | undefined): AppearanceType =>
+  scheme === Scheme.SPACE_GRAY || scheme === Scheme.VKCOM_DARK ? 'dark' : 'light';
+
+export interface VKBridgeConfigData {
+  appearance?: AppearanceType;
+  scheme: AppearanceScheme;
+}
+
+/**
+ * TODO [>=6]: удалить `helpers/appearance.ts` (#5049)
+ * @deprecated v5.8.0
+ */
+export function resolveAppearance(data: VKBridgeConfigData): AppearanceType | null {
+  const { scheme, appearance } = data;
+
+  // appearance пока приходит только на IOS и ANDROID
+  if (appearance) {
+    return appearance;
+  }
+
+  // Проверяем scheme если appearance не пришел
+  return deriveAppearance(scheme);
+}

package/src/helpers/avatar.ts

@@ -0,0 +1,8 @@
+import type { InitialsAvatarNumberGradients } from '../components/Avatar/Avatar';
+
+/**
+ * Вычисляет цвет InitialsAvatar на основании переданного идентификатора объекта
+ */
+export function calcInitialsAvatarColor(objectId: number): InitialsAvatarNumberGradients {
+  return ((objectId % 6) + 1) as InitialsAvatarNumberGradients;
+}

package/src/helpers/generateVKUITokensClassName.ts

@@ -0,0 +1,20 @@
+import { Platform } from '../lib/platform';
+
+export const generateVKUITokensClassName = (platform: string, appearance: string): string => {
+  let tokensPlatform;
+  switch (platform) {
+    case Platform.ANDROID:
+      tokensPlatform = 'vkBase';
+      break;
+    case Platform.IOS:
+      tokensPlatform = 'vkIOS';
+      break;
+    case Platform.VKCOM:
+      tokensPlatform = 'vkCom';
+      break;
+    default:
+      tokensPlatform = platform;
+  }
+
+  return `vkui--${tokensPlatform}--${appearance}`;
+};

package/src/helpers/getOrDefault.ts

@@ -0,0 +1,6 @@
+/**
+ * Вернёт первый аргумент если он есть, иначе вернёт значение по умолчанию.
+ */
+export function getOrDefault<T>(value: T | undefined, defaultValue: T): T {
+  return value ?? defaultValue;
+}

package/src/helpers/getPlatformClassName.ts

@@ -0,0 +1,32 @@
+// TODO [>=6]: удалить этот хеллпер
+import { platform, PlatformType } from '../lib/platform';
+
+/**
+ * Подставляйте соответствующий селектор самостоятельно.
+ *
+ * @deprecated
+ *
+ */
+export function getPlatformClassName(base: string, osname?: PlatformType): string;
+/**
+ * Подставляйте соответствующий селектор самостоятельно.
+ *
+ * @deprecated
+ */
+export function getPlatformClassName<Styles extends Record<string, string>>(
+  base: keyof Styles,
+  osname?: PlatformType,
+  styles?: Styles,
+): string | undefined;
+export function getPlatformClassName<Styles extends Record<string, string>>(
+  base: keyof Styles,
+  osname: PlatformType = platform(),
+  /**
+   * Note: ввиду того, что Typescript не поддерживает `typescript-plugin-css-modules` во время компиляции,
+   *  не удалось покрыть дженерик типом параметр `styles`. Поэтому может вернуться undefined.
+   */
+  styles?: Styles,
+): string | undefined {
+  const platformClassName = `${String(base)}--${osname}`;
+  return styles ? styles[platformClassName] : platformClassName;
+}