@vkontakte/vkui 4.23.0 → 4.24.0

package/src/components/Tappable/Tappable.css

@@ -1,12 +1,14 @@
 .Tappable {
   position: relative;
+  cursor: pointer;
 }
 
-.Tappable:not([disabled]):not([aria-disabled="true"]) {
-  cursor: pointer;
+.Tappable[disabled],
+.Tappable[aria-disabled="true"] {
+  cursor: default;
 }
 
-.AppRoot--keyboard-input .Tappable:focus-visible {
+.Tappable--focus-visible {
   outline: none;
 }
 
@@ -19,7 +21,7 @@
 }
 
 .Tappable--active-opacity.Tappable--active-opacity.Tappable--active-opacity {
-  opacity: .7;
+  opacity: 0.7;
 }
 
 /**
@@ -41,18 +43,18 @@
 }
 
 .Tappable--hover-opacity {
-  opacity: .8;
+  opacity: 0.8;
 }
 
 /**
  * mouse
  */
 .Tappable--mouse {
-  transition: opacity .15s ease-out;
+  transition: opacity 0.15s ease-out;
 }
 
 .Tappable--mouse .Tappable__hoverShadow {
-  transition: background-color .15s ease-out;
+  transition: background-color 0.15s ease-out;
 }
 
 /**
@@ -61,7 +63,7 @@
 .Tappable--ios {
   position: relative;
   border-radius: 10px;
-  transition: background-color .15s ease-out;
+  transition: background-color 0.15s ease-out;
 }
 
 .Tappable--ios.Tappable--active-background {
@@ -73,7 +75,7 @@
  */
 .Tappable--android {
   position: relative;
-  transition: background-color .15s ease-out;
+  transition: background-color 0.15s ease-out;
   border-radius: 8px;
 }
 
@@ -98,17 +100,17 @@
   height: 24px;
   margin: -12px 0 0 -12px;
   opacity: 0;
-  content: '';
+  content: "";
   border-radius: 50%;
-  background: rgba(127, 127, 127, .1);
-  animation: vkui-animation-wave .3s var(--android-easing);
+  background: rgba(127, 127, 127, 0.1);
+  animation: vkui-animation-wave 0.3s var(--android-easing);
 }
 
 /**
  * VKCOM tappable
  */
 .Tappable--vkcom {
-  transition: background-color .15s ease-out;
+  transition: background-color 0.15s ease-out;
   border-radius: 8px;
 }
 

package/src/components/Tappable/Tappable.tsx

@@ -1,24 +1,41 @@
-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 './Tappable.css';
-
-export interface TappableProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, AdaptivityProps, HasComponent {
+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 "./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-состояния
    */
@@ -35,15 +52,15 @@ export interface TappableProps extends React.AllHTMLAttributes<HTMLElement>, Has
   /**
    * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active
    */
-  activeMode?: 'opacity' | 'background' | string;
+  activeMode?: "opacity" | "background" | string;
   /**
    * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover
    */
-  hoverMode?: 'opacity' | 'background' | string;
+  hoverMode?: "opacity" | "background" | string;
   /**
-   * Стиль аутлайна focus visible.
+   * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible
    */
-  focusVisibleMode?: FocusVisibleMode;
+  focusVisibleMode?: FocusVisibleMode | string;
 }
 
 interface Wave {
@@ -63,12 +80,19 @@ 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 });
+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 id = React.useMemo(
+    () => Math.round(Math.random() * 1e8).toString(16),
+    []
+  );
 
-  const [activity, setActivity] = React.useState<typeof TapState[keyof typeof TapState]>(TapState.none);
+  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 = () => {
@@ -87,7 +111,7 @@ function useActivity(hasActive: boolean, stopDelay: number) {
       return stopTimeout.clear;
     }
     if (activity === TapState.active) {
-      activeBus.emit('active', id);
+      activeBus.emit("active", id);
     }
     return noop;
   }, [activity]);
