@vkontakte/vkui 5.8.2 → 5.9.1

package/src/components/Touch/Touch.tsx

@@ -0,0 +1,283 @@
+import * as React from 'react';
+import { useEventListener } from '../../hooks/useEventListener';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useDOM } from '../../lib/dom';
+import { coordX, coordY, getSupportedEvents, touchEnabled, VKUITouchEvent } from '../../lib/touch';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { HasComponent, HasRootRef } from '../../types';
+
+export interface TouchProps
+  extends React.AllHTMLAttributes<HTMLElement>,
+    HasRootRef<HTMLElement>,
+    HasComponent {
+  /**
+   * Привязать onEnter и onLeave через pointer-events - работает на disabled-инпутах
+   */
+  usePointerHover?: boolean;
+  useCapture?: boolean;
+  slideThreshold?: number;
+  noSlideClick?: boolean;
+  onEnter?: HoverHandler;
+  onLeave?: HoverHandler;
+  onStart?: TouchEventHandler;
+  onStartX?: TouchEventHandler;
+  onStartY?: TouchEventHandler;
+  onMove?: TouchEventHandler;
+  onMoveX?: TouchEventHandler;
+  onMoveY?: TouchEventHandler;
+  onEnd?: TouchEventHandler;
+  onEndX?: TouchEventHandler;
+  onEndY?: TouchEventHandler;
+  stopPropagation?: boolean;
+}
+
+export interface Gesture {
+  startX: number;
+  startY: number;
+  startT: Date;
+  duration: number;
+  isPressed: boolean;
+  isY: boolean;
+  isX: boolean;
+  isSlideX: boolean;
+  isSlideY: boolean;
+  isSlide: boolean;
+  shiftX: number;
+  shiftY: number;
+  shiftXAbs: number;
+  shiftYAbs: number;
+}
+
+export interface TouchEvent extends Gesture {
+  originalEvent: VKUITouchEvent;
+}
+
+type HoverHandler = (outputEvent: MouseEvent) => void;
+export type TouchEventHandler = (e: TouchEvent) => void;
+export type ClickHandler = (e: React.MouseEvent<HTMLElement>) => void;
+export type DragHandler = (e: React.DragEvent<HTMLElement>) => void;
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Touch
+ */
+export const Touch = ({
+  onStart,
+  onStartX,
+  onStartY,
+  onMove: _onMove,
+  onMoveX,
+  onMoveY,
+  onLeave,
+  onEnter,
+  onEnd: _onEnd,
+  onEndX,
+  onEndY,
+  onClickCapture,
+  usePointerHover,
+  slideThreshold = 5,
+  useCapture = false,
+  Component = 'div',
+  getRootRef,
+  noSlideClick = false,
+  stopPropagation = false,
+  ...restProps
+}: TouchProps) => {
+  const { document } = useDOM();
+  const events = React.useMemo(getSupportedEvents, []);
+  const didSlide = React.useRef(false);
+  const gesture = React.useRef<Partial<Gesture> | null>(null);
+  const handle = (e: VKUITouchEvent, handlers: Array<TouchEventHandler | undefined | false>) => {
+    stopPropagation && e.stopPropagation();
+    handlers.forEach((cb) => {
+      const duration = Date.now() - (gesture.current?.startT?.getTime() ?? 0);
+      cb && cb({ ...(gesture.current as Gesture), duration, originalEvent: e });
+    });
+  };
+
+  const enterHandler = useEventListener(usePointerHover ? 'pointerenter' : 'mouseenter', onEnter);
+  const leaveHandler = useEventListener(usePointerHover ? 'pointerleave' : 'mouseleave', onLeave);
+  const startHandler = useEventListener(
+    events[0],
+    (e: VKUITouchEvent) => {
+      gesture.current = initGesture(coordX(e), coordY(e));
+
+      handle(e, [onStart, onStartX, onStartY]);
+      // 1 line, 2 bad specs, 2 workarounds:
+      subscribe(
+        touchEnabled()
+          ? // Touch events fire on initial target, and won't bubble if its removed
+            // see: #235, #1968, https://stackoverflow.com/a/45760014
+            (e.target as HTMLElement)
+          : // Mouse events fire on the element under pointer, so we lose move / end
+            // if pointer goes outside container.
+            // Can be fixed by PointerEvents' setPointerCapture later
+            document,
+      );
+    },
+    { capture: useCapture, passive: false },
+  );
+  const containerRef = useExternRef(getRootRef);
+
+  useIsomorphicLayoutEffect(() => {
+    const el = containerRef.current;
+    if (el) {
+      enterHandler.add(el);
+      leaveHandler.add(el);
+      startHandler.add(el);
+    }
+  }, [Component]);
+
+  function onMove(e: VKUITouchEvent) {
+    const { isPressed, isX, isY, startX = 0, startY = 0 } = gesture.current ?? {};
+
+    if (isPressed) {
+      // смещения
+      const shiftX = coordX(e) - startX;
+      const shiftY = coordY(e) - startY;
+
+      // абсолютные значения смещений
+      const shiftXAbs = Math.abs(shiftX);
+      const shiftYAbs = Math.abs(shiftY);
+
+      // Если определяем мультитач, то прерываем жест
+      if (!!e.touches && e.touches.length > 1) {
+        return onEnd(e);
+      }
+
+      // если мы ещё не определились
+      if (!isX && !isY) {
+        const willBeX = shiftXAbs >= slideThreshold && shiftXAbs > shiftYAbs;
+        const willBeY = shiftYAbs >= slideThreshold && shiftYAbs > shiftXAbs;
+        const willBeSlidedX = willBeX && (!!onMoveX || !!_onMove);
+        const willBeSlidedY = willBeY && (!!onMoveY || !!_onMove);
+
+        if (gesture.current) {
+          Object.assign(gesture.current, {
+            isY: willBeY,
+            isX: willBeX,
+            isSlideX: willBeSlidedX,
+            isSlideY: willBeSlidedY,
+            isSlide: willBeSlidedX || willBeSlidedY,
+          });
+        }
+      }
+
+      if (gesture.current?.isSlide) {
+        Object.assign(gesture.current, {
+          shiftX,
+          shiftY,
+          shiftXAbs,
+          shiftYAbs,
+        });
+
+        handle(e, [
+          _onMove,
+          gesture.current.isSlideX && onMoveX,
+          gesture.current.isSlideY && onMoveY,
+        ]);
+      }
+    }
+  }
+
+  function onEnd(e: VKUITouchEvent) {
+    const { isPressed, isSlide, isSlideX, isSlideY } = gesture.current ?? {};
+
+    if (isPressed) {
+      handle(e, [_onEnd, isSlideY && onEndY, isSlideX && onEndX]);
+    }
+
+    const isTouchEnabled = touchEnabled();
+
+    if (isTouchEnabled && isSlide) {
+      // https://github.com/VKCOM/VKUI/issues/4414
+      // если тач-устройство и был зафиксирован touchmove,
+      // то событие клика не вызывается
+      didSlide.current = false;
+    } else {
+      didSlide.current = Boolean(isSlide);
+    }
+    gesture.current = {};
+
+    // Если это был тач-евент, симулируем отмену hover
+    if (isTouchEnabled) {
+      onLeave && onLeave(e);
+    }
+    unsubscribe();
+  }
+
+  const listenerParams = { capture: useCapture, passive: false };
+  const listeners = [
+    useEventListener(events[1], onMove, listenerParams),
+    useEventListener(events[2], onEnd, listenerParams),
+    useEventListener(events[3], onEnd, listenerParams),
+  ];
+  function subscribe(el: HTMLElement | Document | null | undefined) {
+    if (el) {
+      listeners.forEach((l) => l.add(el));
+    }
+  }
+  function unsubscribe() {
+    listeners.forEach((l) => l.remove());
+  }
+
+  /**
+   * Обработчик событий dragstart
+   * Отменяет нативное браузерное поведение для вложенных ссылок и изображений
+   */
+  const onDragStart = (e: React.DragEvent<HTMLElement>) => {
+    const target = e.target as HTMLElement;
+    if (target.tagName === 'A' || target.tagName === 'IMG') {
+      e.preventDefault();
+    }
+  };
+
+  /**
+   * Обработчик клика по компоненту
+   * Отменяет переход по вложенной ссылке, если был зафиксирован свайп
+   */
+  const postGestureClick: typeof onClickCapture = (e) => {
+    if (!didSlide.current) {
+      return onClickCapture && onClickCapture(e);
+    }
+
+    if (noSlideClick) {
+      e.stopPropagation();
+
+      // https://github.com/VKCOM/VKUI/issues/1977
+      // https://github.com/VKCOM/VKUI/issues/3892
+      e.preventDefault();
+    } else {
+      onClickCapture && onClickCapture(e);
+    }
+
+    didSlide.current = false;
+  };
+
+  return (
+    <Component
+      {...restProps}
+      onDragStart={onDragStart}
+      onClickCapture={postGestureClick}
+      ref={containerRef}
+    />
+  );
+};
+
+function initGesture(startX: number, startY: number): Gesture {
+  return {
+    startX,
+    startY,
+    startT: new Date(),
+    duration: 0,
+    isPressed: true,
+    isY: false,
+    isX: false,
+    isSlideX: false,
+    isSlideY: false,
+    isSlide: false,
+    shiftX: 0,
+    shiftY: 0,
+    shiftXAbs: 0,
+    shiftYAbs: 0,
+  };
+}

