@vkontakte/vkui 4.22.2 → 4.25.1

package/src/styles/space_gray.css

@@ -2,7 +2,9 @@
 /*
 * Этот файл сгенерирован автоматически. Не надо править его руками.
 */
-body[scheme="space_gray"], [scheme="space_gray"] {
+body[scheme="space_gray"],
+[scheme="space_gray"],
+.vkuispace_gray {
   --accent: #71aaeb;
   --accent_alternate: #ffffff;
   --action_sheet_action_foreground: #ffffff;
@@ -32,14 +34,14 @@ body[scheme="space_gray"], [scheme="space_gray"] {
   --button_primary_background: #e1e3e6;
   --button_primary_foreground: #19191a;
   --button_secondary_background: #454647;
-  --button_secondary_background_highlighted: rgba(69, 70, 71, 0.60);
+  --button_secondary_background_highlighted: rgba(69, 70, 71, 0.6);
   --button_secondary_destructive_background: #454647;
-  --button_secondary_destructive_background_highlighted: rgba(69, 70, 71, 0.60);
+  --button_secondary_destructive_background_highlighted: rgba(69, 70, 71, 0.6);
   --button_secondary_destructive_foreground: #ff5c5c;
-  --button_secondary_destructive_foreground_highlighted: rgba(255, 92, 92, 0.60);
+  --button_secondary_destructive_foreground_highlighted: rgba(255, 92, 92, 0.6);
   --button_secondary_foreground: #e1e3e6;
-  --button_secondary_foreground_highlighted: rgba(225, 227, 230, 0.60);
-  --button_tertiary_background: rgba(0, 0, 0, 0.00);
+  --button_secondary_foreground_highlighted: rgba(225, 227, 230, 0.6);
+  --button_tertiary_background: rgba(0, 0, 0, 0);
   --button_tertiary_foreground: #e1e3e6;
   --cell_button_foreground: #e1e3e6;
   --content_placeholder_icon: #aaaeb3;
@@ -93,7 +95,7 @@ body[scheme="space_gray"], [scheme="space_gray"] {
   --header_tab_inactive_text: #76787a;
   --header_text: #e1e3e6;
   --header_text_alternate: #e1e3e6;
-  --header_text_secondary: rgba(255, 255, 255, 0.60);
+  --header_text_secondary: rgba(255, 255, 255, 0.6);
   --header_tint: #e1e3e6;
   --header_tint_alternate: #e1e3e6;
   --icon_alpha_placeholder: #e1e3e6;
@@ -107,12 +109,12 @@ body[scheme="space_gray"], [scheme="space_gray"] {
   --icon_tertiary: #5d5f61;
   --icon_tertiary_alpha: rgba(255, 255, 255, 0.24);
   --im_attach_tint: #ffffff;
-  --im_bubble_border_alternate: rgba(0, 0, 0, 0.00);
-  --im_bubble_border_alternate_highlighted: rgba(0, 0, 0, 0.00);
+  --im_bubble_border_alternate: rgba(0, 0, 0, 0);
+  --im_bubble_border_alternate_highlighted: rgba(0, 0, 0, 0);
   --im_bubble_button_background: rgba(255, 255, 255, 0.16);
   --im_bubble_button_background_highlighted: rgba(255, 255, 255, 0.24);
   --im_bubble_button_foreground: #e1e3e6;
-  --im_bubble_button_outgoing_background: rgba(255, 255, 255, 0.20);
+  --im_bubble_button_outgoing_background: rgba(255, 255, 255, 0.2);
   --im_bubble_gift_background: #857250;
   --im_bubble_gift_background_highlighted: #ab9871;
   --im_bubble_gift_text: #ffffff;
@@ -147,7 +149,7 @@ body[scheme="space_gray"], [scheme="space_gray"] {
   --input_border: #2c2d2e;
   --landing_background: #19191a;
   --landing_field_background: #232324;
-  --landing_field_border: rgba(0, 0, 0, 0.00);
+  --landing_field_border: rgba(0, 0, 0, 0);
   --landing_field_placeholder: #aaaeb3;
   --landing_login_button_background: #e1e3e6;
   --landing_login_button_foreground: #19191a;
@@ -156,7 +158,7 @@ body[scheme="space_gray"], [scheme="space_gray"] {
   --landing_secondary_button_background: rgba(255, 255, 255, 0.15);
   --landing_secondary_button_foreground: #ffffff;
   --landing_snippet_border: rgba(255, 255, 255, 0.15);
-  --landing_tertiary_button_background: rgba(0, 0, 0, 0.00);
+  --landing_tertiary_button_background: rgba(0, 0, 0, 0);
   --landing_tertiary_button_foreground: #ffffff;
   --landing_text_primary: #e1e3e6;
   --landing_text_secondary: #76787a;
@@ -185,7 +187,7 @@ body[scheme="space_gray"], [scheme="space_gray"] {
   --placeholder_icon_foreground_secondary: #5d5f61;
   --placeholder_icon_tint: #ffffff;
   --poll_option_background: #ffffff;
-  --primary_overlay_badge: rgba(255, 255, 255, 0.40);
+  --primary_overlay_badge: rgba(255, 255, 255, 0.4);
   --search_bar_background: #19191a;
   --search_bar_field_background: #363738;
   --search_bar_field_tint: #aaaeb3;
@@ -205,7 +207,7 @@ body[scheme="space_gray"], [scheme="space_gray"] {
   --snippet_border: rgba(255, 255, 255, 0.15);
   --snippet_icon_tertiary: #5d5f61;
   --splashscreen_icon: #2c2d2e;
-  --statusbar_alternate_legacy_background: rgba(0, 0, 0, 0.00);
+  --statusbar_alternate_legacy_background: rgba(0, 0, 0, 0);
   --stories_create_button_background_from: #363738;
   --stories_create_button_background_to: #363738;
   --stories_create_button_foreground: #c4c8cc;

package/src/styles/themes.css

@@ -1,4 +1,4 @@
-@import './bright_light.css';
-@import './space_gray.css';
-@import './vkcom_light.css';
-@import './vkcom_dark.css';
+@import "./bright_light.css";
+@import "./space_gray.css";
+@import "./vkcom_light.css";
+@import "./vkcom_dark.css";

package/src/styles/unstable.css

@@ -1,3 +1,6 @@
 /* Forms */
-@import '../components/ChipsSelect/ChipsSelect.css';
-@import '../components/SimpleCheckbox/SimpleCheckbox.css';
+@import "../components/ChipsSelect/ChipsSelect.css";
+@import "../components/SimpleCheckbox/SimpleCheckbox.css";
+@import "../components/Dropdown/Dropdown.css";
+@import "../components/TextTooltip/TextTooltip.css";
+@import "../components/RichTooltip/RichTooltip.css";

package/src/styles/vkcom_dark.css

@@ -2,7 +2,9 @@
 /*
 * Этот файл сгенерирован автоматически. Не надо править его руками.
 */
-body[scheme="vkcom_dark"], [scheme="vkcom_dark"] {
+body[scheme="vkcom_dark"],
+[scheme="vkcom_dark"],
+.vkuivkcom_dark {
   --accent: #71aaeb;
   --accent_alternate: #ffffff;
   --action_sheet_action_foreground: #ffffff;
@@ -21,7 +23,7 @@ body[scheme="vkcom_dark"], [scheme="vkcom_dark"] {
   --background_light: #292929;
   --background_page: #0a0a0a;
   --background_suggestions: #333333;
-  --background_text_highlighted: rgba(81, 129, 184, 0.20);
+  --background_text_highlighted: rgba(81, 129, 184, 0.2);
   --button_bot_shadow: #222222;
   --button_commerce_background: #4bb34b;
   --button_commerce_foreground: #ffffff;
@@ -34,12 +36,17 @@ body[scheme="vkcom_dark"], [scheme="vkcom_dark"] {
   --button_secondary_background: #555555;
   --button_secondary_background_highlighted: #656565;
   --button_secondary_destructive_background: #555555;
-  --button_secondary_destructive_background_highlighted: rgba(85, 85, 85, 0.60);
+  --button_secondary_destructive_background_highlighted: rgba(85, 85, 85, 0.6);
   --button_secondary_destructive_foreground: #ff5c5c;
-  --button_secondary_destructive_foreground_highlighted: rgba(230, 70, 70, 0.16);
+  --button_secondary_destructive_foreground_highlighted: rgba(
+    230,
+    70,
+    70,
+    0.16
+  );
   --button_secondary_foreground: #e1e3e6;
   --button_secondary_foreground_highlighted: #e1e3e6;
-  --button_tertiary_background: rgba(0, 0, 0, 0.00);
+  --button_tertiary_background: rgba(0, 0, 0, 0);
   --button_tertiary_foreground: #e1e3e6;
   --cell_button_foreground: #e1e3e6;
   --content_negative_background: rgba(230, 70, 70, 0.16);
@@ -104,12 +111,12 @@ body[scheme="vkcom_dark"], [scheme="vkcom_dark"] {
   --icon_outline_medium: #b2b2b2;
   --icon_outline_secondary: #939393;
   --icon_secondary: #828282;
-  --icon_secondary_alpha: rgba(255, 255, 255, 0.40);
+  --icon_secondary_alpha: rgba(255, 255, 255, 0.4);
   --icon_tertiary: #656565;
   --icon_tertiary_alpha: rgba(255, 255, 255, 0.24);
   --im_attach_tint: #ffffff;
-  --im_bubble_border_alternate: rgba(0, 0, 0, 0.00);
-  --im_bubble_border_alternate_highlighted: rgba(0, 0, 0, 0.00);
+  --im_bubble_border_alternate: rgba(0, 0, 0, 0);
+  --im_bubble_border_alternate_highlighted: rgba(0, 0, 0, 0);
   --im_bubble_button_background: rgba(255, 255, 255, 0.16);
   --im_bubble_button_background_highlighted: rgba(255, 255, 255, 0.24);
   --im_bubble_button_foreground: #e1e3e6;
@@ -148,7 +155,7 @@ body[scheme="vkcom_dark"], [scheme="vkcom_dark"] {
   --input_border: #555555;
   --landing_background: #222222;
   --landing_field_background: #292929;
-  --landing_field_border: rgba(0, 0, 0, 0.00);
+  --landing_field_border: rgba(0, 0, 0, 0);
   --landing_field_placeholder: #b2b2b2;
   --landing_login_button_background: #e1e3e6;
   --landing_login_button_foreground: #222222;
@@ -157,7 +164,7 @@ body[scheme="vkcom_dark"], [scheme="vkcom_dark"] {
   --landing_secondary_button_background: rgba(255, 255, 255, 0.16);
   --landing_secondary_button_foreground: #ffffff;
   --landing_snippet_border: rgba(255, 255, 255, 0.16);
-  --landing_tertiary_button_background: rgba(0, 0, 0, 0.00);
+  --landing_tertiary_button_background: rgba(0, 0, 0, 0);
   --landing_tertiary_button_foreground: #ffffff;
   --landing_text_primary: #e1e3e6;
   --landing_text_secondary: #828282;
@@ -186,7 +193,7 @@ body[scheme="vkcom_dark"], [scheme="vkcom_dark"] {
   --placeholder_icon_foreground_secondary: #656565;
   --placeholder_icon_tint: #ffffff;
   --poll_option_background: #ffffff;
-  --primary_overlay_badge: rgba(255, 255, 255, 0.40);
+  --primary_overlay_badge: rgba(255, 255, 255, 0.4);
   --search_bar_background: #222222;
   --search_bar_field_background: #424242;
   --search_bar_field_tint: #b2b2b2;
@@ -201,12 +208,12 @@ body[scheme="vkcom_dark"], [scheme="vkcom_dark"] {
   --skeleton_foreground_from: #292929;
   --skeleton_foreground_to: #333333;
   --skeleton_shimmer_from: #222222;
-  --skeleton_shimmer_to: rgba(0, 0, 0, 0.00);
+  --skeleton_shimmer_to: rgba(0, 0, 0, 0);
   --snippet_background: rgba(255, 255, 255, 0.04);
   --snippet_border: rgba(255, 255, 255, 0.16);
   --snippet_icon_tertiary: #656565;
   --splashscreen_icon: #333333;
-  --statusbar_alternate_legacy_background: rgba(0, 0, 0, 0.00);
+  --statusbar_alternate_legacy_background: rgba(0, 0, 0, 0);
   --stories_create_button_background_from: #424242;
   --stories_create_button_background_to: #424242;
   --stories_create_button_foreground: #cccccc;

package/src/styles/vkcom_light.css

@@ -2,7 +2,9 @@
 /*
 * Этот файл сгенерирован автоматически. Не надо править его руками.
 */
-body[scheme="vkcom_light"], [scheme="vkcom_light"] {
+body[scheme="vkcom_light"],
+[scheme="vkcom_light"],
+.vkuivkcom_light {
   --accent: #5181b8;
   --accent_alternate: #0077ff;
   --action_sheet_action_foreground: #5181b8;
@@ -21,7 +23,7 @@ body[scheme="vkcom_light"], [scheme="vkcom_light"] {
   --background_light: #fafbfc;
   --background_page: #edeef0;
   --background_suggestions: #ffffff;
-  --background_text_highlighted: rgba(81, 129, 184, 0.20);
+  --background_text_highlighted: rgba(81, 129, 184, 0.2);
   --button_bot_shadow: #cccccc;
   --button_commerce_background: #4bb34b;
   --button_commerce_foreground: #ffffff;
@@ -34,12 +36,22 @@ body[scheme="vkcom_light"], [scheme="vkcom_light"] {
   --button_secondary_background: #e5ebf1;
   --button_secondary_background_highlighted: #dae2ea;
   --button_secondary_destructive_background: rgba(230, 70, 70, 0.16);
-  --button_secondary_destructive_background_highlighted: rgba(230, 70, 70, 0.12);
+  --button_secondary_destructive_background_highlighted: rgba(
+    230,
+    70,
+    70,
+    0.12
+  );
   --button_secondary_destructive_foreground: #e64646;
-  --button_secondary_destructive_foreground_highlighted: rgba(230, 70, 70, 0.12);
+  --button_secondary_destructive_foreground_highlighted: rgba(
+    230,
+    70,
+    70,
+    0.12
+  );
   --button_secondary_foreground: #55677d;
   --button_secondary_foreground_highlighted: #55677d;
-  --button_tertiary_background: rgba(0, 0, 0, 0.00);
+  --button_tertiary_background: rgba(0, 0, 0, 0);
   --button_tertiary_foreground: #2a5885;
   --cell_button_foreground: #2a5885;
   --content_negative_background: #ff5c5c;
@@ -88,7 +100,7 @@ body[scheme="vkcom_light"], [scheme="vkcom_light"] {
   --header_background_before_blur_alternate: #ffffff;
   --header_search_field_background: #edeef0;
   --header_search_field_tint: #818c99;
-  --header_tab_active_background: rgba(0, 0, 0, 0.00);
+  --header_tab_active_background: rgba(0, 0, 0, 0);
   --header_tab_active_indicator: #5181b8;
   --header_tab_active_text: #000000;
   --header_tab_inactive_text: #99a2ad;
@@ -148,16 +160,16 @@ body[scheme="vkcom_light"], [scheme="vkcom_light"] {
   --input_border: #d3d9de;
   --landing_background: #ffffff;
   --landing_field_background: #f7f8fa;
-  --landing_field_border: rgba(0, 0, 0, 0.00);
+  --landing_field_border: rgba(0, 0, 0, 0);
   --landing_field_placeholder: #818c99;
   --landing_login_button_background: #5181b8;
   --landing_login_button_foreground: #ffffff;
   --landing_primary_button_background: #5181b8;
   --landing_primary_button_foreground: #ffffff;
-  --landing_secondary_button_background: rgba(0, 57, 115, 0.10);
+  --landing_secondary_button_background: rgba(0, 57, 115, 0.1);
   --landing_secondary_button_foreground: #5181b8;
   --landing_snippet_border: rgba(0, 0, 0, 0.12);
-  --landing_tertiary_button_background: rgba(0, 0, 0, 0.00);
+  --landing_tertiary_button_background: rgba(0, 0, 0, 0);
   --landing_tertiary_button_foreground: #5181b8;
   --landing_text_primary: #000000;
   --landing_text_secondary: #818c99;
@@ -171,7 +183,7 @@ body[scheme="vkcom_light"], [scheme="vkcom_light"] {
   --media_overlay_button_background: #ffffff;
   --media_overlay_button_foreground: #333333;
   --modal_card_background: #ffffff;
-  --modal_card_border: rgba(0, 0, 0, 0.00);
+  --modal_card_border: rgba(0, 0, 0, 0);
   --modal_card_header_close: #000000;
   --music_playback_icon: #000000;
   --overlay_status_background: #edeef0;
@@ -187,12 +199,12 @@ body[scheme="vkcom_light"], [scheme="vkcom_light"] {
   --placeholder_icon_tint: #1d3a5c;
   --poll_option_background: #5181b8;
   --primary_overlay_badge: rgba(0, 0, 0, 0.56);
-  --search_bar_background: rgba(0, 0, 0, 0.00);
+  --search_bar_background: rgba(0, 0, 0, 0);
   --search_bar_field_background: #edeef0;
   --search_bar_field_tint: #818c99;
   --search_bar_segmented_control_tint: #818c99;
   --secondary_overlay_badge: rgba(0, 0, 0, 0.24);
-  --segmented_control_bar_background: rgba(0, 0, 0, 0.00);
+  --segmented_control_bar_background: rgba(0, 0, 0, 0);
   --segmented_control_tint: #99a2ad;
   --selection_off_icon: #c5d0db;
   --separator_alpha: rgba(0, 0, 0, 0.12);
@@ -201,7 +213,7 @@ body[scheme="vkcom_light"], [scheme="vkcom_light"] {
   --skeleton_foreground_from: #f0f2f5;
   --skeleton_foreground_to: #e7e8ec;
   --skeleton_shimmer_from: #ffffff;
-  --skeleton_shimmer_to: rgba(255, 255, 255, 0.00);
+  --skeleton_shimmer_to: rgba(255, 255, 255, 0);
   --snippet_background: #ffffff;
   --snippet_border: rgba(0, 0, 0, 0.12);
   --snippet_icon_tertiary: #aeb7c2;

package/src/testing/setup.ts

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

package/src/testing/utils.tsx

@@ -1,31 +1,33 @@
-import * as React from 'react';
-import { render, RenderResult, screen } from '@testing-library/react';
-import AdaptivityProvider, { AdaptivityProviderProps } from '../components/AdaptivityProvider/AdaptivityProvider';
-import { ImgOnlyAttributes } from '../lib/utils';
-import { ScrollContext } from '../components/AppRoot/ScrollContext';
-import { act } from 'react-dom/test-utils';
+import * as React from "react";
+import { render, RenderResult, screen } from "@testing-library/react";
+import AdaptivityProvider from "../components/AdaptivityProvider/AdaptivityProvider";
+import { AdaptivityProps } from "../components/AdaptivityProvider/AdaptivityContext";
+import { ImgOnlyAttributes } from "../lib/utils";
+import { ScrollContext } from "../components/AppRoot/ScrollContext";
+import { act } from "react-dom/test-utils";
 
 export function fakeTimers() {
   beforeEach(() => jest.useFakeTimers());
   afterEach(() => jest.useRealTimers());
 }
 
-export const runAllTimers = () => act(() => {
-  jest.runAllTimers();
-});
+export const runAllTimers = () =>
+  act(() => {
+    jest.runAllTimers();
+  });
 
 export const imgOnlyAttributes: ImgOnlyAttributes = {
-  alt: 'test',
-  crossOrigin: 'anonymous',
-  decoding: 'async',
+  alt: "test",
+  crossOrigin: "anonymous",
+  decoding: "async",
   height: 100,
   width: 100,
-  loading: 'eager',
-  referrerPolicy: 'no-referrer',
-  sizes: 'test',
-  src: 'test',
-  srcSet: 'test',
-  useMap: 'test',
+  loading: "eager",
+  referrerPolicy: "no-referrer",
+  sizes: "test",
+  src: "test",
+  srcSet: "test",
+  useMap: "test",
 };
 
 export type ComponentTestOptions = {
@@ -34,16 +36,16 @@ export type ComponentTestOptions = {
   domAttr?: boolean;
   className?: boolean;
   style?: boolean;
-  adaptivity?: AdaptivityProviderProps;
+  adaptivity?: AdaptivityProps;
 };
 
 type BasicProps = { style?: any; className?: string };
 
 export function mountTest(Component: React.ComponentType<any>) {
-  it('renders', () => {
+  it("renders", () => {
     let api: RenderResult;
     // mount
-    expect(() => api = render(<Component />)).not.toThrow();
+    expect(() => (api = render(<Component />))).not.toThrow();
     // update
     expect(() => api.rerender(<Component />)).not.toThrow();
     // unmount
@@ -59,42 +61,63 @@ export function baselineComponent<Props extends BasicProps>(
     className = true,
     domAttr = true,
     adaptivity,
-  }: ComponentTestOptions = {},
+  }: ComponentTestOptions = {}
 ) {
-  const Component: React.ComponentType<BasicProps> = adaptivity
-    ? (p: Props) => <AdaptivityProvider {...adaptivity}><RawComponent {...p} /></AdaptivityProvider>
+  const Component: React.ComponentType<any> = adaptivity
+    ? (p: Props) => (
+        <AdaptivityProvider {...adaptivity}>
+          <RawComponent {...p} />
+        </AdaptivityProvider>
+      )
     : RawComponent;
   mountTest(Component);
-  forward && it('forwards attributes', () => {
-    const cls = 'Custom';
-    const { rerender } = render((
-      <Component data-testid="__cmp__" className={cls} style={{ background: 'red' }} />
-    ));
-    // forward DOM attributes
-    domAttr && expect(screen.queryByTestId('__cmp__')).toBeTruthy();
-
-    if (className || style) {
-      const styledNode = document.getElementsByClassName(cls)[0] as HTMLElement;
-      // forwards className
-      className && expect(styledNode).toBeTruthy();
-      const customClassList = Array.from(styledNode.classList).filter((item) => item !== cls);
-      // forwards style
-      style && expect(styledNode.style.background).toBe('red');
-      const customStyleCount = styledNode.style.length;
-
-      rerender(<Component />);
-
-      // does not replace default className
-      className && expect(Array.from(styledNode.classList)).toEqual(customClassList);
-      // does not replace default styles
-      style && expect(styledNode.style.length)
-        .toEqual(styledNode.style.background ? customStyleCount : customStyleCount - 1);
-    }
-  });
+  forward &&
+    it("forwards attributes", () => {
+      const cls = "Custom";
+      const { rerender } = render(
+        <Component
+          data-testid="__cmp__"
+          className={cls}
+          style={{ background: "red" }}
+        />
+      );
+      // forward DOM attributes
+      domAttr && expect(screen.queryByTestId("__cmp__")).toBeTruthy();
+
+      if (className || style) {
+        const styledNode = document.getElementsByClassName(
+          cls
+        )[0] as HTMLElement;
+        // forwards className
+        className && expect(styledNode).toBeTruthy();
+        const customClassList = Array.from(styledNode.classList).filter(
+          (item) => item !== cls
+        );
+        // forwards style
+        style && expect(styledNode.style.background).toBe("red");
+        const customStyleCount = styledNode.style.length;
+
+        rerender(<Component />);
+
+        // does not replace default className
+        className &&
+          expect(Array.from(styledNode.classList)).toEqual(customClassList);
+        // does not replace default styles
+        style &&
+          expect(styledNode.style.length).toEqual(
+            styledNode.style.background
+              ? customStyleCount
+              : customStyleCount - 1
+          );
+      }
+    });
 }
 
 type RectOptions = { x?: number; y?: number; w?: number; h?: number };
-export function mockRect(el: HTMLElement | ({} & any), { x = 0, y = 0, w = 0, h = 0 }: RectOptions) {
+export function mockRect(
+  el: HTMLElement | ({} & any),
+  { x = 0, y = 0, w = 0, h = 0 }: RectOptions
+) {
   if (!el) {
     return;
   }
@@ -113,7 +136,9 @@ export function mockRect(el: HTMLElement | ({} & any), { x = 0, y = 0, w = 0, h
   });
 }
 
-export const mockScrollContext = (getY: () => number): [React.FC, jest.Mock] => {
+export const mockScrollContext = (
+  getY: () => number
+): [React.FC, jest.Mock] => {
   const getScroll = () => ({ x: 0, y: getY() });
   const scrollTo = jest.fn();
   return [
@@ -129,14 +154,16 @@ export const mockScrollContext = (getY: () => number): [React.FC, jest.Mock] =>
 const isNullOrUndefined = (val: any) => val === null || val === undefined;
 
 // Согласно спеке, offsetParent в ряде случаев будет null
-Object.defineProperty(HTMLElement.prototype, 'offsetParent', {
+Object.defineProperty(HTMLElement.prototype, "offsetParent", {
   get() {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     let element: HTMLElement = this;
-    while (!isNullOrUndefined(element) &&
-    (isNullOrUndefined(element.style) ||
-      isNullOrUndefined(element.style.display) ||
-      element.style.display.toLowerCase() !== 'none')) {
+    while (
+      !isNullOrUndefined(element) &&
+      (isNullOrUndefined(element.style) ||
+        isNullOrUndefined(element.style.display) ||
+        element.style.display.toLowerCase() !== "none")
+    ) {
       // @ts-ignore
       element = element.parentNode;
     }
@@ -145,11 +172,18 @@ Object.defineProperty(HTMLElement.prototype, 'offsetParent', {
       return null;
     }
 
-    if (!isNullOrUndefined(this.style) && !isNullOrUndefined(this.style.position) && this.style.position.toLowerCase() === 'fixed') {
+    if (
+      !isNullOrUndefined(this.style) &&
+      !isNullOrUndefined(this.style.position) &&
+      this.style.position.toLowerCase() === "fixed"
+    ) {
       return null;
     }
 
-    if (this.tagName.toLowerCase() === 'html' || this.tagName.toLowerCase() === 'body') {
+    if (
+      this.tagName.toLowerCase() === "html" ||
+      this.tagName.toLowerCase() === "body"
+    ) {
       return null;
     }
 

package/src/tokenized/tokenized.ts

@@ -0,0 +1,2 @@
+export { default as Button } from "../components/Button/Button";
+export type { ButtonProps } from "../components/Button/Button";

package/src/types.ts

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import { PlatformType } from './lib/platform';
-import { Insets } from '@vkontakte/vk-bridge';
+import * as React from "react";
+import { PlatformType } from "./lib/platform";
+import { Insets } from "@vkontakte/vk-bridge";
 
 export type AnyFunction = (...args: any[]) => any;
 
-export type AlignType = 'left' | 'center' | 'right';
+export type AlignType = "left" | "center" | "right";
 
 export interface HasRootRef<T> {
   getRootRef?: React.Ref<T>;

package/src/unstable/index.ts

@@ -1,11 +1,23 @@
 /**
  * Forms
  */
-export { default as ChipsSelect } from './../components/ChipsSelect/ChipsSelect';
-export type { ChipsSelectProps } from './../components/ChipsSelect/ChipsSelect';
+export { default as ChipsSelect } from "./../components/ChipsSelect/ChipsSelect";
+export type { ChipsSelectProps } from "./../components/ChipsSelect/ChipsSelect";
 
-export { default as ViewInfinite } from './../components/View/ViewInfinite';
-export type { ViewInfiniteProps } from './../components/View/ViewInfinite';
+export { Dropdown } from "../components/Dropdown/Dropdown";
+export type { DropdownProps } from "../components/Dropdown/Dropdown";
 
-export { default as SimpleCheckbox } from './../components/SimpleCheckbox/SimpleCheckbox';
-export type { SimpleCheckboxProps } from './../components/SimpleCheckbox/SimpleCheckbox';
+export { TextTooltip } from "../components/TextTooltip/TextTooltip";
+export type { TextTooltipProps } from "../components/TextTooltip/TextTooltip";
+
+export { RichTooltip } from "../components/RichTooltip/RichTooltip";
+export type { RichTooltipProps } from "../components/RichTooltip/RichTooltip";
+
+export { Popper } from "../components/Popper/Popper";
+export type { PopperProps } from "../components/Popper/Popper";
+
+export { default as ViewInfinite } from "./../components/View/ViewInfinite";
+export type { ViewInfiniteProps } from "./../components/View/ViewInfinite";
+
+export { default as SimpleCheckbox } from "./../components/SimpleCheckbox/SimpleCheckbox";
+export type { SimpleCheckboxProps } from "./../components/SimpleCheckbox/SimpleCheckbox";

package/src/vkui.js

@@ -1 +1 @@
-export * from './index';
+export * from "./index";

package/stylelint.config.js

@@ -1,30 +1,46 @@
-const { cssPropSources } = require('./postcss.config');
+const path = require("path");
+const { cssPropSources } = require("./postcss.config");
 
 module.exports = {
-  "extends": "stylelint-config-standard",
-  "plugins": [
+  extends: ["stylelint-config-standard", "stylelint-config-prettier"],
+  plugins: [
     "stylelint-value-no-unknown-custom-properties",
     "./tasks/styleint-atomic",
   ],
-  "rules": {
-    "indentation": null,
-    "number-leading-zero": "never",
+  rules: {
+    indentation: null,
     "block-no-empty": null,
     "declaration-block-no-redundant-longhand-properties": null,
     "comment-empty-line-before": null,
     "comment-whitespace-inside": null,
     "no-descending-specificity": null,
     "no-duplicate-selectors": null,
-    "length-zero-no-unit": [true, {
-      "ignore": ["custom-properties"]
-    }],
+    "value-keyword-case": null,
+    "length-zero-no-unit": [
+      true,
+      {
+        ignore: ["custom-properties"],
+      },
+    ],
     "keyframes-name-pattern": "vkui-.+",
-    "csstools/value-no-unknown-custom-properties": [true, {
-      "importFrom": cssPropSources
-    }],
+    "csstools/value-no-unknown-custom-properties": [
+      true,
+      {
+        importFrom: [
+          ...cssPropSources,
+          path.join(
+            __dirname,
+            "node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css"
+          ),
+        ],
+      },
+    ],
     // Skip reporting in pprecommit run, highlight in editor
-    "vkui/atomic": [process.env.LINT_PRECOMMIT_RUN ? null : true, {
-      "severity": "warning"
-    }],
-  }
+    "vkui/atomic": [
+      process.env.LINT_PRECOMMIT_RUN ? null : true,
+      {
+        severity: "warning",
+      },
+    ],
+  },
 };