@vkontakte/vkui 6.1.2 → 6.2.0

package/src/components/Switch/Switch.module.css

@@ -1,188 +1,247 @@
 .Switch {
-  user-select: none;
+  /* Switch__track */
+  --vkui_internal--Switch__track_shape: calc(var(--vkui_internal--Switch__track_width) / 2);
+  --vkui_internal--Switch__track_outline_width: 2px;
+  --vkui_internal--Switch__handle_shift_x: var(--vkui_internal--Switch__track_outline_width);
+  /* prettier-ignore */
+  --vkui_internal--Switch__handle_shift_y: calc(var(--vkui_internal--Switch__track_height) - var(--vkui_internal--Switch__handle_height) - var(--vkui_internal--Switch__track_outline_width));
+  /* prettier-ignore */
+  --vkui_internal--Switch__handle_scale: calc(var(--vkui_internal--Switch__handle_widthNoUnit--not-checked) / var(--vkui_internal--Switch__handle_heightNoUnit));
+
   position: relative;
   display: block;
+  border-radius: var(--vkui_internal--Switch__track_shape);
+  user-select: none;
   cursor: pointer;
-
-  /* Добавляем отступы, если пин больше трека */
-  padding: calc(
-    (var(--vkui--size_switch_pin--regular) - var(--vkui--size_switch_height--regular)) / 2
-  );
+  -webkit-tap-highlight-color: transparent;
 }
 