package/src/components/Touch/TouchContext.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+/**
+ * Контекст для компонентов, использующих Touch в качестве корневой обёртки,
+ * и для которых важно не предотвращать всплытие тач-событий от дочерних компонентов
+ */
+const TouchRootContext: React.Context<boolean> = React.createContext<boolean>(false);
+
+// eslint-disable-next-line import/no-default-export
+export default TouchRootContext;

package/src/components/Typography/Caption/Caption.module.css

@@ -0,0 +1,45 @@
+.Caption--caps {
+  text-transform: uppercase;
+}
+
+.Caption--level-1 {
+  font-size: var(--vkui--font_caption1--font_size--regular);
+  line-height: var(--vkui--font_caption1--line_height--regular);
+  font-weight: var(--vkui--font_caption1--font_weight--regular);
+  font-family: var(--vkui--font_caption1--font_family--regular);
+}
+
+.Caption--level-1.Caption--caps {
+  font-size: var(--vkui--font_caption1_caps--font_size--regular);
+  line-height: var(--vkui--font_caption1_caps--line_height--regular);
+  font-weight: var(--vkui--font_caption1_caps--font_weight--regular);
+  font-family: var(--vkui--font_caption1_caps--font_family--regular);
+}
+
+.Caption--level-2 {
+  font-size: var(--vkui--font_caption2--font_size--regular);
+  line-height: var(--vkui--font_caption2--line_height--regular);
+  font-weight: var(--vkui--font_caption2--font_weight--regular);
+  font-family: var(--vkui--font_caption2--font_family--regular);
+}
+
+.Caption--level-2.Caption--caps {
+  font-size: var(--vkui--font_caption2_caps--font_size--regular);
+  line-height: var(--vkui--font_caption2_caps--line_height--regular);
+  font-weight: var(--vkui--font_caption2_caps--font_weight--regular);
+  font-family: var(--vkui--font_caption2_caps--font_family--regular);
+}
+
+.Caption--level-3 {
+  font-size: var(--vkui--font_caption3--font_size--regular);
+  line-height: var(--vkui--font_caption3--line_height--regular);
+  font-weight: var(--vkui--font_caption3--font_weight--regular);
+  font-family: var(--vkui--font_caption3--font_family--regular);
+}
+
+.Caption--level-3.Caption--caps {
+  font-size: var(--vkui--font_caption3_caps--font_size--regular);
+  line-height: var(--vkui--font_caption3_caps--line_height--regular);
+  font-weight: var(--vkui--font_caption3_caps--font_weight--regular);
+  font-family: var(--vkui--font_caption3_caps--font_family--regular);
+}

