@vkontakte/vkui 4.33.3 → 4.34.1

package/src/components/Switch/Switch.css

@@ -43,7 +43,7 @@
   border-radius: 50%;
   box-sizing: border-box;
   background: var(--vkui--color_icon_contrast_secondary);
-  box-shadow: 0 0 2px 0 rgb(0 0 0 / 12%), 0 2px 2px 0 rgb(0 0 0 / 24%);
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
 
   /* Делаем пин по центру */
   top: calc(
@@ -133,8 +133,8 @@
  */
 .Switch--ios .Switch__pseudo::before {
   background: var(--white);
-  box-shadow: 0 3px 8px rgb(0 0 0 / 15%), 0 3px 1px rgb(0 0 0 / 6%),
-    inset 0 0 0 0.5px rgb(0 0 0 / 4%);
+  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);
 }
 
 .Switch--ios .Switch__self:checked + .Switch__pseudo::before {

package/src/components/Switch/Switch.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { callMultiple } from "../../lib/callMultiple";
@@ -20,7 +19,7 @@ export interface SwitchProps
 /**
  * @see https://vkcom.github.io/VKUI/#/Switch
  */
-export const Switch: React.FC<SwitchProps> = ({
+export const Switch = ({
   style,
   className,
   getRootRef,

package/src/components/Tabbar/Tabbar.css

@@ -7,7 +7,10 @@
   height: var(--tabbar_height);
   padding-bottom: var(--safe-area-inset-bottom);
   box-sizing: content-box;
-  background: var(--header_alternate_background);
+  background: var(
+    --header_alternate_background,
+    var(--vkui--color_background_tertiary)
+  );
 }
 
 .Tabbar__in {
@@ -16,10 +19,18 @@
   overflow: hidden;
 }
 
+.Tabbar--shadow {
+  box-shadow: var(--vkui--elevation3);
+}
+
 /**
  * iOS
  */
 
+.Tabbar--ios.Tabbar--shadow {
+  box-shadow: none;
+}
+
 .Tabbar--ios.Tabbar--shadow::before {
   position: absolute;
   bottom: 100%;
@@ -42,12 +53,3 @@
     transform: scaleY(0.33);
   }
 }
-
-/**
- * Android & VKCOM
- */
-
-.Tabbar--android.Tabbar--shadow,
-.Tabbar--vkcom.Tabbar--shadow {
-  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.06), 0 0 2px 0 rgba(0, 0, 0, 0.08);
-}

package/src/components/Tabbar/Tabbar.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
+import { Platform } from "../../lib/platform";
 import "./Tabbar.css";
 
 export interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -15,7 +15,7 @@ export interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabbar
  */
-export const Tabbar: React.FunctionComponent<TabbarProps> = ({
+export const Tabbar = ({
   children,
   shadow = true,
   itemsLayout,
@@ -35,13 +35,11 @@ export const Tabbar: React.FunctionComponent<TabbarProps> = ({
 
   return (
     <div
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
-        getClassName("Tabbar", platform),
+        "Tabbar",
+        platform === Platform.IOS && "Tabbar--ios",
         `Tabbar--l-${getItemsLayout()}`,
-        {
-          "Tabbar--shadow": shadow,
-        }
+        shadow && "Tabbar--shadow"
       )}
       {...restProps}
     >

package/src/components/TabbarItem/TabbarItem.tsx

@@ -34,7 +34,7 @@ const warn = warnOnce("TabbarItem");
 /**
  * @see https://vkcom.github.io/VKUI/#/TabbarItem
  */
-export const TabbarItem: React.FunctionComponent<TabbarItemProps> = ({
+export const TabbarItem = ({
   children,
   selected,
   label,

package/src/components/Tabs/Tabs.css

@@ -100,3 +100,15 @@
   position: relative;
   top: 1px;
 }
+
+/*
+ * CMP:
+ * Group
+ */
+.Group--plain .Group__inner > .Tabs--default:first-child {
+  margin-top: -8px;
+}
+
+.Group--card > .Group__inner > .Tabs--default:first-child {
+  margin-top: -4px;
+}

package/src/components/Tabs/Tabs.tsx

@@ -17,7 +17,7 @@ export interface TabsProps
 export const TabsModeContext =
   React.createContext<TabsProps["mode"]>("default");
 
-const TabsComponent: React.FunctionComponent<TabsProps> = ({
+const TabsComponent = ({
   children,
   mode = "default",
   getRootRef,

package/src/components/TabsItem/TabsItem.tsx

@@ -19,7 +19,7 @@ export interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/TabsItem
  */
-export const TabsItem: React.FC<TabsItemProps> = ({
+export const TabsItem = ({
   children,
   selected = false,
   after,

package/src/components/Tappable/Readme.md

@@ -4,7 +4,7 @@
 - цвет фона в зависимости от состояния
 - ripple-эффект при нажатии, если это платформа `ANDROID`
 
-Используется внутри всех контролов. Например, [Button](#/Button), [Cell](#/Cell), [ActionSheetItem](#/ActionSheetItem) и т.п.
+Используется внутри всех контролов. Например, [Button](https://vkcom.github.io/VKUI/#/Button), [Cell](https://vkcom.github.io/VKUI/#/Cell), [ActionSheetItem](https://vkcom.github.io/VKUI/#/ActionSheetItem) и т.п.
 
 ```jsx { "props": { "layout": false, "iframe": false } }
 const Example = () => {

package/src/components/TextTooltip/Readme.md

@@ -1,6 +1,6 @@
 > **Важно**
 >
-> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
+> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](https://vkcom.github.io/VKUI/#/Unstable).
 
 Тултип, открывающийся при наведении мыши на `children`. В качестве содержимого тултипа рекомендуется использовать только текст.
 

package/src/components/TextTooltip/TextTooltip.tsx

@@ -22,7 +22,7 @@ export interface TextTooltipProps
 /**
  * @see https://vkcom.github.io/VKUI/#/TextTooltip
  */
-export const TextTooltip: React.FC<TextTooltipProps> = ({
+export const TextTooltip = ({
   children,
   text,
   header,

package/src/components/Textarea/Textarea.css

@@ -9,8 +9,9 @@
   box-sizing: border-box;
   resize: none;
   appearance: none;
-  line-height: 20px;
-  font-size: 16px;
+  font-weight: var(--vkui--font_text--font_weight--regular);
+  font-size: var(--vkui--font_text--font_size--regular);
+  line-height: var(--vkui--font_text--line_height--regular);
   color: var(--text_primary, var(--vkui--color_text_primary));
   padding: 12px;
   max-height: 204px;
@@ -26,7 +27,8 @@
 
 /* TODO. v5.0.0 Новая адаптивность */
 .Textarea--sizeY-compact .Textarea__el {
-  font-size: 15px;
+  font-size: var(--vkui--font_text--font_size--compact);
+  line-height: var(--vkui--font_text--line_height--compact);
   max-height: 196px;
 }
 

package/src/components/Textarea/Textarea.tsx

@@ -21,7 +21,7 @@ export interface TextareaProps
 /**
  * @see https://vkcom.github.io/VKUI/#/Textarea
  */
-const TextareaComponent: React.FC<TextareaProps> = ({
+const TextareaComponent = ({
   defaultValue = "",
   grow = true,
   style,

package/src/components/Tooltip/Readme.md

@@ -2,7 +2,7 @@
 хочется представить новый функционал. Это достаточно сложный с точки зрения управления компонент, поэтому он
 требует подробной документации.
 
-Для показа тултипа по ховеру, воспользуйтесь [`RichTooltip`](#/RichTooltip) или [`TextTooltip`](#/TextTooltip).
+Для показа тултипа по ховеру, воспользуйтесь [`RichTooltip`](https://vkcom.github.io/VKUI/#/RichTooltip) или [`TextTooltip`](https://vkcom.github.io/VKUI/#/TextTooltip).
 
 ### Концепция
 

package/src/components/Tooltip/Tooltip.css

@@ -49,13 +49,13 @@
 .Tooltip__corner::before {
   content: "";
   display: block;
-  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDIwIDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+dG9vbHRpcF90aXA8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iTWFzdGVyLUtpdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8cGF0aCBkPSJNMTAsMCBDMTMuNSwwIDE1LjUsOCAyMCw4IEwwLDggQzQuNSw4IDYuNSwwIDEwLDAgWiIgaWQ9InRvb2x0aXBfdGlwIiBmaWxsPSIjNDdhM2ZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4gICAgPC9nPjwvc3ZnPg==);
+  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDIwIDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+dG9vbHRpcF90aXA8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iTWFzdGVyLUtpdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8cGF0aCBkPSJNMTAsMCBDMTMuNSwwIDE1LjUsOCAyMCw4IEwwLDggQzQuNSw4IDYuNSwwIDEwLDAgWiIgaWQ9InRvb2x0aXBfdGlwIiBmaWxsPSIjNDdhM2ZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4gICAgPC9nPjwvc3ZnPg==");
   width: 20px;
   height: 8px;
 }
 
 .Tooltip--light .Tooltip__corner::before {
-  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDIwIDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+dG9vbHRpcF90aXA8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iTWFzdGVyLUtpdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8cGF0aCBkPSJNMTAsMCBDMTMuNSwwIDE1LjUsOCAyMCw4IEwwLDggQzQuNSw4IDYuNSwwIDEwLDAgWiIgaWQ9InRvb2x0aXBfdGlwIiBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4gICAgPC9nPjwvc3ZnPg==);
+  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDIwIDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+dG9vbHRpcF90aXA8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iTWFzdGVyLUtpdCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8cGF0aCBkPSJNMTAsMCBDMTMuNSwwIDE1LjUsOCAyMCw4IEwwLDggQzQuNSw4IDYuNSwwIDEwLDAgWiIgaWQ9InRvb2x0aXBfdGlwIiBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4gICAgPC9nPjwvc3ZnPg==");
 }
 
 .Tooltip__content {

package/src/components/Tooltip/Tooltip.tsx

@@ -12,6 +12,7 @@ import { useDOM } from "../../lib/dom";
 import { warnOnce } from "../../lib/warnOnce";
 import { hasReactNode } from "../../lib/utils";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
+import { HasRootRef } from "../../types";
 import "./Tooltip.css";
 
 interface SimpleTooltipProps extends Partial<TooltipProps> {
@@ -76,7 +77,9 @@ export interface TooltipProps {
    * свойство `getRootRef`, которое должно возвращаться ссылку на корневой DOM-элемент компонента,
    * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.
    */
-  children: React.ReactElement;
+  children:
+    | React.ReactElement<HasRootRef<any>>
+    | React.ReactElement<React.PropsWithRef<any>>;
   mode?: "accent" | "light";
   /**
    * Если передан `false`, то рисуется просто `children`.
@@ -155,7 +158,7 @@ function isVerticalPlacement(placement: Placement) {
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */
-export const Tooltip: React.FC<TooltipProps> = ({
+export const Tooltip = ({
   children,
   isShown: _isShown = true,
   offsetX = 0,
@@ -167,7 +170,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
   cornerAbsoluteOffset,
   mode = "accent",
   ...restProps
-}) => {
+}: TooltipProps) => {
   const { entering } = useNavTransition();
   const isShown = _isShown && !entering;
   const [tooltipRef, setTooltipRef] = React.useState<HTMLElement | null>(null);

package/src/components/Touch/Touch.tsx

@@ -66,7 +66,7 @@ export type DragHandler = (e: React.DragEvent<HTMLElement>) => void;
 /**
  * @see https://vkcom.github.io/VKUI/#/Touch
  */
-export const Touch: React.FC<TouchProps> = ({
+export const Touch = ({
   onStart,
   onStartX,
   onStartY,

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

@@ -22,7 +22,7 @@ const warn = warnOnce("Caption");
 /**
  * @see https://vkcom.github.io/VKUI/#/Caption
  */
-export const Caption: React.FC<CaptionProps> = ({
+export const Caption = ({
   children,
   weight,
   level = "1",

package/src/components/Typography/Headline/Headline.tsx

@@ -21,7 +21,7 @@ export interface HeadlineProps
 /**
  * @see https://vkcom.github.io/VKUI/#/Headline
  */
-export const Headline: React.FC<HeadlineProps> = ({
+export const Headline = ({
   children,
   weight = "3",
   level = "1",

package/src/components/Typography/Paragraph/Paragraph.tsx

@@ -19,13 +19,13 @@ const warn = warnOnce("Paragraph");
 /**
  * @see https://vkcom.github.io/VKUI/#/Paragraph
  */
-export const Paragraph: React.FC<ParagraphProps> = ({
+export const Paragraph = ({
   Component = "span",
   getRootRef,
   weight,
   children,
   ...restProps
-}) => {
+}: ParagraphProps) => {
   if (
     process.env.NODE_ENV === "development" &&
     typeof Component !== "string" &&

package/src/components/Typography/Subhead/Subhead.tsx

@@ -21,12 +21,12 @@ const warn = warnOnce("Subhead");
 /**
  * @see https://vkcom.github.io/VKUI/#/Subhead
  */
-export const Subhead: React.FC<SubheadProps> = ({
+export const Subhead = ({
   children,
   weight,
   Component = "h5",
   ...restProps
-}) => {
+}: SubheadProps) => {
   const { sizeY } = useAdaptivity();
 
   if (process.env.NODE_ENV === "development") {

package/src/components/Typography/Text/Text.tsx

@@ -21,7 +21,7 @@ const warn = warnOnce("Text");
 /**
  * @see https://vkcom.github.io/VKUI/#/Text
  */
-export const Text: React.FC<TextProps> = ({
+export const Text = ({
   children,
   weight,
   Component = "span",

package/src/components/Typography/Title/Title.tsx

@@ -29,13 +29,13 @@ const warn = warnOnce("Title");
 /**
  * @see https://vkcom.github.io/VKUI/#/Title
  */
-export const Title: React.FC<TitleProps> = ({
+export const Title = ({
   children,
   weight,
   level = "1",
   Component,
   ...restProps
-}) => {
+}: TitleProps) => {
   if (!Component) {
     Component = ("h" + level) as React.ElementType;
   }

package/src/components/UsersStack/UsersStack.css

@@ -71,11 +71,3 @@
 .ModalCardBase .UsersStack {
   margin-top: 20px;
 }
-
-/**
- * CMP:
- * RichCell
- */
-.RichCell__bottom .UsersStack {
-  padding: 5px 0 0;
-}

package/src/components/View/Readme.md

@@ -41,7 +41,7 @@ const [activePanel, setActivePanel] = useState("panel1");
 </View>;
 ```
 
-### <a id="/View?id=iosswipeback"></a>[iOS Swipe Back](#/View?id=iosswipeback)
+### <a id="/View?id=iosswipeback"></a>[iOS Swipe Back](https://vkcom.github.io/VKUI/#/View?id=iosswipeback)
 
 В iOS есть возможность свайпнуть от левого края назад, чтобы перейти на предыдущую панель. Для того, чтобы
 повторить такое поведение в VKUI нужно:

package/src/components/VisuallyHiddenInput/VisuallyHiddenInput.tsx

@@ -13,10 +13,10 @@ export interface VisuallyHiddenInputProps
  * скрыть его визуально и оставить
  * доступным для ассистивных технологий.
  */
-export const VisuallyHiddenInput: React.FC<VisuallyHiddenInputProps> = ({
+export const VisuallyHiddenInput = ({
   getRef,
   ...restProps
-}) => {
+}: VisuallyHiddenInputProps) => {
   const inputRef = useExternRef(getRef);
 
   return (

package/src/components/WriteBar/WriteBar.css

@@ -39,6 +39,7 @@
   color: var(--text_placeholder);
 }
 
+/* stylelint-disable-next-line selector-no-vendor-prefix */
 .WriteBar__textarea::-moz-placeholder {
   opacity: 1;
   color: var(--text_placeholder);

package/src/components/WriteBar/WriteBar.tsx

@@ -33,24 +33,20 @@ export interface WriteBarProps
 /**
  * @see https://vkcom.github.io/VKUI/#/WriteBar
  */
-export const WriteBar: React.FC<WriteBarProps> = (props: WriteBarProps) => {
+export const WriteBar = ({
+  className,
+  style,
+  before,
+  inlineAfter,
+  after,
+  value,
+  onChange,
+  getRootRef,
+  getRef,
+  onHeightChange,
+  ...restProps
+}: WriteBarProps) => {
   const platform = usePlatform();
-  const {
-    className,
-    style,
-
-    before,
-    inlineAfter,
-    after,
-
-    value,
-    onChange,
-
-    getRootRef,
-    getRef,
-    onHeightChange,
-    ...restProps
-  } = props;
 
   const isControlledOutside = value != null;
 

package/src/components/WriteBarIcon/WriteBarIcon.tsx

@@ -40,7 +40,7 @@ const IS_DEV = process.env.NODE_ENV === "development";
 /**
  * @see https://vkcom.github.io/VKUI/#/WriteBarIcon
  */
-export const WriteBarIcon: React.FC<WriteBarIconProps> = ({
+export const WriteBarIcon = ({
   mode,
   children,
   count,

package/src/helpers/getScheme.ts

@@ -4,7 +4,7 @@ import { Scheme } from "./scheme";
 
 export interface GetSchemeProps {
   platform?: PlatformType;
-  appearance: AppearanceType;
+  appearance?: AppearanceType;
 }
 
 export function getScheme({ platform, appearance }: GetSchemeProps): Scheme {
@@ -16,7 +16,7 @@ export function getScheme({ platform, appearance }: GetSchemeProps): Scheme {
         default:
           return Scheme.SPACE_GRAY;
       }
-    case "light":
+    default:
       switch (platform) {
         case VKCOM:
           return Scheme.VKCOM_LIGHT;

package/src/helpers/scheme.ts

@@ -51,13 +51,14 @@ export function normalizeScheme({
   scheme,
   appearance,
 }: NormalizeSchemeProps): Scheme | "inherit" {
-  if (appearance) {
-    return getScheme({ platform, appearance });
-  }
-
   if (scheme === "inherit") {
     return scheme;
   }
+
+  if (appearance || scheme === undefined) {
+    return getScheme({ platform, appearance });
+  }
+
   if (scheme === Scheme.VKCOM) {
     process.env.NODE_ENV === "development" &&
       warn(

package/src/hoc/withAdaptivity.tsx

@@ -25,9 +25,9 @@ export function withAdaptivity<T extends AdaptivityProps>(
   TargetComponent: React.ComponentType<T>,
   config: Config
 ): React.FC<Omit<T, keyof AdaptivityContextInterface> & SizeProps> {
-  const AdaptivityConsumer: React.ComponentType<
-    Omit<T, keyof AdaptivityContextInterface> & SizeProps
-  > = (props: Omit<T, keyof AdaptivityContextInterface> & SizeProps) => {
+  const AdaptivityConsumer = (
+    props: Omit<T, keyof AdaptivityContextInterface> & SizeProps
+  ) => {
     const context = React.useContext(AdaptivityContext);
     let update = false;
 

package/src/hoc/withInsets.tsx

@@ -3,7 +3,7 @@ import { HasInsets } from "../types";
 
 export function withInsets<T extends HasInsets>(
   Component: React.ComponentType<T>
-): React.FC<Omit<T, keyof HasInsets>> {
+): React.ComponentType<Omit<T, keyof HasInsets>> {
   function WithInsets(props: Omit<T, keyof HasInsets>) {
     const insets = useInsets();
     return <Component {...(props as T)} insets={insets} />;

package/src/hooks/useEnsuredControl.ts

@@ -1,13 +1,13 @@
 import * as React from "react";
 
-export function useEnsuredControl<V, E>(
+export function useEnsuredControl<V, E extends React.ChangeEvent<any>>(
   props: { value?: V; onChange?: (e: E) => any },
   options: { defaultValue: V }
 ): [V | undefined, (e: E) => any] {
   const isControlled = props.hasOwnProperty("value");
   const [localValue, setLocalValue] = React.useState(options.defaultValue);
   const onChange = React.useCallback(
-    (e) => {
+    (e: E) => {
       !isControlled && setLocalValue(e.target.value);
       props.onChange && props.onChange(e);
     },

package/src/hooks/useEventListener.ts

@@ -34,7 +34,10 @@ export function useEventListener<
   useIsomorphicLayoutEffect(() => {
     cbRef.current = _cb;
   }, [_cb]);
-  const cb = React.useCallback((e) => cbRef.current && cbRef.current(e), []);
+  const cb = React.useCallback(
+    (e: any) => cbRef.current && cbRef.current(e),
+    []
+  );
 
   const detach = React.useRef(noop);
   const remove = React.useCallback(() => {

package/src/index.ts

@@ -84,7 +84,7 @@ export { IconButton } from "./components/IconButton/IconButton";
 export type { IconButtonProps } from "./components/IconButton/IconButton";
 export { Card } from "./components/Card/Card";
 export type { CardProps } from "./components/Card/Card";
-export { default as CardGrid } from "./components/CardGrid/CardGrid";
+export { CardGrid } from "./components/CardGrid/CardGrid";
 export type { CardGridProps } from "./components/CardGrid/CardGrid";
 export { CardScroll } from "./components/CardScroll/CardScroll";
 export type { CardScrollProps } from "./components/CardScroll/CardScroll";

package/src/lib/SSR.tsx

@@ -18,14 +18,17 @@ export const SSRContext = React.createContext<SSRContextInterface>({
 export interface SSRWrapperProps {
   userAgent?: string;
   browserInfo?: BrowserInfo;
+  children?: React.ReactNode;
 }
 
 /**
  * @see https://vkcom.github.io/VKUI/#/SSR
  */
-export const SSRWrapper: React.FC<SSRWrapperProps> = (props) => {
-  let { userAgent, browserInfo, children } = props;
-
+export const SSRWrapper = ({
+  userAgent,
+  browserInfo,
+  children,
+}: SSRWrapperProps) => {
   if (!browserInfo && userAgent) {
     browserInfo = computeBrowserInfo(userAgent);
   }

package/src/lib/classScopingMode.ts

@@ -1,4 +1,5 @@
 // exported for tests =(
+// eslint-disable-next-line @typescript-eslint/naming-convention
 export const __controller = {
   _noConflict: false,
   _isSet: false,

package/src/lib/dom.tsx

@@ -31,7 +31,7 @@ export const useDOM = () => {
 export function withDOM<Props>(
   Component: React.ComponentType<Props & DOMProps>
 ): React.ComponentType<Props> {
-  const WithDOM: React.FC<Props> = (props: Props) => {
+  const WithDOM = (props: Props) => {
     const dom = useDOM();
     return <Component {...props} {...dom} />;
   };

package/src/lib/jsxRuntime.d.ts

@@ -1,6 +1,6 @@
 import { createScopedElement as _jsxFactory } from "./jsxRuntime";
-type jsxFactory = typeof _jsxFactory;
+type JSXFactory = typeof _jsxFactory;
 
 declare global {
-  const createScopedElement: jsxFactory;
+  const createScopedElement: JSXFactory;
 }

package/src/testing/setup.ts

@@ -1 +1,4 @@
 import "@testing-library/jest-dom";
+import { getTestRule } from "jest-preset-stylelint";
+
+global.testRule = getTestRule();