-.Switch--sizeY-compact {
-  padding: calc(
-    (var(--vkui--size_switch_pin--compact) - var(--vkui--size_switch_height--compact)) / 2
-  );
+.Switch--disabled {
+  cursor: not-allowed;
+  opacity: var(--vkui_internal--Switch_disabled);
+}
+
+.Switch--default {
+  --vkui_internal--Switch_disabled: 0.5;
+  /* Switch__track */
+  --vkui_internal--Switch__track_width: 52px;
+  --vkui_internal--Switch__track_height: 32px;
+  --vkui_internal--Switch__track_color: var(--vkui--color_background);
+  --vkui_internal--Switch__track_color_duration: 67ms;
+  /* prettier-ignore */
+  --vkui_internal--Switch__track_shadow: inset 0 0 0 var(--vkui_internal--Switch__track_outline_width) var(--vkui--color_field_border_alpha);
+
+  /* Switch__handle */
+  --vkui_internal--Switch__handle_width: 28px;
+  --vkui_internal--Switch__handle_widthNoUnit--checked: 24;
+  --vkui_internal--Switch__handle_widthNoUnit--not-checked: 16;
+  --vkui_internal--Switch__handle_height: 28px;
+  --vkui_internal--Switch__handle_heightNoUnit: 28;
+  --vkui_internal--Switch__handle_color: var(--vkui--color_icon_medium);
+  --vkui_internal--Switch__handle_color_duration: 67ms;
+  --vkui_internal--Switch__handle_scale_duration: 250ms;
+  --vkui_internal--Switch__handle_shift_x_duration: 300ms;
+  --vkui_internal--Switch__handle_shift_x_easing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --vkui_internal--Switch__handle_shadow: none;
+}
+
+.Switch--default.Switch--sizeY-compact {
+  /* Switch__track */
+  --vkui_internal--Switch__track_width: 42px;
+  --vkui_internal--Switch__track_height: 26px;
+
+  /* Switch__handle */
+  --vkui_internal--Switch__handle_width: 22px;
+  --vkui_internal--Switch__handle_widthNoUnit--checked: 20;
+  --vkui_internal--Switch__handle_widthNoUnit--not-checked: 12;
+  --vkui_internal--Switch__handle_height: 22px;
+  --vkui_internal--Switch__handle_heightNoUnit: 22;
 }
 
 @media (--sizeY-compact) {
-  .Switch--sizeY-none {
-    padding: calc(
-      (var(--vkui--size_switch_pin--compact) - var(--vkui--size_switch_height--compact)) / 2
-    );
+  .Switch--default.Switch--sizeY-none {
+    /* Switch__track */
+    --vkui_internal--Switch__track_width: 42px;
+    --vkui_internal--Switch__track_height: 26px;
+
+    /* Switch__handle */
+    --vkui_internal--Switch__handle_width: 22px;
+    --vkui_internal--Switch__handle_widthNoUnit--checked: 20;
+    --vkui_internal--Switch__handle_widthNoUnit--not-checked: 12;
+    --vkui_internal--Switch__handle_height: 22px;
+    --vkui_internal--Switch__handle_heightNoUnit: 22;
   }
 }
 
-.Switch--disabled {
-  cursor: default;
+.Switch--ios {
+  --vkui_internal--Switch_disabled: 0.7;
+  /* Switch__track */
+  --vkui_internal--Switch__track_width: 51px;
+  --vkui_internal--Switch__track_height: 31px;
+  --vkui_internal--Switch__track_color: var(--vkui--color_track_background);
+  --vkui_internal--Switch__track_color_duration: 200ms;
+  --vkui_internal--Switch__track_shadow: none;
+
+  /* Switch__handle */
+  --vkui_internal--Switch__handle_width: 27px;
+  --vkui_internal--Switch__handle_widthNoUnit--pressed: 27px;
+  --vkui_internal--Switch__handle_widthNoUnit--not-checked: 27px;
+  --vkui_internal--Switch__handle_height: 27px;
+  --vkui_internal--Switch__handle_heightNoUnit: 27;
+  --vkui_internal--Switch__handle_color: var(--vkui--color_icon_contrast);
+  --vkui_internal--Switch__handle_color_duration: 200ms;
+  --vkui_internal--Switch__handle_scale_duration: 200ms;
+  --vkui_internal--Switch__handle_shift_x_duration: 200ms;
+  --vkui_internal--Switch__handle_shift_x_easing: cubic-bezier(0.36, -0.24, 0.26, 1.32);
+  /* prettier-ignore */
+  --vkui_internal--Switch__handle_shadow:
+    0 3px 8px rgba(0, 0, 0, 0.15),
+    0 3px 1px rgba(0, 0, 0, 0.06),
+    inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
 }
 
-.Switch__pseudo {
-  position: relative;
-  display: block;
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  -webkit-tap-highlight-color: transparent;
-}
+.Switch--ios.Switch--sizeY-compact {
+  /* Switch__track */
+  --vkui_internal--Switch__track_width: 47px;
+  --vkui_internal--Switch__track_height: 27px;
 
-/**
- * Пин
- */
-.Switch__pseudo::before {
-  position: absolute;
-  content: '';
-  border-radius: 50%;
-  box-sizing: border-box;
-  background: var(--vkui--color_icon_contrast_secondary);
-  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
-
-  /* Делаем пин по центру */
-  inset-block-start: calc(
-    (var(--vkui--size_switch_height--regular) - var(--vkui--size_switch_pin--regular)) / 2
-  );
-  inset-inline-start: calc(
-    (var(--vkui--size_switch_height--regular) - var(--vkui--size_switch_pin--regular)) / 2
-  );
-  inline-size: var(--vkui--size_switch_pin--regular);
-  block-size: var(--vkui--size_switch_pin--regular);
-}
-
-.Switch--sizeY-compact .Switch__pseudo::before {
-  inset-block-start: calc(
-    (var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2
-  );
-  inset-inline-start: calc(
-    (var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2
-  );
-  inline-size: var(--vkui--size_switch_pin--compact);
-  block-size: var(--vkui--size_switch_pin--compact);
+  /* Switch__handle */
+  --vkui_internal--Switch__handle_width: 23px;
+  --vkui_internal--Switch__handle_widthNoUnit--pressed: 23px;
+  --vkui_internal--Switch__handle_widthNoUnit--not-checked: 23px;
+  --vkui_internal--Switch__handle_height: 23px;
+  --vkui_internal--Switch__handle_heightNoUnit: 23;
 }
 
 @media (--sizeY-compact) {
-  .Switch--sizeY-none .Switch__pseudo::before {
-    inset-block-start: calc(
-      (var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2
-    );
-    inset-inline-start: calc(
-      (var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2
-    );
-    inline-size: var(--vkui--size_switch_pin--compact);
-    block-size: var(--vkui--size_switch_pin--compact);
+  .Switch--ios.Switch--sizeY-none {
+    /* Switch__track */
+    --vkui_internal--Switch__track_width: 47px;
+    --vkui_internal--Switch__track_height: 27px;
+
+    /* Switch__handle */
+    --vkui_internal--Switch__handle_width: 23px;
+    --vkui_internal--Switch__handle_widthNoUnit--pressed: 23px;
+    --vkui_internal--Switch__handle_widthNoUnit--not-checked: 23px;
+    --vkui_internal--Switch__handle_height: 23px;
+    --vkui_internal--Switch__handle_heightNoUnit: 23;
   }
 }
 
-.Switch__self:checked + .Switch__pseudo::before {
-  background: var(--vkui--color_icon_accent);
-  transform: translateX(
-    calc(var(--vkui--size_switch_width--regular) - var(--vkui--size_switch_height--regular))
-  );
-}
-
-/**
- * Трек
- */
-.Switch__pseudo::after {
-  content: '';
+.Switch__inputFake {
   display: block;
-  background: var(--vkui--color_icon_tertiary_alpha);
-  border-radius: calc(var(--vkui--size_switch_width--regular) / 2);
-  inline-size: var(--vkui--size_switch_width--regular);
-  block-size: var(--vkui--size_switch_height--regular);
 }
 
-.Switch--sizeY-compact .Switch__pseudo::after {
-  border-radius: calc(var(--vkui--size_switch_width--compact) / 2);
-  inline-size: var(--vkui--size_switch_width--compact);
-  block-size: var(--vkui--size_switch_height--compact);
-}
+.Switch__inputNative:checked + .Switch__inputFake {
+  /* Switch__track */
+  --vkui_internal--Switch__track_color: var(--vkui--color_background_accent);
 
-@media (--sizeY-compact) {
-  .Switch--sizeY-none .Switch__pseudo::after {
-    border-radius: calc(var(--vkui--size_switch_width--compact) / 2);
-    inline-size: var(--vkui--size_switch_width--compact);
-    block-size: var(--vkui--size_switch_height--compact);
-  }
+  /* Switch__handle */
+  /* prettier-ignore */
+  --vkui_internal--Switch__handle_shift_x: calc(var(--vkui_internal--Switch__track_width) - var(--vkui_internal--Switch__handle_width) - var(--vkui_internal--Switch__track_outline_width));
+  /* prettier-ignore */
+  --vkui_internal--Switch__handle_scale: calc(var(--vkui_internal--Switch__handle_widthNoUnit--checked) / var(--vkui_internal--Switch__handle_heightNoUnit));
+  --vkui_internal--Switch__handle_color: var(--vkui--color_icon_contrast);
 }
 
-.Switch__self:checked + .Switch__pseudo::after {
-  opacity: 0.48;
-  background: var(--vkui--color_icon_accent);
+.Switch--default:not(.Switch--disabled) .Switch__inputFake:active {
+  /* Switch__handle */
+  --vkui_internal--Switch__handle_scale: 1;
+  --vkui_internal--Switch__handle_shift_x_easing: cubic-bezier(0.2, 0, 0, 1);
 }
 
-.Switch--sizeY-compact .Switch__self:checked + .Switch__pseudo::before {
-  transform: translateX(
-    calc(var(--vkui--size_switch_width--compact) - var(--vkui--size_switch_height--compact))
-  );
+.Switch__track {
+  position: relative;
+  display: block;
+  inline-size: var(--vkui_internal--Switch__track_width);
+  block-size: var(--vkui_internal--Switch__track_height);
+  border-radius: var(--vkui_internal--Switch__track_shape);
+  background-color: var(--vkui_internal--Switch__track_color);
+  box-shadow: var(--vkui_internal--Switch__track_shadow);
+  transition: background-color var(--vkui_internal--Switch__track_color_duration) linear;
 }
 
-@media (--sizeY-compact) {
-  .Switch--sizeY-none .Switch__self:checked + .Switch__pseudo::before {
-    transform: translateX(
-      calc(var(--vkui--size_switch_width--compact) - var(--vkui--size_switch_height--compact))
-    );
-  }
-}
+.Switch__handle {
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  inline-size: var(--vkui_internal--Switch__handle_width);
+  block-size: var(--vkui_internal--Switch__handle_height);
+  border-radius: 9999px;
+  /* prettier-ignore */
+  transform: translate(var(--vkui_internal--Switch__handle_shift_x), var(--vkui_internal--Switch__handle_shift_y));
+  /* prettier-ignore */
+  transition: transform var(--vkui_internal--Switch__handle_shift_x_duration) var(--vkui_internal--Switch__handle_shift_x_easing);
+}
+
+.Switch__handle::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-color: var(--vkui_internal--Switch__handle_color);
+  box-shadow: var(--vkui_internal--Switch__handle_shadow);
+  transform: scale(var(--vkui_internal--Switch__handle_scale));
+  transition-property: transform, background-color;
+  transition-timing-function: var(--vkui_internal--Switch__handle_shift_x_easing), linear;
+  /* prettier-ignore */
+  transition-duration: var(--vkui_internal--Switch__handle_scale_duration), var(--vkui_internal--Switch__handle_color_duration);
+}
+
+.Switch__handle--withRipple::before {
+  --vkui_internal--Switch__handleRipple_opacity: 0;
+  --vkui_internal--Switch__handleRipple_opacity_duration: 15ms;
+  --vkui_internal--Switch__handleRipple_color: var(--vkui--color_icon_medium);
+  --vkui_internal--Switch__handleRipple_color_duration: 15ms;
 
-.Switch__self[disabled] + .Switch__pseudo {
-  opacity: var(--vkui--opacity_disable);
+  content: '';
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  inline-size: 40px;
+  block-size: 40px;
+  border-radius: inherit;
+  background-color: var(--vkui_internal--Switch__handleRipple_color);
+  opacity: var(--vkui_internal--Switch__handleRipple_opacity);
+  transform: translate(-50%, -50%);
+  transition-property: opacity, background-color;
+  /* prettier-ignore */
+  transition-duration:
+    var(--vkui_internal--Switch__handleRipple_opacity_duration),
+    var(--vkui_internal--Switch__handleRipple_color_duration);
+  transition-timing-function: linear;
 }
 
-/**
- * Пин
- */
-.Switch--ios .Switch__pseudo::before {
-  background: var(--vkui_internal--white);
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06),
-    inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
+@media (--sizeY-compact) {
+  .Switch__handle--withRipple::before {
+    inline-size: 32px;
+    block-size: 32px;
+  }
 }
 
-.Switch--ios .Switch__self:checked + .Switch__pseudo::before {
-  background: var(--vkui_internal--white);
+/* устройства с мышкой */
+@media (--hover-has) {
+  .Switch__inputFake:hover .Switch__handle--withRipple::before {
+    --vkui_internal--Switch__handleRipple_opacity: 0.08;
+  }
 }
 
-/**
- * Трек
- */
-.Switch--ios .Switch__pseudo::after {
-  background: var(--vkui--color_track_background);
+.Switch__inputFake:active .Switch__handle--withRipple::before {
+  --vkui_internal--Switch__handleRipple_opacity: 0.12;
 }
 
-.Switch--ios .Switch__self:checked + .Switch__pseudo::after {
-  opacity: 1;
+.Switch__inputNative:checked + .Switch__inputFake .Switch__handle--withRipple::before {
+  --vkui_internal--Switch__handleRipple_color: var(--vkui--color_background_accent);
 }
 
-/**
- * [a11y]
- * add animation for browsers that support prefers-reduced-motion
- * so that users with vestibular motion disorders have no problem
- * navigating accessible vkui apps via keyboard
- */
-@media (prefers-reduced-motion: no-preference) {
-  .Switch__pseudo::after {
-    transition: background-color 0.1s ease;
-  }
-
-  .Switch__pseudo::before {
-    transition: transform 0.1s ease;
-  }
-
-  .Switch--ios .Switch__pseudo::after {
-    transition: background-color 0.2s ease;
+/* тач-устройства */
+@media (--hover-has-not) {
+  .Switch__handle--withRipple::before {
+    --vkui_internal--Switch__handleRipple_opacity_duration: 375ms;
   }
 
-  .Switch--ios .Switch__pseudo::before {
-    transition: transform 0.2s cubic-bezier(0.36, -0.24, 0.26, 1.32);
+  .Switch__inputFake:active .Switch__handle--withRipple::before {
+    --vkui_internal--Switch__handleRipple_opacity_duration: 105ms;
   }
 }
 

package/src/components/Switch/Switch.tsx

@@ -6,12 +6,12 @@ import { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';
 import { usePlatform } from '../../hooks/usePlatform';
 import { callMultiple } from '../../lib/callMultiple';
 import { HasRef, HasRootRef } from '../../types';
-import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
+import { VisuallyHidden, type VisuallyHiddenProps } from '../VisuallyHidden/VisuallyHidden';
 import styles from './Switch.module.css';
 
 const sizeYClassNames = {
   none: styles['Switch--sizeY-none'],
-  ['compact']: styles['Switch--sizeY-compact'],
+  compact: styles['Switch--sizeY-compact'],
 };
 
 export interface SwitchProps
@@ -28,12 +28,18 @@ export const Switch = ({
   getRootRef,
   getRef,
   checked: checkedProp,
+  disabled,
+  onBlur: onBlurProp,
+  onFocus: onFocusProp,
+  onClick,
   ...restProps
 }: SwitchProps) => {
   const platform = usePlatform();
   const { sizeY = 'none' } = useAdaptivity();
   const { focusVisible, onBlur, onFocus } = useFocusVisible();
   const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'outside' });
+  const handleBlur = callMultiple(onBlur, onBlurProp);
+  const handleFocus = callMultiple(onFocus, onFocusProp);
 
   const [localUncontrolledChecked, setLocalUncontrolledChecked] = React.useState(
     Boolean(restProps.defaultChecked),
@@ -52,34 +58,54 @@ export const Switch = ({
     [isControlled],
   );
 
-  const ariaCheckedState = isControlled ? checkedProp : localUncontrolledChecked;
+  const inputProps: VisuallyHiddenProps<HTMLInputElement> = {
+    ...restProps,
+    Component: 'input',
+    getRootRef: getRef,
+    type: 'checkbox',
+    role: 'switch',
+    disabled: disabled,
+    onBlur: onBlurProp,
+    onFocus: onFocusProp,
+    onClick: callMultiple(syncUncontrolledCheckedStateOnClick, onClick),
+  };
+
+  if (isControlled) {
+    inputProps.checked = checkedProp;
+    inputProps['aria-checked'] = checkedProp ? 'true' : 'false';
+  } else {
+    inputProps['aria-checked'] = localUncontrolledChecked ? 'true' : 'false';
+  }
+
   return (
     <label
       className={classNames(
         styles['Switch'],
-        platform === 'ios' && styles['Switch--ios'],
         sizeY !== 'regular' && sizeYClassNames[sizeY],
-        restProps.disabled && styles['Switch--disabled'],
+        platform === 'ios' ? styles['Switch--ios'] : styles['Switch--default'],
+        disabled && styles['Switch--disabled'],
         focusVisibleClassNames,
         className,
       )}
       style={style}
       ref={getRootRef}
-      onBlur={callMultiple(onBlur, restProps.onBlur)}
-      onFocus={callMultiple(onFocus, restProps.onFocus)}
     >
       <VisuallyHidden
-        {...restProps}
-        {...(isControlled && { checked: checkedProp })}
-        Component="input"
-        getRootRef={getRef}
-        onClick={callMultiple(syncUncontrolledCheckedStateOnClick, restProps.onClick)}
-        type="checkbox"
-        role="switch"
-        aria-checked={ariaCheckedState ? 'true' : 'false'}
-        className={styles['Switch__self']}
+        {...inputProps}
+        className={styles['Switch__inputNative']}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
       />
-      <span aria-hidden className={styles['Switch__pseudo']} />
+      <span aria-hidden className={styles['Switch__inputFake']}>
+        <span className={styles['Switch__track']} />
+        <span
+          aria-hidden
+          className={classNames(
+            styles['Switch__handle'],
+            platform !== 'ios' && !disabled && styles['Switch__handle--withRipple'],
+          )}
+        />
+      </span>
     </label>
   );
 };

package/src/components/TabsItem/TabsItem.module.css

@@ -66,11 +66,13 @@
 
 /* mode="accent" */
 .TabsItem--mode-accent {
-  transition: background-color 150ms ease-out, box-shadow 150ms ease-out;
+  transition:
+    background-color 150ms ease-out,
+    box-shadow 150ms ease-out;
 }
 
 .TabsItem--selected.TabsItem--mode-accent {
-  background-color: var(--vkui--color_background_modal);
+  background-color: var(--vkui--color_background_contrast_themed);
   box-shadow: var(--vkui--elevation2);
 }
 

package/src/components/Tappable/Ripple.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { classNames, hasMouse as hasPointerLib, noop } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
-import { useTimeout } from '../../hooks/useTimeout';
 import { getOffsetRect } from '../../lib/offset';
 import styles from './Tappable.module.css';
 
@@ -39,14 +38,23 @@ export const useRipple = (needRipple: boolean, hasPointerContext: boolean | unde
     [],
   );
 
-  const clearClicks = useTimeout(() => setClicks([]), WAVE_LIVE);
+  React.useEffect(
+    function setClearClicksTimeout() {
+      const clicksTimeoutId = clicks.length > 0 ? setTimeout(() => setClicks([]), WAVE_LIVE) : null;
+      return function cancelClearClicksTimeout() {
+        if (clicksTimeoutId) {
+          clearTimeout(clicksTimeoutId);
+        }
+      };
+    },
+    [clicks],
+  );
 
   function addClick(x: number, y: number, pointerId: number) {
     const dateNow = Date.now();
     const filteredClicks = clicks.filter((click) => click.id + WAVE_LIVE > dateNow);
 
     setClicks([...filteredClicks, { x, y, id: dateNow, pointerId }]);
-    clearClicks.set();
     pointerDelayTimers.delete(pointerId);
   }
 

package/src/components/Tappable/Tappable.module.css

@@ -46,8 +46,6 @@ https://github.com/VKCOM/VKUI/pull/3641
   overflow: hidden;
   border-radius: inherit;
   transition: background-color 0.15s ease-out;
-  /* Fix for Safari: css animation + border-radius + overflow ignores parent border-radius */
-  will-change: transform;
 }
 
 /**

package/src/components/Textarea/Textarea.tsx

@@ -6,6 +6,7 @@ import { callMultiple } from '../../lib/callMultiple';
 import { HasAlign, HasRef, HasRootRef } from '../../types';
 import { FormField, FormFieldProps } from '../FormField/FormField';
 import { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';
+import { useResizeTextarea } from './useResizeTextarea';
 import styles from './Textarea.module.css';
 
 const sizeYClassNames = {
@@ -43,25 +44,12 @@ export const Textarea = ({
   mode,
   ...restProps
 }: TextareaProps) => {
-  const currentScrollHeight = React.useRef<number>();
-  const elementRef = useExternRef(getRef);
   const { sizeY = 'none' } = useAdaptivity();
 
-  const autosizeInput = () => {
-    const el = elementRef.current;
+  const [refResizeTextarea, resize] = useResizeTextarea(onResize, grow);
+  const elementRef = useExternRef(getRef, refResizeTextarea);
 
-    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;
-      }
-    }
-  };
-
-  React.useEffect(autosizeInput, [grow, sizeY, elementRef, onResize]);
+  React.useEffect(resize, [resize, sizeY]);
 
   return (
     <FormField
@@ -84,7 +72,7 @@ export const Textarea = ({
         style={{ maxHeight }}
         rows={rows}
         className={styles['Textarea__el']}
-        onChange={callMultiple(onChange, autosizeInput)}
+        onChange={callMultiple(onChange, resize)}
         getRootRef={elementRef}
       />
     </FormField>

package/src/components/Textarea/useResizeTextarea.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+export function useResizeTextarea(
+  onResize: ((el: HTMLTextAreaElement) => void) | undefined,
+  grow = true,
+) {
+  const elementRef = React.useRef<HTMLTextAreaElement>(null);
+  const currentScrollHeight = React.useRef<number>();
+
+  const resizeElement = React.useCallback(
+    (el: HTMLTextAreaElement) => {
+      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, onResize],
+  );
+
+  const resize = React.useCallback(() => {
+    const el = elementRef.current;
+    if (!el) {
+      return;
+    }
+
+    resizeElement(el);
+  }, [elementRef, resizeElement]);
+
+  return [elementRef, resize] as const;
+}

package/src/components/TooltipBase/TooltipBase.module.css

@@ -3,7 +3,7 @@
 }
 
 .TooltipBase__content {
-  background-color: var(--vkui--color_background_modal);
+  background-color: var(--vkui--color_background_contrast_themed);
   box-shadow: var(--vkui--elevation3);
   padding-block: 9px 10px;
   padding-inline: 12px;
@@ -12,7 +12,7 @@
 }
 
 .TooltipBase__arrow {
-  color: var(--vkui--color_background_modal);
+  color: var(--vkui--color_background_contrast_themed);
 }
 
 .TooltipBase--appearance-accent .TooltipBase__content {

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

@@ -23,12 +23,14 @@ export const Caption = ({
   caps,
   Component = 'span',
   normalize = true,
+  inline = false,
   ...restProps
 }: CaptionProps) => {
   return (
     <Typography
       Component={Component}
       normalize={normalize}
+      inline={inline}
       className={classNames(className, caps && styles['Caption--caps'], stylesLevel[level])}
       {...restProps}
     />