package/src/components/Typography/Caption/Caption.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { HasCaps, Typography, TypographyProps } from '../Typography';
+import styles from './Caption.module.css';
+
+const stylesLevel = {
+  '1': styles['Caption--level-1'],
+  '2': styles['Caption--level-2'],
+  '3': styles['Caption--level-3'],
+};
+
+export interface CaptionProps extends TypographyProps, HasCaps {
+  level?: '1' | '2' | '3';
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Caption
+ */
+export const Caption = ({
+  className,
+  level = '1',
+  caps,
+  Component = 'span',
+  normalize = true,
+  ...restProps
+}: CaptionProps) => {
+  return (
+    <Typography
+      Component={Component}
+      normalize={normalize}
+      className={classNames(className, caps && styles['Caption--caps'], stylesLevel[level])}
+      {...restProps}
+    />
+  );
+};

package/src/components/Typography/Footnote/Footnote.module.css

@@ -0,0 +1,14 @@
+.Footnote {
+  font-size: var(--vkui--font_footnote--font_size--regular);
+  line-height: var(--vkui--font_footnote--line_height--regular);
+  font-weight: var(--vkui--font_footnote--font_weight--regular);
+  font-family: var(--vkui--font_footnote--font_family--regular);
+}
+
+.Footnote--caps {
+  font-size: var(--vkui--font_footnote_caps--font_size--regular);
+  line-height: var(--vkui--font_footnote_caps--line_height--regular);
+  font-weight: var(--vkui--font_footnote_caps--font_weight--regular);
+  font-family: var(--vkui--font_footnote_caps--font_family--regular);
+  text-transform: uppercase;
+}

package/src/components/Typography/Footnote/Footnote.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { HasCaps, Typography, TypographyProps } from '../Typography';
+import styles from './Footnote.module.css';
+
+export interface FootnoteProps extends TypographyProps, HasCaps {}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Footnote
+ */
+export const Footnote = ({
+  className,
+  caps,
+  Component = 'span',
+  normalize = true,
+  ...restProps
+}: FootnoteProps) => (
+  <Typography
+    Component={Component}
+    normalize={normalize}
+    className={classNames(className, styles['Footnote'], caps && styles['Footnote--caps'])}
+    {...restProps}
+  />
+);

package/src/components/Typography/Headline/Headline.module.css

@@ -0,0 +1,37 @@
+.Headline--level-1 {
+  font-size: var(--vkui--font_headline1--font_size--regular);
+  line-height: var(--vkui--font_headline1--line_height--regular);
+  font-weight: var(--vkui--font_headline1--font_weight--regular);
+  font-family: var(--vkui--font_headline1--font_family--regular);
+}
+
+.Headline--sizeY-compact.Headline--level-1 {
+  font-size: var(--vkui--font_headline1--font_size--compact);
+  line-height: var(--vkui--font_headline1--line_height--compact);
+}
+
+@media (--sizeY-compact) {
+  .Headline--sizeY-none.Headline--level-1 {
+    font-size: var(--vkui--font_headline1--font_size--compact);
+    line-height: var(--vkui--font_headline1--line_height--compact);
+  }
+}
+
+.Headline--level-2 {
+  font-size: var(--vkui--font_headline2--font_size--regular);
+  line-height: var(--vkui--font_headline2--line_height--regular);
+  font-weight: var(--vkui--font_headline2--font_weight--regular);
+  font-family: var(--vkui--font_headline2--font_family--regular);
+}
+
+.Headline--sizeY-compact.Headline--level-2 {
+  font-size: var(--vkui--font_headline2--font_size--compact);
+  line-height: var(--vkui--font_headline2--line_height--compact);
+}
+
+@media (--sizeY-compact) {
+  .Headline--sizeY-none.Headline--level-2 {
+    font-size: var(--vkui--font_headline2--font_size--compact);
+    line-height: var(--vkui--font_headline2--line_height--compact);
+  }
+}

package/src/components/Typography/Headline/Headline.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../../hooks/useAdaptivity';
+import { SizeType } from '../../../lib/adaptivity';
+import { Typography, TypographyProps } from '../Typography';
+import styles from './Headline.module.css';
+
+const stylesLevel = {
+  '1': styles['Headline--level-1'],
+  '2': styles['Headline--level-2'],
+};
+
+const sizeYClassNames = {
+  none: styles['Headline--sizeY-none'],
+  [SizeType.COMPACT]: styles['Headline--sizeY-compact'],
+};
+
+export interface HeadlineProps extends TypographyProps {
+  level?: '1' | '2';
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Headline
+ */
+export const Headline = ({
+  className,
+  weight = '3',
+  level = '1',
+  Component = 'h4',
+  normalize = true,
+  ...restProps
+}: HeadlineProps) => {
+  const { sizeY = 'none' } = useAdaptivity();
+
+  return (
+    <Typography
+      Component={Component}
+      normalize={normalize}
+      weight={weight}
+      className={classNames(
+        className,
+        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],
+        stylesLevel[level],
+      )}
+      {...restProps}
+    />
+  );
+};

package/src/components/Typography/Paragraph/Paragraph.module.css

@@ -0,0 +1,6 @@
+.Paragraph {
+  font-size: var(--vkui--font_paragraph--font_size--regular);
+  line-height: var(--vkui--font_paragraph--line_height--regular);
+  font-weight: var(--vkui--font_paragraph--font_weight--regular);
+  font-family: var(--vkui--font_paragraph--font_family--regular);
+}

package/src/components/Typography/Paragraph/Paragraph.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { Typography, TypographyProps } from '../Typography';
+import styles from './Paragraph.module.css';
+
+export type ParagraphProps = TypographyProps;
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Paragraph
+ */
+export const Paragraph = ({
+  className,
+  Component = 'span',
+  normalize = false,
+  ...restProps
+}: ParagraphProps) => {
+  return (
+    <Typography
+      Component={Component}
+      normalize={normalize}
+      className={classNames(className, styles['Paragraph'])}
+      {...restProps}
+    />
+  );
+};

package/src/components/Typography/Subhead/Subhead.module.css

@@ -0,0 +1,18 @@
+.Subhead {
+  font-size: var(--vkui--font_subhead--font_size--regular);
+  line-height: var(--vkui--font_subhead--line_height--regular);
+  font-weight: var(--vkui--font_subhead--font_weight--regular);
+  font-family: var(--vkui--font_subhead--font_family--regular);
+}
+
+.Subhead--sizeY-compact {
+  font-size: var(--vkui--font_subhead--font_size--compact);
+  line-height: var(--vkui--font_subhead--line_height--compact);
+}
+
+@media (--sizeY-compact) {
+  .Subhead--sizeY-none {
+    font-size: var(--vkui--font_subhead--font_size--compact);
+    line-height: var(--vkui--font_subhead--line_height--compact);
+  }
+}

package/src/components/Typography/Subhead/Subhead.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../../hooks/useAdaptivity';
+import { SizeType } from '../../../lib/adaptivity';
+import { Typography, TypographyProps } from '../Typography';
+import styles from './Subhead.module.css';
+
+const sizeYClassNames = {
+  none: styles['Subhead--sizeY-none'],
+  [SizeType.COMPACT]: styles['Subhead--sizeY-compact'],
+};
+
+export type SubheadProps = TypographyProps;
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Subhead
+ */
+export const Subhead = ({
+  className,
+  Component = 'h5',
+  normalize = true,
+  ...restProps
+}: SubheadProps) => {
+  const { sizeY = 'none' } = useAdaptivity();
+
+  return (
+    <Typography
+      Component={Component}
+      normalize={normalize}
+      className={classNames(
+        className,
+        styles['Subhead'],
+        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],
+      )}
+      {...restProps}
+    />
+  );
+};

