@vkontakte/vkui 4.28.1 → 4.29.0

package/src/components/Popper/Popper.tsx

@@ -149,9 +149,9 @@ export const Popper: React.FC<PopperProps> = ({
 
   const resolvedPlacement = state?.placement;
   const isEdgePlacement =
-    !!resolvedPlacement && resolvedPlacement.includes("-"); // true, если поппер отрисован скраю
+    !!resolvedPlacement && resolvedPlacement.includes("-"); // true, если поппер отрисован с краю
 
-  // Если поппер рисуется скраю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до
+  // Если поппер рисуется с краю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до
   // таргета из-за маленьких размеров последнего
   useIsomorphicLayoutEffect(() => {
     if (arrow && isEdgePlacement) {

package/src/components/PromoBanner/PromoBanner.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Icon24Dismiss } from "@vkontakte/icons";
-import Button from "../Button/Button";
+import { Button } from "../Button/Button";
 import SimpleCell from "../SimpleCell/SimpleCell";
 import Avatar from "../Avatar/Avatar";
 import { Caption } from "../Typography/Caption/Caption";

package/src/components/PullToRefresh/PullToRefresh.tsx

@@ -312,6 +312,7 @@ class PullToRefresh extends React.PureComponent<
           onStart={this.onTouchStart}
           onMove={this.onTouchMove}
           onEnd={this.onTouchEnd}
+          // eslint-disable-next-line vkui/no-object-expression-in-arguments
           vkuiClass={classNames(getClassName("PullToRefresh", platform), {
             "PullToRefresh--watching": watching,
             "PullToRefresh--refreshing": refreshing,

package/src/components/PullToRefresh/PullToRefreshSpinner.tsx

@@ -34,6 +34,7 @@ const PullToRefreshSpinner: React.FunctionComponent<
 
   return (
     <div
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames("PullToRefresh__spinner", {
         "PullToRefresh__spinner--on": on,
       })}

package/src/components/RichCell/RichCell.tsx

@@ -5,7 +5,7 @@ import { getClassName } from "../../helpers/getClassName";
 import Tappable, { TappableProps } from "../Tappable/Tappable";
 import { hasReactNode } from "../../lib/utils";
 import Text from "../Typography/Text/Text";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import { withAdaptivity } from "../../hoc/withAdaptivity";
 import "./RichCell.css";
 
@@ -59,6 +59,7 @@ const RichCell: React.FC<RichCellProps> = ({
   return (
     <Tappable
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("RichCell", platform),
         {

package/src/components/RichTooltip/Readme.md

@@ -6,7 +6,7 @@
 по содержимому. Компонент всё ещё предназначен для информирования пользователей, но внутри допускаются кнопки, ссылки, картинки.
 
 ```jsx { "props": { "layout": false, "iframe": true } }
-<Checkbox>
+<Checkbox style={{userSelect: 'none'}}>
   Специальные возможности
   <RichTooltip style={{maxWidth: 320}} content={
     <Subhead weight="regular" style={{padding: '8px 12px', color: 'var(--text_primary)'}}>
@@ -54,6 +54,6 @@
     Илья Гришин
   </RichCell>
 }>
-  <Link style={{display: 'inline-block', margin: 20}}>Илья Гришин</Link>
+  <Link style={{display: 'inline-block', margin: 20, userSelect: 'none'}}>Илья Гришин</Link>
 </RichTooltip>
 ```

package/src/components/RichTooltip/RichTooltip.tsx

@@ -19,6 +19,7 @@ export const RichTooltip: React.FC<RichTooltipProps> = ({
 
   return (
     <HoverPopper
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("RichTooltip", platform), {
         [`RichTooltip--${appearance}`]: !!appearance,
       })}

package/src/components/Root/Root.css

@@ -79,7 +79,7 @@
 }
 
 .Root--ios .Root__view--show-back::after {
-  animation: vkui-root-ios-animation-show-back 0.6s var(--ios-easing);
+  animation: vkui-root-ios-animation-show-back 0.6s var(--ios-easing) forwards;
 }
 
 .Root--ios .Root__view--hide-forward::after {
@@ -91,7 +91,7 @@
 }
 
 .Root--ios .Root__view--hide-back {
-  animation: vkui-root-ios-animation-hide-back 0.6s var(--ios-easing);
+  animation: vkui-root-ios-animation-hide-back 0.6s var(--ios-easing) forwards;
 }
 
 @keyframes vkui-root-ios-animation-show-back {
@@ -148,7 +148,8 @@
 
 .Root--android .Root__view--hide-back,
 .Root--vkcom .Root__view--hide-back {
-  animation: vkui-root-android-animation-hide-back 0.3s var(--android-easing);
+  animation: vkui-root-android-animation-hide-back 0.3s var(--android-easing)
+    forwards;
 }
 
 @keyframes vkui-root-android-animation-hide-back {
@@ -174,11 +175,3 @@
     opacity: 1;
   }
 }
-
-/* iOS + Android */
-
-.Root--ios.Root--no-motion .Root__view,
-.Root--android.Root--no-motion .Root__view,
-.Root--vkcom.Root--no-motion .Root__view {
-  animation: none;
-}

package/src/components/Root/Root.tsx

@@ -80,7 +80,7 @@ const Root: React.FC<RootProps> = ({
       _setState({
         activeView: panel,
         prevView: activeView,
-        transition: true,
+        transition: !disableAnimation,
         isBack,
       });
     }
@@ -107,7 +107,7 @@ const Root: React.FC<RootProps> = ({
           to: activeView,
         });
     }
-  }, [transition]);
+  }, [transition, prevView]);
 
   const fallbackTransition = useTimeout(
     finishTransition,
@@ -118,8 +118,8 @@ const Root: React.FC<RootProps> = ({
       fallbackTransition.clear();
       return;
     }
-    disableAnimation ? finishTransition() : fallbackTransition.set();
-  }, [disableAnimation, fallbackTransition, finishTransition, transition]);
+    fallbackTransition.set();
+  }, [fallbackTransition, transition]);
 
   const onAnimationEnd = (e: React.AnimationEvent) => {
     if (
@@ -148,9 +148,9 @@ const Root: React.FC<RootProps> = ({
   return (
     <div
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("Root", platform), {
-        "Root--transition": !disableAnimation && transition,
-        "Root--no-motion": disableAnimation,
+        "Root--transition": transition,
       })}
     >
       {views.map((view) => {
@@ -168,6 +168,7 @@ const Root: React.FC<RootProps> = ({
             key={viewId}
             ref={(e) => viewId && (viewNodes[viewId] = e)}
             onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}
+            // eslint-disable-next-line vkui/no-object-expression-in-arguments
             vkuiClass={classNames("Root__view", {
               "Root__view--hide-back":
                 transition && viewId === prevView && isBack,

package/src/components/Search/Search.tsx

@@ -13,7 +13,7 @@ import { Touch, TouchEvent } from "../Touch/Touch";
 import { VKUITouchEvent } from "../../lib/touch";
 import { noop } from "../../lib/utils";
 import Text from "../Typography/Text/Text";
-import Title from "../Typography/Title/Title";
+import { Title } from "../Typography/Title/Title";
 import Headline from "../Typography/Headline/Headline";
 import Separator from "../Separator/Separator";
 import { useExternRef } from "../../hooks/useExternRef";
@@ -121,6 +121,7 @@ const Search: React.FC<SearchProps> = ({
 
   return (
     <div
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("Search", platform), {
         "Search--focused": isFocused,
         "Search--has-value": !!value,

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -33,39 +33,49 @@ export const SegmentedControl: React.FC<SegmentedControlProps> = ({
   options,
   getRootRef,
   onChange = noop,
-  value,
+  value: valueProp,
   defaultValue,
   children,
   ...restProps
 }) => {
-  let initialValue = defaultValue ?? value;
+  const initialValue = defaultValue ?? options[0]?.value;
 
-  if (!initialValue) {
-    initialValue = options[0]?.value;
+  if (process.env.NODE_ENV === "development") {
+    if (valueProp !== undefined && defaultValue !== undefined) {
+      warn(
+        "SegmentedControl должен быть либо управляемым, либо неуправляемым" +
+          "(укажите либо свойство value, либо свойство defaultValue, но не оба).",
+        "error"
+      );
+    }
   }
 
   const [activeOptionIdx, updateActiveOptionIdx] = React.useState<number>(0);
-  const [activeValue, updateActiveValue] =
+  const [valueLocal, updateValueLocal] =
     React.useState<SegmentedControlValue>(initialValue);
 
+  const value = valueProp ?? valueLocal;
+
   const nameRef = React.useRef<string>(name ?? generateRandomId());
 
   useIsomorphicLayoutEffect(() => {
     const _activeOptionIdx = options.findIndex(
-      (option) => option.value === activeValue
+      (option) => option.value === value
     );
 
     if (_activeOptionIdx === -1 && process.env.NODE_ENV === "development") {
-      warn("defaultValue: такого значения нет среди опций!");
+      warn("defaultValue: такого значения нет среди опций!", "error");
     }
 
     updateActiveOptionIdx(_activeOptionIdx);
-  }, [activeValue, options]);
+  }, [value, options]);
 
   const translateX = `translateX(${100 * activeOptionIdx}%)`;
 
   const handleOnChange = (value: SegmentedControlValue) => {
-    updateActiveValue(value);
+    if (valueProp === undefined) {
+      updateValueLocal(value);
+    }
     onChange(value);
   };
 
@@ -93,7 +103,7 @@ export const SegmentedControl: React.FC<SegmentedControlProps> = ({
             {...optionProps}
             vkuiClass="SegmentedControl__option"
             name={nameRef.current}
-            checked={activeValue === optionProps.value}
+            checked={value === optionProps.value}
             onChange={() => handleOnChange(optionProps.value)}
           >
             {label}

package/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.css

@@ -15,7 +15,7 @@
   color: var(--vkui--color_icon_secondary);
 }
 
-.SegmentedControlOption:hover {
+.SegmentedControlOption:not(.SegmentedControlOption--checked):hover {
   opacity: 0.5;
 }
 

package/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx

@@ -22,6 +22,7 @@ export const SegmentedControlOption: React.FC<VisuallyHiddenInputProps> = ({
     <label
       className={className}
       style={style}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames("SegmentedControlOption", {
         "SegmentedControlOption--checked": restProps.checked,
         "SegmentedControlOption--focus-visible": focusVisible,

package/src/components/Select/Select.css

@@ -22,7 +22,7 @@
   flex-grow: 1;
   flex-shrink: 1;
   padding: 11px;
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
   box-sizing: border-box;
   position: relative;
   z-index: 2;
@@ -40,7 +40,7 @@
 }
 
 .Select--not-selected .Select__title {
-  color: var(--field_text_placeholder);
+  color: var(--field_text_placeholder, var(--vkui--color_text_secondary));
 }
 
 .Select--align-right .Select__title {

package/src/components/Select/Select.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import NativeSelect from "../NativeSelect/NativeSelect";
-import CustomSelect, { CustomSelectProps } from "../CustomSelect/CustomSelect";
+import { CustomSelect, CustomSelectProps } from "../CustomSelect/CustomSelect";
 import { withAdaptivity } from "../../hoc/withAdaptivity";
 import {
   AdaptivityContextInterface,
@@ -9,7 +9,7 @@ import {
 
 export interface SelectProps extends CustomSelectProps, AdaptivityProps {}
 
-const Select: React.FC<SelectProps & AdaptivityContextInterface> = ({
+const SelectComponent: React.FC<SelectProps & AdaptivityContextInterface> = ({
   hasMouse,
   ...props
 }: SelectProps) => {
@@ -33,7 +33,6 @@ const Select: React.FC<SelectProps & AdaptivityContextInterface> = ({
   );
 };
 
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(Select, {
+export const Select = withAdaptivity(SelectComponent, {
   hasMouse: true,
 });

package/src/components/SelectMimicry/SelectMimicry.tsx

@@ -52,6 +52,7 @@ const SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({
     <FormField
       {...restProps}
       tabIndex={disabled ? undefined : tabIndex}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("Select", platform),
         "Select--mimicry",

package/src/components/Separator/Separator.tsx

@@ -23,11 +23,13 @@ const Separator: React.FC<SeparatorProps> = ({
     <div
       {...restProps}
       aria-hidden="true"
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("Separator", platform), {
         "Separator--wide": wide,
       })}
     >
       <div
+        // eslint-disable-next-line vkui/no-object-expression-in-arguments
         vkuiClass={classNames("Separator__in", {
           "Separator__in--expanded": expanded,
         })}

package/src/components/SimpleCell/SimpleCell.tsx

@@ -9,9 +9,9 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
-import Title from "../Typography/Title/Title";
+import { Title } from "../Typography/Title/Title";
 import Text from "../Typography/Text/Text";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import Headline from "../Typography/Headline/Headline";
 import "./SimpleCell.css";
 
@@ -85,6 +85,7 @@ const SimpleCell: React.FC<SimpleCellProps> = ({
   return (
     <Tappable
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("SimpleCell", platform),
         {

package/src/components/SimpleCheckbox/SimpleCheckbox.tsx

@@ -79,12 +79,17 @@ export const SimpleCheckbox: React.FC<SimpleCheckboxProps> = (
   if (IS_DEV) {
     if (defaultIndeterminate && restProps.defaultChecked) {
       warn(
-        "defaultIndeterminate and defaultChecked cannot be true at the same time"
+        "defaultIndeterminate и defaultChecked не могут быть true одновременно",
+        "error"
       );
     }
 
     if (indeterminate && restProps.checked) {
-      warn("indeterminate and checked cannot be true at the same time");
+      warn("indeterminate и checked не могут быть true одновременно", "error");
+    }
+
+    if (restProps.defaultChecked && restProps.checked) {
+      warn("defaultChecked и checked не могут быть true одновременно", "error");
     }
   }
 

package/src/components/SliderSwitch/SliderSwitch.tsx

@@ -176,6 +176,7 @@ class SliderSwitch extends React.Component<
           <div vkuiClass="SliderSwitch__border" />
         )}
         <div
+          // eslint-disable-next-line vkui/no-object-expression-in-arguments
           vkuiClass={classNames("SliderSwitch__slider", {
             ["SliderSwitch--firstActive"]: firstActive,
             ["SliderSwitch--secondActive"]: secondActive,

package/src/components/SliderSwitch/SliderSwitchButton.tsx

@@ -31,6 +31,7 @@ export const SliderSwitchButton: React.FunctionComponent<ButtonProps> = (
   return (
     <Tappable
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("SliderSwitch__button", platform), {
         ["SliderSwitch__button--active"]: active,
         ["SliderSwitch__button--hover"]: !active && hovered,

package/src/components/Snackbar/Snackbar.tsx

@@ -7,7 +7,7 @@ import { ANDROID, VKCOM } from "../../lib/platform";
 import { rubber } from "../../lib/touch";
 import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
 import Text from "../Typography/Text/Text";
-import Button from "../Button/Button";
+import { Button } from "../Button/Button";
 import { AppRootPortal } from "../AppRoot/AppRootPortal";
 import { useWaitTransitionFinish } from "../../hooks/useWaitTransitionFinish";
 import { usePlatform } from "../../hooks/usePlatform";
@@ -195,6 +195,7 @@ const SnackbarComponent: React.FC<
     <AppRootPortal>
       <div
         {...restProps}
+        // eslint-disable-next-line vkui/no-object-expression-in-arguments
         vkuiClass={classNames(
           getClassName("Snackbar", platform),
           `Snackbar--l-${resolvedLayout}`,

package/src/components/Spacing/Spacing.tsx

@@ -36,6 +36,7 @@ export const Spacing: React.FC<SpacingProps> = ({
     <div
       {...restProps}
       aria-hidden="true"
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("Spacing", platform), {
         "Spacing--separator": !!separator,
         "Spacing--separator-center":

package/src/components/SplitCol/SplitCol.tsx

@@ -58,6 +58,7 @@ export const SplitCol: React.FC<SplitColProps> = (props: SplitColProps) => {
         minWidth: minWidth,
       }}
       ref={baseRef}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames("SplitCol", {
         "SplitCol--spaced": spaced,
         "SplitCol--fixed": fixed,

package/src/components/SplitLayout/SplitLayout.tsx

@@ -43,6 +43,7 @@ export const SplitLayout: React.FC<SplitLayoutProps> = ({
       <div
         {...restProps}
         ref={getRef}
+        // eslint-disable-next-line vkui/no-object-expression-in-arguments
         vkuiClass={classNames("SplitLayout__inner", {
           "SplitLayout__inner--header": !!header,
         })}

package/src/components/SubnavigationBar/SubnavigationBar.tsx

@@ -2,7 +2,8 @@ import * as React from "react";
 import { usePlatform } from "../../hooks/usePlatform";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
-import HorizontalScroll, {
+import {
+  HorizontalScroll,
   HorizontalScrollProps,
   ScrollPositionHandler,
 } from "../HorizontalScroll/HorizontalScroll";

package/src/components/SubnavigationButton/SubnavigationButton.tsx

@@ -7,7 +7,7 @@ import Tappable, { TappableProps } from "../Tappable/Tappable";
 import { Icon16Dropdown } from "@vkontakte/icons";
 import { usePlatform } from "../../hooks/usePlatform";
 import { Caption } from "../Typography/Caption/Caption";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import "./SubnavigationButton.css";
 
 export interface SubnavigationButtonProps extends Omit<TappableProps, "size"> {
@@ -62,6 +62,7 @@ export const SubnavigationButton: React.FC<SubnavigationButtonProps> = (
       {...restProps}
       hasActive={false}
       focusVisibleMode="outside"
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("SubnavigationButton", platform),
         `SubnavigationButton--${size}`,

package/src/components/Switch/Switch.tsx

@@ -29,6 +29,7 @@ export const Switch: React.FC<SwitchProps> = ({
 
   return (
     <label
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("Switch", platform),
         `Switch--sizeY-${sizeY}`,

package/src/components/Tabbar/Tabbar.tsx

@@ -28,6 +28,7 @@ const Tabbar: React.FunctionComponent<TabbarProps> = (props: TabbarProps) => {
 
   return (
     <div
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("Tabbar", platform),
         `Tabbar--l-${getItemsLayout()}`,

package/src/components/TabbarItem/TabbarItem.css

@@ -35,6 +35,7 @@
   justify-content: center;
   pointer-events: none;
   height: 100%;
+  width: 100%;
   overflow: hidden;
 }
 

package/src/components/TabbarItem/TabbarItem.tsx

@@ -54,6 +54,7 @@ const TabbarItem: React.FunctionComponent<TabbarItemProps> = ({
       {...restProps}
       disabled={disabled}
       href={href}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("TabbarItem", platform), {
         "TabbarItem--selected": selected,
         "TabbarItem--text": !!text,

package/src/components/Tabs/Readme.md

@@ -7,7 +7,7 @@ class Example extends React.Component {
       activePanel: "panel1",
       contextOpened: false,
       mode: "all",
-      activeTab1: "recomendations",
+      activeTab1: "recommendations",
       activeTab2: "music",
       activeTab3: "news",
       activeTab4: "all",
@@ -63,11 +63,11 @@ class Example extends React.Component {
               <TabsItem
                 onClick={() => {
                   this.setState({
-                    activeTab1: "recomendations",
+                    activeTab1: "recommendations",
                     contextOpened: false,
                   });
                 }}
-                selected={this.state.activeTab1 === "recomendations"}
+                selected={this.state.activeTab1 === "recommendations"}
               >
                 Интересное
               </TabsItem>
@@ -134,8 +134,8 @@ class Example extends React.Component {
                 Моя музыка
               </TabsItem>
               <TabsItem
-                onClick={() => this.setState({ activeTab2: "recomendations" })}
-                selected={this.state.activeTab2 === "recomendations"}
+                onClick={() => this.setState({ activeTab2: "recommendations" })}
+                selected={this.state.activeTab2 === "recommendations"}
               >
                 Рекомендации
               </TabsItem>
@@ -169,9 +169,9 @@ class Example extends React.Component {
                 </TabsItem>
                 <TabsItem
                   onClick={() =>
-                    this.setState({ activeTab3: "recomendations" })
+                    this.setState({ activeTab3: "recommendations" })
                   }
-                  selected={this.state.activeTab3 === "recomendations"}
+                  selected={this.state.activeTab3 === "recommendations"}
                 >
                   Рекомендации
                 </TabsItem>

package/src/components/TabsItem/TabsItem.tsx

@@ -7,7 +7,7 @@ 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 { Subhead } from "../Typography/Subhead/Subhead";
 import Text from "../Typography/Text/Text";
 import "./TabsItem.css";
 
@@ -35,6 +35,7 @@ const TabsItem: React.FC<TabsItemProps> = ({
   return (
     <Tappable
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("TabsItem", platform), {
         "TabsItem--selected": selected,
       })}

package/src/components/Tappable/Tappable.css

@@ -1,5 +1,10 @@
 .Tappable {
   position: relative;
+  cursor: default;
+}
+
+.Tappable--hasHover,
+.Tappable--hasActive {
   cursor: pointer;
 }
 

package/src/components/Tappable/Tappable.tsx

@@ -257,13 +257,16 @@ const Tappable: React.FC<TappableProps> = ({
     }
 
     // отключить без задержки при длинном тапе
-    const activeDuraion = duration - ACTIVE_DELAY;
-    stop(activeDuraion >= 100 ? 0 : activeEffectDelay - activeDuraion);
+    const activeDuration = duration - ACTIVE_DELAY;
+    stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);
   }
 
+  // eslint-disable-next-line vkui/no-object-expression-in-arguments
   const classes = classNames(
     getClassName("Tappable", platform),
     `Tappable--sizeX-${sizeX}`,
+    hasHover && `Tappable--hasHover`,
+    hasActive && `Tappable--hasActive`,
     hasHover && hovered && !isPresetHoverMode && hoverMode,
     hasActive && active && !isPresetActiveMode && activeMode,
     focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,

package/src/components/TextTooltip/TextTooltip.tsx

@@ -3,7 +3,7 @@ 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 { Subhead } from "../Typography/Subhead/Subhead";
 import { prefixClass } from "../../lib/prefixClass";
 import "./TextTooltip.css";