@vkontakte/vkui 4.22.0 → 4.24.0

package/src/components/Tabs/Tabs.css

@@ -12,7 +12,7 @@
 .PanelHeader .Tabs::after {
   display: block;
   width: 1000px;
-  content: '';
+  content: "";
 }
 
 .Tabs .HorizontalScroll {
@@ -40,7 +40,7 @@
   width: 8px;
   flex-shrink: 0;
   height: 1px;
-  content: '';
+  content: "";
 }
 
 /*
@@ -58,7 +58,7 @@
   top: 0;
   width: 100%;
   height: 100%;
-  content: '';
+  content: "";
   background: var(--background_content);
 }
 

package/src/components/Tabs/Tabs.tsx

@@ -1,17 +1,21 @@
-import * as React from 'react';
-import { getClassName } from '../../helpers/getClassName';
-import { classNames } from '../../lib/classNames';
-import { HasRootRef } from '../../types';
-import { usePlatform } from '../../hooks/usePlatform';
-import { IOS } from '../../lib/platform';
-import { withAdaptivity, AdaptivityProps } from '../../hoc/withAdaptivity';
-import './Tabs.css';
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { HasRootRef } from "../../types";
+import { usePlatform } from "../../hooks/usePlatform";
+import { IOS } from "../../lib/platform";
+import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
+import "./Tabs.css";
 
-export interface TabsProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, AdaptivityProps {
-  mode?: 'default' | 'buttons' | 'segmented';
+export interface TabsProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRootRef<HTMLDivElement>,
+    AdaptivityProps {
+  mode?: "default" | "buttons" | "segmented";
 }
 
-export const TabsModeContext = React.createContext<TabsProps['mode']>('default');
+export const TabsModeContext =
+  React.createContext<TabsProps["mode"]>("default");
 
 const Tabs: React.FunctionComponent<TabsProps> = ({
   children,
@@ -22,15 +26,19 @@ const Tabs: React.FunctionComponent<TabsProps> = ({
 }: TabsProps) => {
   const platform = usePlatform();
 
-  if (platform !== IOS && mode === 'segmented') {
-    mode = 'default';
+  if (platform !== IOS && mode === "segmented") {
+    mode = "default";
   }
 
   return (
     <div
       {...restProps}
       ref={getRootRef}
-      vkuiClass={classNames(getClassName('Tabs', platform), `Tabs--${mode}`, `Tabs--sizeX-${sizeX}`)}
+      vkuiClass={classNames(
+        getClassName("Tabs", platform),
+        `Tabs--${mode}`,
+        `Tabs--sizeX-${sizeX}`
+      )}
     >
       <div vkuiClass="Tabs__in">
         <TabsModeContext.Provider value={mode}>
@@ -42,7 +50,7 @@ const Tabs: React.FunctionComponent<TabsProps> = ({
 };
 
 Tabs.defaultProps = {
-  mode: 'default',
+  mode: "default",
 };
 
 export default withAdaptivity(Tabs, { sizeX: true });

package/src/components/TabsItem/TabsItem.css

@@ -28,7 +28,7 @@
 }
 
 .Tabs--default .TabsItem::after {
-  content: '';
+  content: "";
   display: block;
   position: absolute;
   left: 16px;
@@ -106,6 +106,7 @@
   flex-basis: 0;
   flex-shrink: 0;
   flex-grow: 1;
+  border-radius: 0;
 }
 
 .Tabs--ios.Tabs--segmented .TabsItem__in {
@@ -117,11 +118,13 @@
 }
 
 .Tabs--ios.Tabs--segmented .TabsItem:last-child {
-  border-radius: 0 10px 10px 0;
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
 }
 
 .Tabs--ios.Tabs--segmented .TabsItem:first-child {
-  border-radius: 10px 0 0 10px;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
 }
 
 .Tabs--ios.Tabs--segmented .TabsItem {
@@ -141,8 +144,10 @@
   background: var(--separator_common);
 }
 
-.PanelHeader--ios .Tabs--segmented.TabsItem:not(.TabsItem--selected).TabsItem--active .TabsItem__in {
-  opacity: .7;
+.PanelHeader--ios
+  .Tabs--segmented.TabsItem:not(.TabsItem--selected).TabsItem--active
+  .TabsItem__in {
+  opacity: 0.7;
 }
 
 .PanelHeader--ios .Tabs--segmented .TabsItem {

package/src/components/TabsItem/TabsItem.tsx

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { getClassName } from '../../helpers/getClassName';
-import Tappable from '../Tappable/Tappable';
-import { classNames } from '../../lib/classNames';
-import { VKCOM } from '../../lib/platform';
-import { usePlatform } from '../../hooks/usePlatform';
-import { hasReactNode } from '../../lib/utils';
-import { TabsProps, TabsModeContext } from '../Tabs/Tabs';
-import Headline from '../Typography/Headline/Headline';
-import Subhead from '../Typography/Subhead/Subhead';
-import Text from '../Typography/Text/Text';
-import './TabsItem.css';
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import Tappable from "../Tappable/Tappable";
+import { classNames } from "../../lib/classNames";
+import { VKCOM } from "../../lib/platform";
+import { usePlatform } from "../../hooks/usePlatform";
+import { hasReactNode } from "../../lib/utils";
+import { TabsProps, TabsModeContext } from "../Tabs/Tabs";
+import Headline from "../Typography/Headline/Headline";
+import Subhead from "../Typography/Subhead/Subhead";
+import Text from "../Typography/Text/Text";
+import "./TabsItem.css";
 
 export interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {
   after?: React.ReactNode;
@@ -23,11 +23,10 @@ const TabsItem: React.FC<TabsItemProps> = ({
   ...restProps
 }: TabsItemProps) => {
   const platform = usePlatform();
-  const mode: TabsProps['mode'] = React.useContext(TabsModeContext);
+  const mode: TabsProps["mode"] = React.useContext(TabsModeContext);
 
-  let TypographyComponent = mode === 'buttons' || mode === 'segmented'
-    ? Subhead
-    : Headline;
+  let TypographyComponent =
+    mode === "buttons" || mode === "segmented" ? Subhead : Headline;
 
   if (platform === VKCOM) {
     TypographyComponent = Text;
@@ -36,12 +35,20 @@ const TabsItem: React.FC<TabsItemProps> = ({
   return (
     <Tappable
       {...restProps}
-      vkuiClass={classNames(getClassName('TabsItem', platform), { 'TabsItem--selected': selected })}
-      hasActive={mode === 'segmented'}
+      vkuiClass={classNames(getClassName("TabsItem", platform), {
+        "TabsItem--selected": selected,
+      })}
+      hasActive={mode === "segmented"}
       activeMode="TabsItem--active"
-      focusVisibleMode={mode === 'segmented' ? 'outside' : 'inside'}
+      focusVisibleMode={mode === "segmented" ? "outside" : "inside"}
     >
-      <TypographyComponent Component="span" vkuiClass="TabsItem__in" weight="medium">{children}</TypographyComponent>
+      <TypographyComponent
+        Component="span"
+        vkuiClass="TabsItem__in"
+        weight="medium"
+      >
+        {children}
+      </TypographyComponent>
       {hasReactNode(after) && <div vkuiClass="TabsItem__after">{after}</div>}
     </Tappable>
   );

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 { hasHover as deviceHasHover, 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(() => {
@@ -128,18 +152,20 @@ const Tappable: React.FC<TappableProps> = ({
   getRootRef,
   sizeX,
   hasMouse,
-  hasHover: _hasHover = deviceHasHover,
-  hoverMode = 'background',
+  deviceHasHover,
+  hasHover: _hasHover = true,
+  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);
@@ -147,12 +173,19 @@ const Tappable: React.FC<TappableProps> = ({
 
   const hovered = _hovered && !props.disabled;
   const hasActive = _hasActive && !childHover && !props.disabled;
-  const hasHover = _hasHover && !childHover;
-  const isCustomElement = Component !== 'a' && Component !== 'button' && !props.contentEditable;
-  const isPresetHoverMode = ['opacity', 'background'].includes(hoverMode);
-  const isPresetActiveMode = ['opacity', 'background'].includes(activeMode);
+  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 [activity, { start, stop, delayStart }] = useActivity(
+    hasActive,
+    activeEffectDelay
+  );
   const active = activity === TapState.active || activity === TapState.exiting;
 
   const containerRef = useExternRef(getRootRef);
@@ -179,10 +212,6 @@ const Tappable: React.FC<TappableProps> = ({
       e.preventDefault();
       containerRef.current.click();
     }
-
-    if (typeof _onKeyDown === 'function') {
-      return _onKeyDown(e);
-    }
   }
 
   function onStart({ originalEvent }: TouchEvent) {
@@ -224,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}
@@ -253,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 });
+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

@@ -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);
+}