@@ -99,8 +123,8 @@ function useActivity(hasActive: boolean, stopDelay: number) {
     const onActiveChange = (activeId: string) => {
       activeId !== id && _stop();
     };
-    activeBus.on('active', onActiveChange);
-    return () => activeBus.off('active', onActiveChange);
+    activeBus.on("active", onActiveChange);
+    return () => activeBus.off("active", onActiveChange);
   }, [activity === TapState.none]);
 
   useIsomorphicLayoutEffect(() => {
@@ -130,17 +154,18 @@ const Tappable: React.FC<TappableProps> = ({
   hasMouse,
   deviceHasHover,
   hasHover: _hasHover = true,
-  hoverMode = 'background',
+  hoverMode = "background",
   hasActive: _hasActive = true,
-  activeMode = 'background',
-  focusVisibleMode = 'inside',
+  activeMode = "background",
+  focusVisibleMode = "inside",
   ...props
 }: TappableProps) => {
-  Component = Component || (props.href ? 'a' : 'div') as React.ElementType;
+  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);
@@ -149,11 +174,18 @@ const Tappable: React.FC<TappableProps> = ({
   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 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 [activity, { start, stop, delayStart }] = useActivity(
+    hasActive,
+    activeEffectDelay
+  );
   const active = activity === TapState.active || activity === TapState.exiting;
 
   const containerRef = useExternRef(getRootRef);
@@ -180,10 +212,6 @@ const Tappable: React.FC<TappableProps> = ({
       e.preventDefault();
       containerRef.current.click();
     }
-
-    if (typeof _onKeyDown === 'function') {
-      return _onKeyDown(e);
-    }
   }
 
   function onStart({ originalEvent }: TouchEvent) {
@@ -225,25 +253,36 @@ const Tappable: React.FC<TappableProps> = ({
   }
 
   const classes = classNames(
-    getClassName('Tappable', platform),
+    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,
-      [hoverMode]: hasHover && hovered && !isPresetHoverMode,
-      [activeMode]: hasActive && active && !isPresetActiveMode,
-    });
+      "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, onMove, onEnd, onClick, onKeyDown };
-  const role = props.href ? 'link' : 'button';
+  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={() => setHovered(true)}
       onLeave={() => setHovered(false)}
-      type={Component === 'button' ? 'button' : undefined}
+      type={Component === "button" ? "button" : undefined}
       tabIndex={isCustomElement && !props.disabled ? 0 : undefined}
       role={isCustomElement ? role : undefined}
       aria-disabled={isCustomElement ? props.disabled : null}
@@ -254,24 +293,44 @@ const Tappable: React.FC<TappableProps> = ({
       vkuiClass={classes}
       Component={Component}
       getRootRef={containerRef}
-      {...(props.disabled ? {} : handlers)}>
+      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>
+      {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} />
       )}
-      {hasHover && hoverMode === 'background' && <span aria-hidden="true" vkuiClass="Tappable__hoverShadow" />}
-      {!props.disabled && <FocusVisible mode={focusVisibleMode} />}
     </Touch>
   );
 };
 
-export default withAdaptivity(Tappable, { sizeX: true, hasMouse: true, deviceHasHover: true });
+export default withAdaptivity(Tappable, {
+  sizeX: true,
+  hasMouse: true,
+  deviceHasHover: true,
+});
 
 function Wave({ x, y, onClear }: Wave & { onClear: VoidFunction }) {
   const timeout = useTimeout(onClear, 225);

package/src/components/TextTooltip/Readme.md

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

package/src/components/TextTooltip/TextTooltip.css

@@ -1,12 +1,18 @@
 .TextTooltip {
   border-radius: 8px;
-  background: rgba(44, 45, 46, .88); /*TODO узнать у дизайнеров название токена*/
+  background: rgba(
+    44,
+    45,
+    46,
+    0.88
+  ); /*TODO узнать у дизайнеров название токена*/
+
   padding: 8px 12px 9px;
   color: var(--white);
-  box-shadow: 0 0 4px rgba(0, 0, 0, .04), 0 4px 32px rgba(0, 0, 0, .16);
-  animation: vkui-popper-fadein .2s ease;
+  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, .88);
+  color: rgba(44, 45, 46, 0.88);
 }

package/src/components/TextTooltip/TextTooltip.tsx

@@ -1,12 +1,12 @@
-import * as React from 'react';
-import { HoverPopper } from '../HoverPopper/HoverPopper';
-import { getClassName } from '../../helpers/getClassName';
-import { usePlatform } from '../../hooks/usePlatform';
-import { hasReactNode } from '../../lib/utils';
-import { Placement } from '../Popper/Popper';
-import Subhead from '../Typography/Subhead/Subhead';
-import { prefixClass } from '../../lib/prefixClass';
-import './TextTooltip.css';
+import * as React from "react";
+import { HoverPopper } from "../HoverPopper/HoverPopper";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import { hasReactNode } from "../../lib/utils";
+import { Placement } from "../Popper/Popper";
+import Subhead from "../Typography/Subhead/Subhead";
+import { prefixClass } from "../../lib/prefixClass";
+import "./TextTooltip.css";
 
 // Приходится избегать экстендов от HoverPopperProps и PopperProps, потому что react-docgen не умеет в Omit.
 // Ждём либо фикса react-docgen (что вряд ли), либо переезда на react-docgen-typescript, где такой проблемы нет.
@@ -54,18 +54,39 @@ export interface TextTooltipProps {
   header?: React.ReactNode;
 }
 
-export const TextTooltip: React.FC<TextTooltipProps> = ({ children, text, header, ...popperProps }: TextTooltipProps) => {
+export const TextTooltip: React.FC<TextTooltipProps> = ({
+  children,
+  text,
+  header,
+  ...popperProps
+}: TextTooltipProps) => {
   const platform = usePlatform();
 
   return (
     <HoverPopper
-      vkuiClass={getClassName('TextTooltip', platform)}
+      vkuiClass={getClassName("TextTooltip", platform)}
       arrow
-      arrowClassName={prefixClass('TextTooltip__arrow')}
+      arrowClassName={prefixClass("TextTooltip__arrow")}
       content={
         <React.Fragment>
-          {hasReactNode(header) && <Subhead Component="span" weight="medium" vkuiClass="TextTooltip__header">{header}</Subhead>}
-          {hasReactNode(text) && <Subhead Component="span" weight="regular" vkuiClass="TextTooltip__text">{text}</Subhead>}
+          {hasReactNode(header) && (
+            <Subhead
+              Component="span"
+              weight="medium"
+              vkuiClass="TextTooltip__header"
+            >
+              {header}
+            </Subhead>
+          )}
+          {hasReactNode(text) && (
+            <Subhead
+              Component="span"
+              weight="regular"
+              vkuiClass="TextTooltip__text"
+            >
+              {text}
+            </Subhead>
+          )}
         </React.Fragment>
       }
       {...popperProps}

package/src/components/Textarea/Readme.md

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

@@ -31,7 +31,7 @@
 }
 
 .Textarea__el:disabled {
-  opacity: .4;
+  opacity: 0.4;
 }
 
 .Textarea__el:disabled::placeholder {