package/src/components/Typography/Text/Text.module.css

@@ -0,0 +1,18 @@
+.Text {
+  font-size: var(--vkui--font_text--font_size--regular);
+  line-height: var(--vkui--font_text--line_height--regular);
+  font-weight: var(--vkui--font_text--font_weight--regular);
+  font-family: var(--vkui--font_text--font_family--regular);
+}
+
+.Text--sizeY-compact {
+  font-size: var(--vkui--font_text--font_size--compact);
+  line-height: var(--vkui--font_text--line_height--compact);
+}
+
+@media (--sizeY-compact) {
+  .Text--sizeY-none {
+    font-size: var(--vkui--font_text--font_size--compact);
+    line-height: var(--vkui--font_text--line_height--compact);
+  }
+}

package/src/components/Typography/Text/Text.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../../hooks/useAdaptivity';
+import { SizeType } from '../../../lib/adaptivity';
+import { Typography, TypographyProps } from '../Typography';
+import styles from './Text.module.css';
+
+const sizeYClassNames = {
+  none: styles['Text--sizeY-none'],
+  [SizeType.COMPACT]: styles['Text--sizeY-compact'],
+};
+
+export type TextProps = TypographyProps;
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Text
+ */
+export const Text = ({
+  className,
+  Component = 'span',
+  normalize = true,
+  ...restProps
+}: TextProps) => {
+  const { sizeY = 'none' } = useAdaptivity();
+
+  return (
+    <Typography
+      Component={Component}
+      normalize={normalize}
+      className={classNames(
+        className,
+        styles['Text'],
+        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],
+      )}
+      {...restProps}
+    />
+  );
+};

package/src/components/Typography/Title/Title.module.css

@@ -0,0 +1,20 @@
+.Title--level-1 {
+  font-size: var(--vkui--font_title1--font_size--regular);
+  line-height: var(--vkui--font_title1--line_height--regular);
+  font-weight: var(--vkui--font_title1--font_weight--regular);
+  font-family: var(--vkui--font_title1--font_family--regular);
+}
+
+.Title--level-2 {
+  font-size: var(--vkui--font_title2--font_size--regular);
+  line-height: var(--vkui--font_title2--line_height--regular);
+  font-weight: var(--vkui--font_title2--font_weight--regular);
+  font-family: var(--vkui--font_title2--font_family--regular);
+}
+
+.Title--level-3 {
+  font-size: var(--vkui--font_title3--font_size--regular);
+  line-height: var(--vkui--font_title3--line_height--regular);
+  font-weight: var(--vkui--font_title3--font_weight--regular);
+  font-family: var(--vkui--font_title3--font_family--regular);
+}