@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/Tappable/Tappable.tsx

@@ -0,0 +1,349 @@
+import * as React from "react";
+import mitt from "mitt";
+import { noop } from "@vkontakte/vkjs";
+import { Touch, TouchEvent, TouchProps } from "../Touch/Touch";
+import TouchRootContext from "../Touch/TouchContext";
+import { classNames } from "../../lib/classNames";
+import { getClassName } from "../../helpers/getClassName";
+import { ANDROID } from "../../lib/platform";
+import { getOffsetRect } from "../../lib/offset";
+import { coordX, coordY } from "../../lib/touch";
+import { HasComponent, HasRootRef } from "../../types";
+import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
+import { shouldTriggerClickOnEnterOrSpace } from "../../lib/accessibility";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { FocusVisible, FocusVisibleMode } from "../FocusVisible/FocusVisible";
+import { useTimeout } from "../../hooks/useTimeout";
+import { useExternRef } from "../../hooks/useExternRef";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useFocusVisible } from "../../hooks/useFocusVisible";
+import { callMultiple } from "../../lib/callMultiple";
+import { useBooleanState } from "../../hooks/useBooleanState";
+import "./Tappable.css";
+
+export interface TappableProps
+  extends Omit<
+      React.AllHTMLAttributes<HTMLElement>,
+      | "onTouchStart"
+      | "onTouchMove"
+      | "onTouchEnd"
+      | "onTouchCancel"
+      | "onMouseDown"
+      | "onMouseMove"
+      | "onMouseUp"
+      | "onMouseLeave"
+    >,
+    HasRootRef<HTMLElement>,
+    AdaptivityProps,
+    HasComponent,
+    Pick<TouchProps, "onStart" | "onEnd" | "onMove"> {
+  /**
+   * Длительность показа active-состояния
+   */
+  activeEffectDelay?: number;
+  stopPropagation?: boolean;
+  /**
+   * Указывает, должен ли компонент реагировать на hover-состояние
+   */
+  hasHover?: boolean;
+  /**
+   * Указывает, должен ли компонент реагировать на active-состояние
+   */
+  hasActive?: boolean;
+  /**
+   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active
+   */
+  activeMode?: "opacity" | "background" | string;
+  /**
+   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover
+   */
+  hoverMode?: "opacity" | "background" | string;
+  /**
+   * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible
+   */
+  focusVisibleMode?: FocusVisibleMode | string;
+  onEnter?: (outputEvent: MouseEvent) => void;
+  onLeave?: (outputEvent: MouseEvent) => void;
+}
+
+interface Wave {
+  x: number;
+  y: number;
+  id: string;
+}
+
+export interface RootComponentProps extends TouchProps {
+  ref?: React.Ref<HTMLElement>;
+}
+
+export const ACTIVE_DELAY = 70;
+export const ACTIVE_EFFECT_DELAY = 600;
+
+const activeBus = mitt<{ active: string }>();
+const TapState = { none: 0, pending: 1, active: 2, exiting: 3 } as const;
+
+type TappableContextInterface = { onHoverChange: (s: boolean) => void };
+const TappableContext = React.createContext<TappableContextInterface>({
+  onHoverChange: noop,
+});
+
+function useActivity(hasActive: boolean, stopDelay: number) {
+  const id = React.useMemo(
+    () => Math.round(Math.random() * 1e8).toString(16),
+    []
+  );
+
+  const [activity, setActivity] = React.useState<
+    typeof TapState[keyof typeof TapState]
+  >(TapState.none);
+  const _stop = () => setActivity(TapState.none);
+  const start = () => hasActive && setActivity(TapState.active);
+  const delayStart = () => {
+    hasActive && setActivity(TapState.pending);
+  };
+
+  const activeTimeout = useTimeout(start, ACTIVE_DELAY);
+  const stopTimeout = useTimeout(_stop, stopDelay);
+
+  useIsomorphicLayoutEffect(() => {
+    if (activity === TapState.pending) {
+      activeTimeout.set();
+      return activeTimeout.clear;
+    }
+    if (activity === TapState.exiting) {
+      return stopTimeout.clear;
+    }
+    if (activity === TapState.active) {
+      activeBus.emit("active", id);
+    }
+    return noop;
+  }, [activity]);
+
+  useIsomorphicLayoutEffect(() => {
+    if (activity === TapState.none) {
+      return noop;
+    }
+    const onActiveChange = (activeId: string) => {
+      activeId !== id && _stop();
+    };
+    activeBus.on("active", onActiveChange);
+    return () => activeBus.off("active", onActiveChange);
+  }, [activity === TapState.none]);
+
+  useIsomorphicLayoutEffect(() => {
+    !hasActive && _stop();
+  }, [hasActive]);
+
+  const stop = (delay?: number) => {
+    if (delay) {
+      setActivity(TapState.exiting);
+      return stopTimeout.set(delay);
+    }
+    _stop();
+  };
+
+  return [activity, { delayStart, start, stop }] as const;
+}
+
+const Tappable: React.FC<TappableProps> = ({
+  children,
+  Component,
+  onClick,
+  onKeyDown: _onKeyDown,
+  activeEffectDelay = ACTIVE_EFFECT_DELAY,
+  stopPropagation = false,
+  getRootRef,
+  sizeX,
+  hasMouse,
+  deviceHasHover,
+  hasHover: _hasHover = true,
+  hoverMode = "background",
+  hasActive: _hasActive = true,
+  activeMode = "background",
+  focusVisibleMode = "inside",
+  onEnter,
+  onLeave,
+  ...props
+}: TappableProps) => {
+  Component = Component || ((props.href ? "a" : "div") as React.ElementType);
+
+  const { onHoverChange } = React.useContext(TappableContext);
+  const insideTouchRoot = React.useContext(TouchRootContext);
+  const platform = usePlatform();
+  const { focusVisible, onBlur, onFocus } = useFocusVisible();
+
+  const [clicks, setClicks] = React.useState<Wave[]>([]);
+  const [childHover, setChildHover] = React.useState(false);
+  const {
+    value: _hovered,
+    setTrue: setHoveredTrue,
+    setFalse: setHoveredFalse,
+  } = useBooleanState(false);
+
+  const hovered = _hovered && !props.disabled;
+  const hasActive = _hasActive && !childHover && !props.disabled;
+  const hasHover = deviceHasHover && _hasHover && !childHover;
+  const isCustomElement =
+    Component !== "a" && Component !== "button" && !props.contentEditable;
+  const isPresetHoverMode = ["opacity", "background"].includes(hoverMode);
+  const isPresetActiveMode = ["opacity", "background"].includes(activeMode);
+  const isPresetFocusVisibleMode = ["inside", "outside"].includes(
+    focusVisibleMode
+  );
+
+  const [activity, { start, stop, delayStart }] = useActivity(
+    hasActive,
+    activeEffectDelay
+  );
+  const active = activity === TapState.active || activity === TapState.exiting;
+
+  const containerRef = useExternRef(getRootRef);
+
+  // hover propagation
+  const childContext = React.useRef({ onHoverChange: setChildHover }).current;
+  useIsomorphicLayoutEffect(() => {
+    if (!hovered) {
+      return noop;
+    }
+    onHoverChange(true);
+    return () => onHoverChange(false);
+  }, [hovered]);
+
+  /*
+   * [a11y]
+   * Обрабатывает событие onkeydown
+   * для кастомных доступных элементов:
+   * - role="link" (активация по Enter)
+   * - role="button" (активация по Space и Enter)
+   */
+  function onKeyDown(e: React.KeyboardEvent<HTMLElement>) {
+    if (isCustomElement && shouldTriggerClickOnEnterOrSpace(e)) {
+      e.preventDefault();
+      containerRef.current?.click();
+    }
+  }
+
+  function onStart({ originalEvent }: TouchEvent) {
+    if (hasActive) {
+      if (originalEvent.touches && originalEvent.touches.length > 1) {
+        // r сожалению я так и не понял, что это делает и можно ли упихнуть его в Touch
+        return stop();
+      }
+
+      if (platform === ANDROID) {
+        const { top, left } = getOffsetRect(containerRef.current);
+        const x = coordX(originalEvent) - (left ?? 0);
+        const y = coordY(originalEvent) - (top ?? 0);
+        setClicks([...clicks, { x, y, id: Date.now().toString() }]);
+      }
+
+      delayStart();
+    }
+  }
+
+  function onMove({ isSlide }: TouchEvent) {
+    if (isSlide) {
+      stop();
+    }
+  }
+
+  function onEnd({ duration }: TouchEvent) {
+    if (activity === TapState.none) {
+      return;
+    }
+    if (activity === TapState.pending) {
+      // активировать при коротком тапе
+      start();
+    }
+
+    // отключить без задержки при длинном тапе
+    const activeDuraion = duration - ACTIVE_DELAY;
+    stop(activeDuraion >= 100 ? 0 : activeEffectDelay - activeDuraion);
+  }
+
+  const classes = classNames(
+    getClassName("Tappable", platform),
+    `Tappable--sizeX-${sizeX}`,
+    hasHover && hovered && !isPresetHoverMode && hoverMode,
+    hasActive && active && !isPresetActiveMode && activeMode,
+    focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,
+    {
+      "Tappable--active": hasActive && active,
+      "Tappable--mouse": hasMouse,
+      [`Tappable--hover-${hoverMode}`]:
+        hasHover && hovered && isPresetHoverMode,
+      [`Tappable--active-${activeMode}`]:
+        hasActive && active && isPresetActiveMode,
+      "Tappable--focus-visible": focusVisible,
+    }
+  );
+
+  const handlers: RootComponentProps = {
+    onStart: callMultiple(onStart, props.onStart),
+    onMove: callMultiple(onMove, props.onMove),
+    onEnd: callMultiple(onEnd, props.onEnd),
+    onClick,
+    onKeyDown: callMultiple(onKeyDown, _onKeyDown),
+  };
+  const role = props.href ? "link" : "button";
+
+  return (
+    <Touch
+      onEnter={callMultiple(setHoveredTrue, onEnter)}
+      onLeave={callMultiple(setHoveredFalse, onLeave)}
+      type={Component === "button" ? "button" : undefined}
+      tabIndex={isCustomElement && !props.disabled ? 0 : undefined}
+      role={isCustomElement ? role : undefined}
+      aria-disabled={isCustomElement ? props.disabled : undefined}
+      stopPropagation={stopPropagation && !insideTouchRoot && !props.disabled}
+      {...props}
+      slideThreshold={20}
+      usePointerHover
+      vkuiClass={classes}
+      Component={Component}
+      getRootRef={containerRef}
+      onBlur={callMultiple(onBlur, props.onBlur)}
+      onFocus={callMultiple(onFocus, props.onFocus)}
+      {...(props.disabled ? {} : handlers)}
+    >
+      <TappableContext.Provider value={childContext}>
+        {children}
+      </TappableContext.Provider>
+      {platform === ANDROID &&
+        !hasMouse &&
+        hasActive &&
+        activeMode === "background" && (
+          <span aria-hidden="true" vkuiClass="Tappable__waves">
+            {clicks.map((wave) => (
+              <Wave
+                {...wave}
+                key={wave.id}
+                onClear={() =>
+                  setClicks(clicks.filter((c) => c.id !== wave.id))
+                }
+              />
+            ))}
+          </span>
+        )}
+      {hasHover && hoverMode === "background" && (
+        <span aria-hidden="true" vkuiClass="Tappable__hoverShadow" />
+      )}
+      {!props.disabled && isPresetFocusVisibleMode && (
+        <FocusVisible mode={focusVisibleMode as FocusVisibleMode} />
+      )}
+    </Touch>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default withAdaptivity(Tappable, {
+  sizeX: true,
+  hasMouse: true,
+  deviceHasHover: true,
+});
+
+function Wave({ x, y, onClear }: Wave & { onClear: VoidFunction }) {
+  const timeout = useTimeout(onClear, 225);
+  React.useEffect(() => timeout.set(), [timeout]);
+  return <span vkuiClass="Tappable__wave" style={{ top: y, left: x }} />;
+}

package/src/components/TextTooltip/Readme.md

@@ -0,0 +1,11 @@
+> **Важно**
+>
+> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
+
+Тултип, открывающийся при наведении мыши на `children`. В качестве содержимого тултипа рекомендуется использовать только текст.
+
+```jsx { "props": { "layout": false, "iframe": false } }
+<TextTooltip text="Привет">
+  <Button style={{ margin: 20 }}>Наведи</Button>
+</TextTooltip>
+```

package/src/components/TextTooltip/TextTooltip.css

@@ -0,0 +1,18 @@
+.TextTooltip {
+  border-radius: 8px;
+  background: rgba(
+    44,
+    45,
+    46,
+    0.88
+  ); /*TODO узнать у дизайнеров название токена*/
+
+  padding: 8px 12px 9px;
+  color: var(--white);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.04), 0 4px 32px rgba(0, 0, 0, 0.16);
+  animation: vkui-popper-fadein 0.2s ease;
+}
+
+.TextTooltip__arrow {
+  color: rgba(44, 45, 46, 0.88);
+}

package/src/components/TextTooltip/TextTooltip.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { HoverPopper, HoverPopperProps } from "../HoverPopper/HoverPopper";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import { hasReactNode } from "../../lib/utils";
+import Subhead from "../Typography/Subhead/Subhead";
+import { prefixClass } from "../../lib/prefixClass";
+import "./TextTooltip.css";
+
+export interface TextTooltipProps
+  extends Omit<HoverPopperProps, "arrow" | "arrowClassName" | "content"> {
+  /**
+   * Текст тултипа
+   */
+  text?: React.ReactNode;
+  /**
+   * Заголовок тултипа
+   */
+  header?: React.ReactNode;
+}
+
+export const TextTooltip: React.FC<TextTooltipProps> = ({
+  children,
+  text,
+  header,
+  ...popperProps
+}: TextTooltipProps) => {
+  const platform = usePlatform();
+
+  return (
+    <HoverPopper
+      vkuiClass={getClassName("TextTooltip", platform)}
+      arrow
+      arrowClassName={prefixClass("TextTooltip__arrow")}
+      content={
+        <React.Fragment>
+          {hasReactNode(header) && (
+            <Subhead
+              Component="span"
+              weight="2"
+              vkuiClass="TextTooltip__header"
+            >
+              {header}
+            </Subhead>
+          )}
+          {hasReactNode(text) && (
+            <Subhead Component="span" vkuiClass="TextTooltip__text">
+              {text}
+            </Subhead>
+          )}
+        </React.Fragment>
+      }
+      {...popperProps}
+    >
+      {children}
+    </HoverPopper>
+  );
+};

package/src/components/Textarea/Readme.md

@@ -0,0 +1,24 @@
+Надстройка над `<textarea />`. Компонент принимает все валидные для этого элемента свойства.
+
+```jsx
+<View activePanel="panel">
+  <Panel id="panel">
+    <PanelHeader>Textarea</PanelHeader>
+    <Group>
+      <FormItem top="Любимая музыка">
+        <Textarea placeholder="Группы, исполнители, продюсеры" />
+      </FormItem>
+      <FormItem top="Увлечения">
+        <Textarea
+          cols={4}
+          placeholder="Музыка, спорт"
+          defaultValue="Музыка\nСпорт\nФотография\nПлавание\nПрограммирование"
+        />
+      </FormItem>
+      <FormItem top="Прикидываемся Input">
+        <Textarea rows={1} placeholder="Once upon a time" />
+      </FormItem>
+    </Group>
+  </Panel>
+</View>
+```

package/src/components/Textarea/Textarea.css

@@ -0,0 +1,39 @@
+.Textarea {
+  position: relative;
+}
+
+.Textarea__el {
+  margin: 0;
+  width: 100%;
+  display: block;
+  box-sizing: border-box;
+  resize: none;
+  appearance: none;
+  line-height: 20px;
+  font-size: 16px;
+  color: var(--text_primary);
+  padding: 11px;
+  max-height: 196px;
+  border: none;
+  z-index: 2;
+  position: relative;
+  background: transparent;
+}
+
+.Textarea--sizeY-compact .Textarea__el {
+  padding-top: 7px;
+  padding-bottom: 7px;
+  font-size: 15px;
+}
+
+.Textarea__el::placeholder {
+  color: var(--field_text_placeholder);
+}
+
+.Textarea__el:disabled {
+  opacity: 0.4;
+}
+
+.Textarea__el:disabled::placeholder {
+  color: var(--text_secondary);
+}

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,80 @@
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { FormField } from "../FormField/FormField";
+import { HasRef, HasRootRef } from "../../types";
+import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
+import { getClassName } from "../../helpers/getClassName";
+import { useEnsuredControl } from "../../hooks/useEnsuredControl";
+import { useExternRef } from "../../hooks/useExternRef";
+import { usePlatform } from "../../hooks/usePlatform";
+import "./Textarea.css";
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    HasRef<HTMLTextAreaElement>,
+    HasRootRef<HTMLElement>,
+    AdaptivityProps {
+  grow?: boolean;
+  onResize?(el: HTMLTextAreaElement): void;
+  defaultValue?: string;
+}
+
+const Textarea: React.FC<TextareaProps> = React.memo(
+  ({
+    defaultValue = "",
+    grow = true,
+    style,
+    onResize,
+    className,
+    getRootRef,
+    getRef,
+    sizeY,
+    rows = 2,
+    ...restProps
+  }: TextareaProps) => {
+    const [value, onChange] = useEnsuredControl(restProps, { defaultValue });
+    const currentScrollHeight = React.useRef<number>();
+    const elementRef = useExternRef(getRef);
+    const platform = usePlatform();
+
+    // autosize input
+    React.useEffect(() => {
+      const el = elementRef.current;
+
+      if (grow && el?.offsetParent) {
+        el.style.height = "";
+        el.style.height = `${el.scrollHeight}px`;
+
+        if (el.scrollHeight !== currentScrollHeight.current && onResize) {
+          onResize(el);
+          currentScrollHeight.current = el.scrollHeight;
+        }
+      }
+    }, [grow, value, sizeY, elementRef, onResize]);
+
+    return (
+      <FormField
+        vkuiClass={classNames(
+          getClassName("Textarea", platform),
+          `Textarea--sizeY-${sizeY}`
+        )}
+        className={className}
+        style={style}
+        getRootRef={getRootRef}
+        disabled={restProps.disabled}
+      >
+        <textarea
+          {...restProps}
+          rows={rows}
+          vkuiClass="Textarea__el"
+          value={value}
+          onChange={onChange}
+          ref={elementRef}
+        />
+      </FormField>
+    );
+  }
+);
+
+// eslint-disable-next-line import/no-default-export
+export default withAdaptivity(Textarea, { sizeY: true });