From 7e855e24b7d26e60ce7b2ed2bcf096fda5444bc1 Mon Sep 17 00:00:00 2001
From: Andrey Morozov <amje@yandex-team.ru>
Date: Tue, 13 Oct 2026 17:24:51 +0300
Subject: [PATCH 1/9] feat!: update uikit

---
 .storybook/decorators/withMobile.tsx          |  12 --
 .storybook/decorators/withTheme.tsx           |  14 +-
 .storybook/preview.tsx                        |   3 +-
 README.md                                     |  25 ++-
 jest.config.js                                |   4 +-
 package-lock.json                             | 153 +++++++-----------
 package.json                                  |  13 +-
 src/components/AdaptiveTabs/AdaptiveTabs.tsx  |  48 +++---
 src/components/AdaptiveTabs/README.md         |   2 +-
 .../__stories__/AdaptiveTabsItems.tsx         |   4 +-
 .../ChangelogDialog/ChangelogDialog.tsx       |   9 +-
 src/components/ChangelogDialog/README.md      |  33 ++--
 .../__stories__/ChangelogDialog.stories.tsx   |  18 ++-
 .../__tests__/ChangelogDialog.test.tsx        |  33 ++--
 src/components/ConfirmDialog/README.md        |  24 +--
 .../__stories__/ConfirmDialog.stories.tsx     |   2 +-
 .../CookieConsent/ConsentManager.ts           |   2 +-
 .../__stories__/CookieConsent.stories.tsx     |   3 -
 .../__tests__/ConsentManager.test.ts          |  24 +++
 .../components/ConsentPopup/ConsentPopup.tsx  |   6 +-
 .../components/ConsentPopup/types.ts          |   2 -
 .../MobileGalleryActions.tsx                  |  25 ++-
 src/components/Gallery/i18n/en.json           |   3 +-
 src/components/Gallery/i18n/ru.json           |   3 +-
 src/components/ItemSelector/ItemSelector.scss |  27 +++-
 src/components/ItemSelector/ItemSelector.tsx  | 135 +++++++++++++---
 src/components/ItemSelector/README.md         |   5 +-
 .../__stories__/ItemSelector.stories.tsx      |  12 --
 .../__tests__/ItemSelector.test.tsx           |  65 ++++++++
 src/components/Notification/Notification.tsx  |   2 +-
 .../Notification/NotificationWithSwipe.tsx    |   2 +-
 .../__stories__/Notifications.stories.tsx     |  14 +-
 .../Notifications/__stories__/mockData.tsx    |  27 ++--
 .../OnboardingMenu/OnboardingMenu.scss        |  13 ++
 .../OnboardingMenu/OnboardingMenu.tsx         |   5 +-
 src/components/PromoSheet/PromoSheet.scss     |  14 ++
 src/components/PromoSheet/PromoSheet.tsx      |  20 +--
 src/components/PromoSheet/README.md           |  30 ++--
 .../PromoSheet/__tests__/PromoSheet.test.tsx  |  20 ++-
 src/components/Reactions/Reaction.tsx         |   4 +-
 src/components/Reactions/Reactions.tsx        |   9 +-
 .../Reactions/ReactionsContainer.tsx          |   2 +-
 .../__stories__/Reactions.stories.tsx         |  20 +--
 .../Reactions/__tests__/mock/mockHooks.tsx    |   2 +-
 .../ShareListItem/ShareListItem.tsx           |   4 +-
 src/components/SharePopover/SharePopover.scss |   3 +-
 src/components/SharePopover/SharePopover.tsx  |  80 +++++----
 .../__stories__/SharePopover.stories.tsx      |   6 -
 .../__tests__/SharePopover.test.tsx           |  52 ++++++
 src/components/StoreBadge/README.md           |  25 ++-
 src/components/StoreBadge/StoreBadge.tsx      |   5 +-
 src/components/Stories/README.md              |   2 +
 src/components/Stories/Stories.tsx            |  14 +-
 .../Stories/__stories__/Stories.stories.tsx   |   4 +-
 .../StoriesLayout/StoriesLayout.tsx           |   2 +-
 src/components/StoriesGroup/README.md         |   2 +
 src/components/StoriesGroup/StoriesGroup.tsx  |  12 +-
 .../StoriesPreview/StoriesPreview.tsx         |   8 +-
 .../TokenizedInput/TokenizedInput.scss        |  22 +--
 .../__stories__/DebounceShowcaseTemplate.tsx  |   2 +-
 .../__stories__/MultipleInputTemplate.tsx     |   2 +-
 .../Suggestions/SuggestionsList.tsx           |  34 ++--
 .../__tests__/SuggestionsList.test.tsx        |  42 +++++
 .../hooks/__tests__/useSuggestions.test.tsx   |  30 ++++
 .../Suggestions/hooks/useSuggestions.ts       |   2 +-
 .../hooks/useTokenizedInputInfo.ts            |   2 +-
 src/components/TokenizedInput/i18n/en.json    |   3 +-
 src/components/TokenizedInput/i18n/ru.json    |   3 +-
 .../TokenizedInput/undoredo-manager.ts        |   2 +-
 test-utils/utils.tsx                          |  11 +-
 70 files changed, 801 insertions(+), 466 deletions(-)
 delete mode 100644 .storybook/decorators/withMobile.tsx
 create mode 100644 src/components/CookieConsent/__tests__/ConsentManager.test.ts
 create mode 100644 src/components/ItemSelector/__tests__/ItemSelector.test.tsx
 create mode 100644 src/components/SharePopover/__tests__/SharePopover.test.tsx
 create mode 100644 src/components/TokenizedInput/components/Suggestions/__tests__/SuggestionsList.test.tsx

diff --git a/.storybook/decorators/withMobile.tsx b/.storybook/decorators/withMobile.tsx
deleted file mode 100644
index 85e79767..00000000
--- a/.storybook/decorators/withMobile.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import {MobileProvider} from '@gravity-ui/uikit';
-import type {Decorator} from '@storybook/react';
-
-export const withMobile: Decorator = (Story, context) => {
-    const platform = context.globals.platform;
-
-    return (
-        <MobileProvider mobile={platform === 'mobile'} platform={platform}>
-            <Story key={platform} {...context} />
-        </MobileProvider>
-    );
-};
diff --git a/.storybook/decorators/withTheme.tsx b/.storybook/decorators/withTheme.tsx
index 09c2da20..64d1979d 100644
--- a/.storybook/decorators/withTheme.tsx
+++ b/.storybook/decorators/withTheme.tsx
@@ -1,10 +1,16 @@
-import {ThemeProvider} from '@gravity-ui/uikit';
+import {Provider} from '@gravity-ui/uikit';
 import type {Decorator} from '@storybook/react';
 
 export const withTheme: Decorator = (Story, context) => {
     return (
-        <ThemeProvider theme={context.globals.theme} direction={context.globals.direction}>
-            <Story {...context} />
-        </ThemeProvider>
+        <Provider
+            theme={context.globals.theme}
+            direction={context.globals.direction}
+            lang={context.globals.lang}
+            mobile={context.globals.platform === 'mobile'}
+            platform={context.globals.platform}
+        >
+            <Story key={context.globals.platform} {...context} />
+        </Provider>
     );
 };
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index a4fbc00c..2475f6b7 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -7,12 +7,11 @@ import {MINIMAL_VIEWPORTS} from '@storybook/addon-viewport';
 import type {Preview} from '@storybook/react';
 
 import {withLang} from './decorators/withLang';
-import {withMobile} from './decorators/withMobile';
 import {withStrictMode} from './decorators/withStrictMode';
 import {withTheme} from './decorators/withTheme';
 
 const preview: Preview = {
-    decorators: [withLang, withMobile, withTheme, withStrictMode],
+    decorators: [withLang, withTheme, withStrictMode],
     parameters: {
         jsx: {showFunctions: true},
         viewport: {
diff --git a/README.md b/README.md
index 53ec534c..bbfe6aed 100644
--- a/README.md
+++ b/README.md
@@ -10,25 +10,38 @@ npm install @gravity-ui/components
 
 ## Usage
 
-`@gravity-ui/uikit` is a peer dependency: install it, import its styles once at the app entry point, and wrap the app in `ThemeProvider`. The components in this package render unstyled without that setup.
+`@gravity-ui/uikit` 8 and React 18/19 are required. Install the current UIKit 8 prerelease with `npm install @gravity-ui/uikit@beta`.
+
+`@gravity-ui/uikit` is a peer dependency: install it, import its styles once at the app entry point, and wrap the app in `Provider`. The components in this package render unstyled without that setup.
 
 ```tsx
-import {ThemeProvider, TextInput} from '@gravity-ui/uikit';
+import {Provider, TextInput} from '@gravity-ui/uikit';
 import {FormRow} from '@gravity-ui/components';
 import '@gravity-ui/uikit/styles/fonts.css';
 import '@gravity-ui/uikit/styles/styles.css';
 
 export function App() {
   return (
-    <ThemeProvider theme="light">
+    <Provider theme="light">
       <FormRow label="Name" fieldId="name">
         <TextInput id="name" name="name" />
       </FormRow>
-    </ThemeProvider>
+    </Provider>
   );
 }
 ```
 
+### Migrating to UIKit 8
+
+- Replace the application-level `ThemeProvider` with `Provider`.
+- Use `onOpenChange` instead of `onClose` in `ConfirmDialog` and `ChangelogDialog`. `ConfirmDialog` accepts the new Dialog props, including `maxWidth` and `fullWidth` instead of `size`.
+- Remove `disableHeightTransition` from `ChangelogDialog` and cookie consent popup settings; UIKit no longer animates content height.
+- `Stories` and `StoriesGroup` keep `onClose`, with optional event/reason arguments and UIKit 8 reasons (`escape-key`, `outside-press`, `click`).
+- Remove `moreControlProps.virtualizationThreshold` from `AdaptiveTabs`; its dropdowns use `ListVirtualizer`.
+- Pass native HTML attributes directly to button/link props, including `StoreBadge`, instead of `extraProps`. Use UIKit 8 Button views in custom story actions.
+
+See the [UIKit 8 migration guide](https://github.com/gravity-ui/uikit/blob/next/docs/migration-to-v8.md) for the underlying API changes. This package uses the new List, Menu, and Popover APIs without the legacy entry point.
+
 ### Confirmation dialog
 
 ```tsx
@@ -42,7 +55,7 @@ import {ConfirmDialog} from '@gravity-ui/components';
   textButtonCancel="Cancel"
   onClickButtonApply={handleDelete}
   onClickButtonCancel={() => setOpen(false)}
-  onClose={() => setOpen(false)}
+  onOpenChange={setOpen}
 />;
 ```
 
@@ -97,7 +110,7 @@ The composite-component layer of Gravity UI — ready-made form rows, confirmati
 
 ### Common pitfalls
 
-- **Nothing is styled without uikit setup.** Install `@gravity-ui/uikit`, import `@gravity-ui/uikit/styles/styles.css` (plus `fonts.css`) once, and wrap the app in `ThemeProvider` — this package ships no global styles of its own.
+- **Nothing is styled without uikit setup.** Install `@gravity-ui/uikit`, import `@gravity-ui/uikit/styles/styles.css` (plus `fonts.css`) once, and wrap the app in `Provider` — this package ships no global styles of its own.
 - **`FormRow` does not render the input.** Pass the control as `children` and link it with `fieldId` matching the control's `id`; the `label` prop is the label text, not a `<label>` element.
 - **`ConfirmDialog` has no `onConfirm` / `onCancel`.** The handlers are `onClickButtonApply` and `onClickButtonCancel`, and `textButtonApply` / `textButtonCancel` are required.
 - **`AdaptiveTabs` takes `items` + `activeTab` + `onSelectTab`,** not uikit `Tabs` children; the `size` values are `m | l | xl`.
diff --git a/jest.config.js b/jest.config.js
index 510498f9..6f71c52e 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -3,8 +3,10 @@ module.exports = {
     moduleFileExtensions: ['js', 'json', 'ts', 'tsx'],
     rootDir: '.',
     transform: {
-        '\\.[jt]sx?$': ['ts-jest', {tsconfig: './tsconfig.test.json'}],
+        '\\.tsx?$': ['ts-jest', {tsconfig: './tsconfig.test.json'}],
+        '\\.jsx?$': ['babel-jest', {presets: ['@babel/preset-env']}],
     },
+    transformIgnorePatterns: ['node_modules/(?!colors-named(?:-hex)?/)'],
     coverageDirectory: './coverage',
     collectCoverageFrom: ['src/**/*.{ts,tsx}', '!**/__stories__/**/*', '!**/*/*.stories.{ts,tsx}'],
     testEnvironment: 'jsdom',
diff --git a/package-lock.json b/package-lock.json
index 753cf0a7..e9ce5e1c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,9 @@
         "@bem-react/classname": "^1.6.0",
         "@gravity-ui/date-utils": "^2.1.0",
         "@gravity-ui/icons": "^2.11.0",
-        "lodash": "^4.17.21",
+        "@hello-pangea/dnd": "^18.0.1",
+        "@tanstack/react-virtual": "^3.14.17",
+        "es-toolkit": "^1.47.1",
         "universal-cookie": "^7.2.0"
       },
       "devDependencies": {
@@ -28,7 +30,7 @@
         "@gravity-ui/readme-validator": "^1.3.0",
         "@gravity-ui/stylelint-config": "^4.0.1",
         "@gravity-ui/tsconfig": "^1.0.0",
-        "@gravity-ui/uikit": "^7.44.0",
+        "@gravity-ui/uikit": "^8.0.0-beta.1",
         "@storybook/addon-a11y": "^8.4.7",
         "@storybook/addon-actions": "^8.4.7",
         "@storybook/addon-docs": "^8.4.7",
@@ -47,7 +49,6 @@
         "@testing-library/react": "^16.1.0",
         "@testing-library/user-event": "^14.5.2",
         "@types/jest": "^29.5.14",
-        "@types/lodash": "^4.17.14",
         "@types/react": "^18.3.18",
         "@types/react-dom": "^18.3.5",
         "axe-playwright": "^2.1.0",
@@ -77,9 +78,9 @@
         "typescript": "^5.7.3"
       },
       "peerDependencies": {
-        "@gravity-ui/uikit": "^7.44.0",
-        "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+        "@gravity-ui/uikit": "^8.0.0-beta.1",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -1915,7 +1916,6 @@
       "version": "7.28.4",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
       "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -3381,9 +3381,9 @@
       "dev": true
     },
     "node_modules/@gravity-ui/uikit": {
-      "version": "7.48.0",
-      "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-7.48.0.tgz",
-      "integrity": "sha512-ihkIGYvyqMEf7zY3biWXDm5jVsRg7dsMLp8d3IisegFayBeewNbK23iAjcqnNNuevg9A/P368gY5/KPtLOG71g==",
+      "version": "8.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-8.0.0-beta.1.tgz",
+      "integrity": "sha512-8cQzm90ais35cP5jRNdcZlzIE0kK4UT/Klzvv5VLspz+TgRBrNoKx3wMOPdmLbfM1QstJPSFe93fz4LrCXvl7g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3391,27 +3391,38 @@
         "@floating-ui/react": "^0.27.16",
         "@gravity-ui/i18n": "^1.8.0",
         "@gravity-ui/icons": "^2.16.0",
-        "@hello-pangea/dnd": "^18.0.1",
-        "@tanstack/react-virtual": "^3.13.12",
         "@uiw/react-color": "^2.9.2",
         "blueimp-md5": "^2.19.0",
-        "lodash": "^4.17.21",
+        "es-toolkit": "^1.47.1",
         "rc-slider": "^11.1.9",
         "react-transition-group": "^4.4.5",
-        "react-virtualized-auto-sizer": "^1.0.26",
-        "react-window": "^1.8.11",
         "tabbable": "^6.2.0",
-        "tslib": "^2.8.1",
-        "use-sync-external-store": "^1.6.0"
+        "tslib": "^2.8.1"
       },
       "peerDependencies": {
-        "@types/react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+        "@hello-pangea/dnd": "^18",
+        "@tanstack/react-virtual": "^3",
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0",
+        "react-virtualized-auto-sizer": "^1",
+        "react-window": "^1"
       },
       "peerDependenciesMeta": {
+        "@hello-pangea/dnd": {
+          "optional": true
+        },
+        "@tanstack/react-virtual": {
+          "optional": true
+        },
         "@types/react": {
           "optional": true
+        },
+        "react-virtualized-auto-sizer": {
+          "optional": true
+        },
+        "react-window": {
+          "optional": true
         }
       }
     },
@@ -3550,7 +3561,6 @@
       "version": "18.0.1",
       "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-18.0.1.tgz",
       "integrity": "sha512-xojVWG8s/TGrKT1fC8K2tIWeejJYTAeJuj36zM//yEm/ZrnZUSFGS15BpO+jGZT1ybWvyXmeDJwPYb4dhWlbZQ==",
-      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.26.7",
@@ -5993,13 +6003,12 @@
       }
     },
     "node_modules/@tanstack/react-virtual": {
-      "version": "3.13.24",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.24.tgz",
-      "integrity": "sha512-aIJvz5OSkhNIhZIpYivrxrPTKYsjW9Uzy+sP/mx0S3sev2HyvPb7xmjbYvokzEpfgYHy/HjzJ2zFAETuUfgCpg==",
-      "dev": true,
+      "version": "3.14.17",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.14.17.tgz",
+      "integrity": "sha512-b7b5LwydgQAWcsAWEZyd3iZkN5/QcC6S0K5E1zNheyFoSZl7E78foepGeDHlX2+JuXilA+VIGGFsUYPFddOrig==",
       "license": "MIT",
       "dependencies": {
-        "@tanstack/virtual-core": "3.14.0"
+        "@tanstack/virtual-core": "3.19.2"
       },
       "funding": {
         "type": "github",
@@ -6011,10 +6020,9 @@
       }
     },
     "node_modules/@tanstack/virtual-core": {
-      "version": "3.14.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.14.0.tgz",
-      "integrity": "sha512-JLANqGy/D6k4Ujmh8Tr25lGimuOXNiaVyXaCAZS0W+1390sADdGnyUdSWNIfd49gebtIxGMij4IktRVzrdr12Q==",
-      "dev": true,
+      "version": "3.19.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.19.2.tgz",
+      "integrity": "sha512-Ch+e8t097FdTfuihfRwBMqz/OfRZKHOH/C213dbM1lXDZ8bv6r330Bcc9k9XCrP6NkoMYy0/ZCHcddOAPihW4w==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -6447,12 +6455,6 @@
       "integrity": "sha512-R5M+SYhMbwBeQcNXYWNCZkl09vkVfAtcPIaCGdzIkkbeaTrVbGQ7HVgi4s+EmM/M1K4ZuWQH0jGcvMvNePfxYA==",
       "dev": true
     },
-    "node_modules/@types/lodash": {
-      "version": "4.17.14",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.14.tgz",
-      "integrity": "sha512-jsxagdikDiDBeIRaPYtArcT8my4tN1og7MtMRquFT3XNA6axxyHDRUemqDz/taRDdOUn0GnGHRCuff4q48sW9A==",
-      "dev": true
-    },
     "node_modules/@types/mdast": {
       "version": "3.0.15",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.15.tgz",
@@ -6507,13 +6509,13 @@
       "version": "15.7.11",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
       "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/react": {
       "version": "18.3.18",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
       "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -6563,7 +6565,6 @@
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
       "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/uuid": {
@@ -9414,7 +9415,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
       "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "tiny-invariant": "^1.0.6"
@@ -9572,7 +9572,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/cwd": {
       "version": "0.10.0",
@@ -10526,13 +10526,15 @@
       }
     },
     "node_modules/es-toolkit": {
-      "version": "1.31.0",
-      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.31.0.tgz",
-      "integrity": "sha512-vwS0lv/tzjM2/t4aZZRAgN9I9TP0MSkWuvt6By+hEXfG/uLs8yg2S1/ayRXH/x3pinbLgVJYT+eppueg3cM6tg==",
-      "dev": true,
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.52.0.tgz",
+      "integrity": "sha512-XTNEJQh1tY1ZJVcf6ayP/2n4ZPyaHlW2FWs7xvw5ddPuhUVjLD3olQVQS7kf58JbAB48iL0uL/jerTrjtV3lDA==",
+      "license": "MIT",
       "workspaces": [
         "docs",
-        "benchmarks"
+        "benchmarks",
+        "tests/types",
+        "tests/browser-compat"
       ]
     },
     "node_modules/es5-ext": {
@@ -17060,8 +17062,7 @@
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "devOptional": true
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "node_modules/js-yaml": {
       "version": "4.1.0",
@@ -17714,7 +17715,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "devOptional": true,
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       },
@@ -18236,12 +18236,6 @@
         "node": ">= 4.0.0"
       }
     },
-    "node_modules/memoize-one": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
-      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
-      "dev": true
-    },
     "node_modules/memoizee": {
       "version": "0.4.17",
       "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.17.tgz",
@@ -21050,7 +21044,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
       "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/randombytes": {
@@ -21116,7 +21109,6 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
-      "devOptional": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -21158,7 +21150,6 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -21174,10 +21165,9 @@
       "dev": true
     },
     "node_modules/react-redux": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
-      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
-      "dev": true,
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.3.0.tgz",
+      "integrity": "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==",
       "license": "MIT",
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
@@ -21213,33 +21203,6 @@
         "react-dom": ">=16.6.0"
       }
     },
-    "node_modules/react-virtualized-auto-sizer": {
-      "version": "1.0.26",
-      "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.26.tgz",
-      "integrity": "sha512-CblNyiNVw2o+hsa5/49NH2ogGxZ+t+3aweRvNSq7TVjDIlwk7ir4lencEg5HxHeSzwNarSkNkiu0qJSOXtxm5A==",
-      "dev": true,
-      "peerDependencies": {
-        "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/react-window": {
-      "version": "1.8.11",
-      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.11.tgz",
-      "integrity": "sha512-+SRbUVT2scadgFSWx+R1P754xHPEqvcfSfVX10QYg6POOz+WNgkN48pS+BtZNIMGiL1HYrSEiCkwsMS15QogEQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.0.0",
-        "memoize-one": ">=3.1.1 <6"
-      },
-      "engines": {
-        "node": ">8.0.0"
-      },
-      "peerDependencies": {
-        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -21365,7 +21328,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/reflect.getprototypeof": {
@@ -22027,7 +21989,6 @@
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
       "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
@@ -23810,8 +23771,7 @@
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
-      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
-      "dev": true
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
     },
     "node_modules/tinyexec": {
       "version": "0.3.2",
@@ -24488,10 +24448,9 @@
       "dev": true
     },
     "node_modules/use-sync-external-store": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
-      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
-      "dev": true,
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.7.0.tgz",
+      "integrity": "sha512-6L+EeigHMQhdaIPNIFUKwfWJSwWFQ8gJbJ2DLOs5sDIegTwR9fRxvnM3uciHKjIZhFz+KAv2emhWMRvDmMcY8A==",
       "license": "MIT",
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
diff --git a/package.json b/package.json
index 60418028..25316afe 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,9 @@
     "@bem-react/classname": "^1.6.0",
     "@gravity-ui/date-utils": "^2.1.0",
     "@gravity-ui/icons": "^2.11.0",
-    "lodash": "^4.17.21",
+    "@hello-pangea/dnd": "^18.0.1",
+    "@tanstack/react-virtual": "^3.14.17",
+    "es-toolkit": "^1.47.1",
     "universal-cookie": "^7.2.0"
   },
   "devDependencies": {
@@ -71,7 +73,7 @@
     "@gravity-ui/readme-validator": "^1.3.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^7.44.0",
+    "@gravity-ui/uikit": "^8.0.0-beta.1",
     "@storybook/addon-a11y": "^8.4.7",
     "@storybook/addon-actions": "^8.4.7",
     "@storybook/addon-docs": "^8.4.7",
@@ -90,7 +92,6 @@
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.14",
-    "@types/lodash": "^4.17.14",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "axe-playwright": "^2.1.0",
@@ -120,9 +121,9 @@
     "typescript": "^5.7.3"
   },
   "peerDependencies": {
-    "@gravity-ui/uikit": "^7.44.0",
-    "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+    "@gravity-ui/uikit": "^8.0.0-beta.1",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "nano-staged": {
     "*.{scss}": [
diff --git a/src/components/AdaptiveTabs/AdaptiveTabs.tsx b/src/components/AdaptiveTabs/AdaptiveTabs.tsx
index 4d078a70..3ab1bc95 100644
--- a/src/components/AdaptiveTabs/AdaptiveTabs.tsx
+++ b/src/components/AdaptiveTabs/AdaptiveTabs.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 
 import {ChevronDown} from '@gravity-ui/icons';
 import {Icon, Select, SelectProps} from '@gravity-ui/uikit';
-import difference from 'lodash/difference';
-import throttle from 'lodash/throttle';
+import {ListVirtualizer} from '@gravity-ui/uikit/virtualizer';
+import {difference, throttle} from 'es-toolkit';
 
 import {block} from '../utils/cn';
 
@@ -117,7 +117,7 @@ export interface AdaptiveTabsProps<T> {
     /** Allows you not to specify activeTab */
     allowNotSelected?: boolean;
     /** Settings to control popup with hidden tabs list */
-    moreControlProps?: Pick<SelectProps, 'virtualizationThreshold' | 'popupWidth'>;
+    moreControlProps?: Pick<SelectProps, 'popupWidth'>;
 }
 
 interface AdaptiveTabsState {
@@ -888,16 +888,18 @@ export class AdaptiveTabs<T> extends React.Component<AdaptiveTabsProps<T>, Adapt
             }));
 
         return (
-            <Select
-                open={isSelectOpened}
-                onUpdate={this.onChooseTabFromSelect}
-                options={itemsForSelect}
-                value={[]}
-                filterable={false}
-                renderControl={this.renderSwitcherForMoreSelect}
-                onOpenChange={this.handleOpenSelectChange}
-                {...moreControlProps}
-            />
+            <ListVirtualizer>
+                <Select
+                    open={isSelectOpened}
+                    onUpdate={this.onChooseTabFromSelect}
+                    options={itemsForSelect}
+                    value={[]}
+                    filterable={false}
+                    renderControl={this.renderSwitcherForMoreSelect}
+                    onOpenChange={this.handleOpenSelectChange}
+                    {...moreControlProps}
+                />
+            </ListVirtualizer>
         );
     }
 
@@ -923,15 +925,17 @@ export class AdaptiveTabs<T> extends React.Component<AdaptiveTabsProps<T>, Adapt
         }));
 
         return (
-            <Select
-                className={b('tabs-as-select-control')}
-                onUpdate={this.handleTabsAsSelectUpdate}
-                options={itemsForSelect}
-                value={activeTabID === undefined ? [] : [activeTabID]}
-                filterable={false}
-                renderControl={this.renderSwitcherForTabsAsSelect}
-                onOpenChange={this.handleOpenSelectChange}
-            />
+            <ListVirtualizer>
+                <Select
+                    className={b('tabs-as-select-control')}
+                    onUpdate={this.handleTabsAsSelectUpdate}
+                    options={itemsForSelect}
+                    value={activeTabID === undefined ? [] : [activeTabID]}
+                    filterable={false}
+                    renderControl={this.renderSwitcherForTabsAsSelect}
+                    onOpenChange={this.handleOpenSelectChange}
+                />
+            </ListVirtualizer>
         );
     }
 
diff --git a/src/components/AdaptiveTabs/README.md b/src/components/AdaptiveTabs/README.md
index 33c14140..457f3945 100644
--- a/src/components/AdaptiveTabs/README.md
+++ b/src/components/AdaptiveTabs/README.md
@@ -23,7 +23,7 @@ with the caption `More'. If only one tab fits, the select is displayed instead o
 | wrapTo                                  | `wrapTo?(item: TabItemProps, node: React.ReactNode, index: number): void` |          |         | Allows to wrap TabItem into another component or render custom tab |
 | className                               | `String`                                                                  |          |         | Class name for the tabs container                                  |
 | [breakpointsConfig](#breakpointsConfig) | `Record<string, number>`                                                  |          |         | Breakpoints config which control the thersholds of tab size.       |
-| moreControlProps                        | `{popupWidth?: 'fit' \| number; virtualizationThreshold?: number;}`       |          |         | Settings to control popup with hidden tabs list                    |
+| moreControlProps                        | `{popupWidth?: 'fit' \| number;}`                                         |          |         | Settings to control popup with hidden tabs list                    |
 
 ### breakpointsConfig
 
diff --git a/src/components/AdaptiveTabs/__stories__/AdaptiveTabsItems.tsx b/src/components/AdaptiveTabs/__stories__/AdaptiveTabsItems.tsx
index 83073661..550c8f33 100644
--- a/src/components/AdaptiveTabs/__stories__/AdaptiveTabsItems.tsx
+++ b/src/components/AdaptiveTabs/__stories__/AdaptiveTabsItems.tsx
@@ -12,7 +12,7 @@ const RenderTitleWithWrap = (props: {title: string | React.ReactNode}) => {
     const {title} = props;
     return (
         <div>
-            <Button size="xs" view="flat" extraProps={{'aria-label': buttonAddLabel}}>
+            <Button size="xs" view="flat" aria-label={buttonAddLabel}>
                 <Icon data={SquarePlus} size="xs" />
             </Button>
 
@@ -28,7 +28,7 @@ const RenderTitleWithWrap = (props: {title: string | React.ReactNode}) => {
             >
                 {title}
             </span>
-            <Button size="xs" extraProps={{'aria-label': buttonRemoveLabel}}>
+            <Button size="xs" aria-label={buttonRemoveLabel}>
                 <Icon data={SquareXmark} size="xs" />
             </Button>
         </div>
diff --git a/src/components/ChangelogDialog/ChangelogDialog.tsx b/src/components/ChangelogDialog/ChangelogDialog.tsx
index e79e4b6c..e8592d77 100644
--- a/src/components/ChangelogDialog/ChangelogDialog.tsx
+++ b/src/components/ChangelogDialog/ChangelogDialog.tsx
@@ -22,13 +22,12 @@ export interface ChangelogDialogProps {
     items: ChangelogItem[];
     disableBodyScrollLock?: boolean;
     disableOutsideClick?: boolean;
-    onClose: DialogProps['onClose'];
+    onOpenChange: DialogProps['onOpenChange'];
     onLinkClick?: (link: string) => void;
     onStoryClick?: (storyId: string) => void;
     onRetryClick?: () => void;
     loading?: boolean;
     error?: boolean | {title: string; description: string};
-    disableHeightTransition?: boolean;
     className?: string;
     modalClassName?: string;
 }
@@ -47,9 +46,8 @@ export function ChangelogDialog(props: ChangelogDialogProps) {
         fullListLink,
         items,
         disableBodyScrollLock = true,
-        disableHeightTransition = true,
         disableOutsideClick,
-        onClose,
+        onOpenChange,
         onStoryClick,
         onLinkClick,
         onRetryClick,
@@ -68,11 +66,10 @@ export function ChangelogDialog(props: ChangelogDialogProps) {
             className={b(null, className)}
             modalClassName={b('modal', modalClassName)}
             open={open}
-            onClose={onClose}
+            onOpenChange={onOpenChange}
             disableBodyScrollLock={disableBodyScrollLock}
             disableOutsideClick={disableOutsideClick}
             aria-labelledby={dialogCaptionId}
-            disableHeightTransition={disableHeightTransition}
         >
             <Dialog.Header caption={title} id={dialogCaptionId} />
             {fullListLink ? (
diff --git a/src/components/ChangelogDialog/README.md b/src/components/ChangelogDialog/README.md
index 6d6358ed..5e471c08 100644
--- a/src/components/ChangelogDialog/README.md
+++ b/src/components/ChangelogDialog/README.md
@@ -4,23 +4,22 @@ Component for displaying the changelog. It looks like a list of versions in a mo
 
 ## Properties
 
-| Property                | Type                              | Required | Default     | Description                                                     |
-| :---------------------- | :-------------------------------- | :------- | :---------- | :-------------------------------------------------------------- |
-| open                    | `Boolean`                         | ✓        |             | Visibility flag                                                 |
-| title                   | `String`                          |          | `Changelog` | Dialog title                                                    |
-| fullListLink            | `String`                          |          |             | Link to documentation with full changelog                       |
-| items                   | `ChangelogItem[]`                 | ✓        |             | List of versions to display                                     |
-| disableBodyScrollLock   | `Boolean`                         |          | true        | If `true`, window scrolling is disabled when the dialog is open |
-| disableOutsideClick     | `Boolean`                         |          |             | If `true`, do not close dialog on click outside                 |
-| disableHeightTransition | `Boolean`                         |          | true        | If `true`, do not animate the dialog height                     |
-| loading                 | `Boolean`                         |          |             | If `true`, show loader instead of the list of versions          |
-| error                   | `Boolean \| {title, description}` |          |             | If set, show error instead of the list of versions              |
-| onClose                 | `Function`                        | ✓        |             | Action on close                                                 |
-| onStoryClick            | `ChangelogStoryClickHandler`      |          |             | Action on click to "View story"                                 |
-| onLinkClick             | `Function`                        |          |             | Action on click to "Read more", takes the version link          |
-| onRetryClick            | `Function`                        |          |             | Action on click to "Retry" in the error state                   |
-| className               | `String`                          |          |             | Dialog CSS class                                                |
-| modalClassName          | `String`                          |          |             | Modal CSS class, see [CSS API](#css-api)                        |
+| Property              | Type                              | Required | Default     | Description                                                     |
+| :-------------------- | :-------------------------------- | :------- | :---------- | :-------------------------------------------------------------- |
+| open                  | `Boolean`                         | ✓        |             | Visibility flag                                                 |
+| title                 | `String`                          |          | `Changelog` | Dialog title                                                    |
+| fullListLink          | `String`                          |          |             | Link to documentation with full changelog                       |
+| items                 | `ChangelogItem[]`                 | ✓        |             | List of versions to display                                     |
+| disableBodyScrollLock | `Boolean`                         |          | true        | If `true`, window scrolling is disabled when the dialog is open |
+| disableOutsideClick   | `Boolean`                         |          |             | If `true`, do not close dialog on click outside                 |
+| loading               | `Boolean`                         |          |             | If `true`, show loader instead of the list of versions          |
+| error                 | `Boolean \| {title, description}` |          |             | If set, show error instead of the list of versions              |
+| onOpenChange          | `Function`                        | ✓        |             | Action on close                                                 |
+| onStoryClick          | `ChangelogStoryClickHandler`      |          |             | Action on click to "View story"                                 |
+| onLinkClick           | `Function`                        |          |             | Action on click to "Read more", takes the version link          |
+| onRetryClick          | `Function`                        |          |             | Action on click to "Retry" in the error state                   |
+| className             | `String`                          |          |             | Dialog CSS class                                                |
+| modalClassName        | `String`                          |          |             | Modal CSS class, see [CSS API](#css-api)                        |
 
 ### ChangelogItem object
 
diff --git a/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx b/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx
index 980b120b..69fa7c27 100644
--- a/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx
+++ b/src/components/ChangelogDialog/__stories__/ChangelogDialog.stories.tsx
@@ -77,7 +77,7 @@ const items: ChangelogItem[] = [
     },
 ];
 
-const DefaultTemplate: StoryFn<ChangelogDialogProps> = (props: ChangelogDialogProps) => {
+const ChangelogDialogExample = (props: ChangelogDialogProps) => {
     const [visible, setVisible] = React.useState(props.open);
 
     React.useEffect(() => {
@@ -98,15 +98,19 @@ const DefaultTemplate: StoryFn<ChangelogDialogProps> = (props: ChangelogDialogPr
             <ChangelogDialog
                 {...props}
                 open={visible}
-                onClose={(event, reason) => {
-                    setVisible(false);
-                    props.onClose?.(event, reason);
+                onOpenChange={(nextOpen, event, reason) => {
+                    setVisible(nextOpen);
+                    props.onOpenChange?.(nextOpen, event, reason);
                 }}
             />
         </React.Fragment>
     );
 };
 
+const DefaultTemplate: StoryFn<ChangelogDialogProps> = (props) => (
+    <ChangelogDialogExample {...props} />
+);
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {
     open: false,
@@ -117,7 +121,7 @@ Default.args = {
     onLinkClick: (link) => {
         console.log('link click', link);
     },
-    onClose: () => {
+    onOpenChange: () => {
         console.log('close');
     },
     onRetryClick: () => {
@@ -141,10 +145,10 @@ Error.args = {
 
 const CUSTOM_MAX_WIDTH_CLASS = 'changelog-dialog-custom-max-width';
 
-const CustomMaxWidthTemplate: StoryFn<ChangelogDialogProps> = (props: ChangelogDialogProps) => (
+const CustomMaxWidthTemplate: StoryFn<ChangelogDialogProps> = (props) => (
     <React.Fragment>
         <style>{`.${CUSTOM_MAX_WIDTH_CLASS} { --g-modal-max-width: 1000px; }`}</style>
-        <DefaultTemplate {...props} modalClassName={CUSTOM_MAX_WIDTH_CLASS} />
+        <ChangelogDialogExample {...props} modalClassName={CUSTOM_MAX_WIDTH_CLASS} />
     </React.Fragment>
 );
 
diff --git a/src/components/ChangelogDialog/__tests__/ChangelogDialog.test.tsx b/src/components/ChangelogDialog/__tests__/ChangelogDialog.test.tsx
index 9b2dec73..f6dd1093 100644
--- a/src/components/ChangelogDialog/__tests__/ChangelogDialog.test.tsx
+++ b/src/components/ChangelogDialog/__tests__/ChangelogDialog.test.tsx
@@ -21,7 +21,7 @@ const items: ChangelogItem[] = [
 ];
 
 test('Renders the list of versions', () => {
-    render(<ChangelogDialog open items={items} onClose={jest.fn()} />);
+    render(<ChangelogDialog open items={items} onOpenChange={jest.fn()} />);
 
     expect(screen.getByRole('dialog', {name: 'Changelog'})).toBeInTheDocument();
     expect(screen.getByRole('heading', {name: 'New navigation'})).toBeInTheDocument();
@@ -31,13 +31,21 @@ test('Renders the list of versions', () => {
 });
 
 test('Renders nothing when closed', () => {
-    render(<ChangelogDialog open={false} items={items} onClose={jest.fn()} />);
+    render(<ChangelogDialog open={false} items={items} onOpenChange={jest.fn()} />);
 
     expect(screen.queryByRole('heading', {name: 'New navigation'})).not.toBeInTheDocument();
 });
 
+test('Reports dismissal through onOpenChange with the UIKit 8 reason', async () => {
+    const onOpenChange = jest.fn();
+    render(<ChangelogDialog open items={items} onOpenChange={onOpenChange} />);
+    const user = userEvent.setup();
+    await user.keyboard('{Escape}');
+    expect(onOpenChange).toHaveBeenCalledWith(false, expect.any(KeyboardEvent), 'escape-key');
+});
+
 test('Renders placeholder when there are no versions', () => {
-    render(<ChangelogDialog open items={[]} onClose={jest.fn()} />);
+    render(<ChangelogDialog open items={[]} onOpenChange={jest.fn()} />);
 
     expect(screen.getByText('No data')).toBeInTheDocument();
 });
@@ -48,7 +56,7 @@ test('Renders link to the full changelog when fullListLink is set', () => {
             open
             items={items}
             fullListLink="https://example.com/changelog"
-            onClose={jest.fn()}
+            onOpenChange={jest.fn()}
         />,
     );
 
@@ -59,7 +67,7 @@ test('Renders link to the full changelog when fullListLink is set', () => {
 });
 
 test('Hides versions while loading', () => {
-    render(<ChangelogDialog open loading items={items} onClose={jest.fn()} />);
+    render(<ChangelogDialog open loading items={items} onOpenChange={jest.fn()} />);
 
     expect(screen.queryByRole('heading', {name: 'New navigation'})).not.toBeInTheDocument();
     expect(screen.queryByText('No data')).not.toBeInTheDocument();
@@ -74,7 +82,7 @@ test('Shows error instead of versions and calls onRetryClick', async () => {
             error
             items={items}
             onRetryClick={handleRetryClick}
-            onClose={jest.fn()}
+            onOpenChange={jest.fn()}
         />,
     );
 
@@ -93,7 +101,7 @@ test('Shows custom error title and description', () => {
             open
             error={{title: 'Error title', description: 'Error description'}}
             items={items}
-            onClose={jest.fn()}
+            onOpenChange={jest.fn()}
         />,
     );
 
@@ -111,7 +119,7 @@ test('Calls onStoryClick and onLinkClick', async () => {
             items={items}
             onStoryClick={handleStoryClick}
             onLinkClick={handleLinkClick}
-            onClose={jest.fn()}
+            onOpenChange={jest.fn()}
         />,
     );
 
@@ -126,7 +134,7 @@ test('Calls onStoryClick and onLinkClick', async () => {
 
 test('Applies className to the dialog', () => {
     const {baseElement} = render(
-        <ChangelogDialog open items={items} className="custom-class" onClose={jest.fn()} />,
+        <ChangelogDialog open items={items} className="custom-class" onOpenChange={jest.fn()} />,
     );
 
     // eslint-disable-next-line testing-library/no-node-access
@@ -135,7 +143,12 @@ test('Applies className to the dialog', () => {
 
 test('Applies modalClassName to the element the size CSS variables are read on', () => {
     const {baseElement} = render(
-        <ChangelogDialog open items={items} modalClassName="custom-class" onClose={jest.fn()} />,
+        <ChangelogDialog
+            open
+            items={items}
+            modalClassName="custom-class"
+            onOpenChange={jest.fn()}
+        />,
     );
 
     // eslint-disable-next-line testing-library/no-node-access
diff --git a/src/components/ConfirmDialog/README.md b/src/components/ConfirmDialog/README.md
index b2e9352c..c15081a7 100644
--- a/src/components/ConfirmDialog/README.md
+++ b/src/components/ConfirmDialog/README.md
@@ -12,17 +12,17 @@ import {ConfirmDialog} from '@gravity-ui/components';
 
 ## Properties
 
-| Name                | Description                     |                                              Type                                              | Required |
-| :------------------ | :------------------------------ | :--------------------------------------------------------------------------------------------: | :------: |
-| title               | The confirm dialog title        |                                            `string`                                            |   Yes    |
-| message             | The confirmation message        |                                          `ReactNode`                                           |   Yes    |
-| textButtonCancel    | The cancel button text          |                                            `string`                                            |   Yes    |
-| propsButtonCancel   | The cancel buttonProps          |                                         `ButtonProps`                                          |          |
-| onClickButtonCancel | The cancel button click handler |                  `(event: React.MouseEvent<HTMLElement, MouseEvent>) => void`                  |   Yes    |
-| textButtonApply     | The ok button text              |                                            `string`                                            |   Yes    |
-| propsButtonApply    | The ok button props             |                                         `ButtonProps`                                          |          |
-| onClickButtonApply  | The ok button click handler     |                  `(event: React.MouseEvent<HTMLElement, MouseEvent>) => void`                  |   Yes    |
-| onClose             | The dialog close handler        | `(event: MouseEvent or KeyboardEvent, reason: ModalCloseReason or 'closeButtonClick') => void` |   Yes    |
+| Name                | Description                     |                                Type                                 | Required |
+| :------------------ | :------------------------------ | :-----------------------------------------------------------------: | :------: |
+| title               | The confirm dialog title        |                              `string`                               |   Yes    |
+| message             | The confirmation message        |                             `ReactNode`                             |   Yes    |
+| textButtonCancel    | The cancel button text          |                              `string`                               |   Yes    |
+| propsButtonCancel   | The cancel buttonProps          |                            `ButtonProps`                            |          |
+| onClickButtonCancel | The cancel button click handler |    `(event: React.MouseEvent<HTMLElement, MouseEvent>) => void`     |   Yes    |
+| textButtonApply     | The ok button text              |                              `string`                               |   Yes    |
+| propsButtonApply    | The ok button props             |                            `ButtonProps`                            |          |
+| onClickButtonApply  | The ok button click handler     |    `(event: React.MouseEvent<HTMLElement, MouseEvent>) => void`     |   Yes    |
+| onOpenChange        | The dialog close handler        | `(open: boolean, event?: Event, reason?: OpenChangeReason) => void` |   Yes    |
 
 And other Dialog props
 
@@ -49,7 +49,7 @@ return (
         alert('Cancelled');
         setOpen(false);
       }}
-      onClose={() => setOpen(false)}
+      onOpenChange={setOpen}
       textButtonCancel="No"
       textButtonApply="Yes"
       open={open}
diff --git a/src/components/ConfirmDialog/__stories__/ConfirmDialog.stories.tsx b/src/components/ConfirmDialog/__stories__/ConfirmDialog.stories.tsx
index 59c09a46..d8961958 100644
--- a/src/components/ConfirmDialog/__stories__/ConfirmDialog.stories.tsx
+++ b/src/components/ConfirmDialog/__stories__/ConfirmDialog.stories.tsx
@@ -29,7 +29,7 @@ const DefaultTemplate: StoryFn<ConfirmDialogProps> = (args) => {
                     alert('Cancelled');
                     setOpen(false);
                 }}
-                onClose={() => setOpen(false)}
+                onOpenChange={setOpen}
                 open={open}
             />
         </React.Fragment>
diff --git a/src/components/CookieConsent/ConsentManager.ts b/src/components/CookieConsent/ConsentManager.ts
index 88f6b512..85d239b2 100644
--- a/src/components/CookieConsent/ConsentManager.ts
+++ b/src/components/CookieConsent/ConsentManager.ts
@@ -1,4 +1,4 @@
-import pick from 'lodash/pick';
+import {pick} from 'es-toolkit';
 import Cookies from 'universal-cookie';
 import type {CookieSetOptions} from 'universal-cookie';
 
diff --git a/src/components/CookieConsent/__stories__/CookieConsent.stories.tsx b/src/components/CookieConsent/__stories__/CookieConsent.stories.tsx
index 2f7648b6..5060cfe5 100644
--- a/src/components/CookieConsent/__stories__/CookieConsent.stories.tsx
+++ b/src/components/CookieConsent/__stories__/CookieConsent.stories.tsx
@@ -61,9 +61,6 @@ export default {
         cookieList: {
             control: 'object',
         },
-        disableHeightTransition: {
-            control: 'boolean',
-        },
         defaultFunctionalCookies: {
             control: 'boolean',
         },
diff --git a/src/components/CookieConsent/__tests__/ConsentManager.test.ts b/src/components/CookieConsent/__tests__/ConsentManager.test.ts
new file mode 100644
index 00000000..255bfb89
--- /dev/null
+++ b/src/components/CookieConsent/__tests__/ConsentManager.test.ts
@@ -0,0 +1,24 @@
+import {COOKIE_NAME, ConsentManager, ConsentMode} from '../ConsentManager';
+
+afterEach(() => {
+    document.cookie = `${COOKIE_NAME}=; path=/; max-age=0`;
+});
+
+test('Restores false consent values and ignores unrelated cookie fields', () => {
+    document.cookie = `${COOKIE_NAME}=${encodeURIComponent(JSON.stringify({necessary: true, analytics: false, unknown: true}))}; path=/`;
+    const manager = new ConsentManager(ConsentMode.Manage);
+    expect(manager.getConsents()).toEqual({necessary: true, analytics: false});
+});
+
+test('Subscribers receive only changed consent fields, including false values', () => {
+    const manager = new ConsentManager(ConsentMode.Manage, undefined, {path: '/'});
+    manager.setConsents('All');
+    const onChange = jest.fn();
+    manager.subscribe(onChange);
+
+    manager.setConsents({necessary: true, analytics: false});
+    expect(onChange).toHaveBeenCalledWith(
+        {analytics: false},
+        expect.objectContaining({necessary: true, analytics: false}),
+    );
+});
diff --git a/src/components/CookieConsent/components/ConsentPopup/ConsentPopup.tsx b/src/components/CookieConsent/components/ConsentPopup/ConsentPopup.tsx
index f6b864af..240f704e 100644
--- a/src/components/CookieConsent/components/ConsentPopup/ConsentPopup.tsx
+++ b/src/components/CookieConsent/components/ConsentPopup/ConsentPopup.tsx
@@ -187,7 +187,6 @@ export const ConsentPopup = (props: ConsentPopupProps) => {
         cookieList,
         onClose,
         consentManager,
-        disableHeightTransition,
         ...buttonsParams
     } = props;
 
@@ -240,8 +239,9 @@ export const ConsentPopup = (props: ConsentPopupProps) => {
             disableEscapeKeyDown
             className={modalClassName}
             contentClassName={b('modal-content', {step: currentStep, mobile})}
-            onClose={onClose}
-            disableHeightTransition={disableHeightTransition}
+            onOpenChange={(open) => {
+                if (!open) onClose();
+            }}
         >
             <div className={b(null, className)}>
                 <div>
diff --git a/src/components/CookieConsent/components/ConsentPopup/types.ts b/src/components/CookieConsent/components/ConsentPopup/types.ts
index 5183a0a3..dffdca3e 100644
--- a/src/components/CookieConsent/components/ConsentPopup/types.ts
+++ b/src/components/CookieConsent/components/ConsentPopup/types.ts
@@ -41,8 +41,6 @@ export interface ConsentPopupData {
     noSubtitle?: boolean;
     cookieList?: ConsentPopupCookieListItem[];
     onClose: () => void;
-    /* Disable modal animation */
-    disableHeightTransition?: boolean;
 }
 
 export type ConsentPopupProps = ConsentPopupData &
diff --git a/src/components/Gallery/components/MobileGalleryActions/MobileGalleryActions.tsx b/src/components/Gallery/components/MobileGalleryActions/MobileGalleryActions.tsx
index 3abd1f71..95527f4a 100644
--- a/src/components/Gallery/components/MobileGalleryActions/MobileGalleryActions.tsx
+++ b/src/components/Gallery/components/MobileGalleryActions/MobileGalleryActions.tsx
@@ -35,7 +35,7 @@ export const MobileGalleryActions = ({open, actions = [], onClose}: MobileGaller
                 children: (
                     <Flex
                         alignItems="center"
-                        gap={3}
+                        gap="spacing-3"
                         className={cnMobileGalleryActions('custom-item')}
                     >
                         {item.icon}
@@ -68,14 +68,25 @@ export const MobileGalleryActions = ({open, actions = [], onClose}: MobileGaller
     );
 
     return (
-        <Sheet className={cnMobileGalleryActions()} visible={open} onClose={onClose}>
+        <Sheet
+            className={cnMobileGalleryActions()}
+            open={open}
+            onOpenChange={(nextOpen) => {
+                if (!nextOpen) onClose();
+            }}
+        >
             <List
+                aria-label={t('actions')}
+                role="grid"
                 items={actions}
-                filterable={false}
-                renderItem={renderListItem}
-                itemHeight={44}
-                virtualized={false}
-                onItemClick={onClose}
+                size="xl"
+                getItemTextValue={(item) => (item.__titleT ? item.__titleT({t}) : item.title)}
+                renderItem={(ctx, helpers) => (
+                    <List.ItemView {...helpers.getItemProps()} {...helpers.getItemViewProps()}>
+                        <div {...helpers.getCellProps()}>{renderListItem(ctx.item)}</div>
+                    </List.ItemView>
+                )}
+                onItemAction={onClose}
             />
         </Sheet>
     );
diff --git a/src/components/Gallery/i18n/en.json b/src/components/Gallery/i18n/en.json
index 3f065752..83b9222d 100644
--- a/src/components/Gallery/i18n/en.json
+++ b/src/components/Gallery/i18n/en.json
@@ -5,5 +5,6 @@
   "next": "Next",
   "back": "Back",
   "copy-link": "Copy link",
-  "download": "Download"
+  "download": "Download",
+  "actions": "Actions"
 }
diff --git a/src/components/Gallery/i18n/ru.json b/src/components/Gallery/i18n/ru.json
index 9116bdd2..45cde68a 100644
--- a/src/components/Gallery/i18n/ru.json
+++ b/src/components/Gallery/i18n/ru.json
@@ -5,5 +5,6 @@
   "next": "Следующий",
   "back": "Назад",
   "copy-link": "Скопировать ссылку",
-  "download": "Скачать"
+  "download": "Скачать",
+  "actions": "Действия"
 }
diff --git a/src/components/ItemSelector/ItemSelector.scss b/src/components/ItemSelector/ItemSelector.scss
index 7c8590b4..48f7746c 100644
--- a/src/components/ItemSelector/ItemSelector.scss
+++ b/src/components/ItemSelector/ItemSelector.scss
@@ -4,7 +4,9 @@
 $block: '.#{variables.$ns}item-selector';
 
 #{$block} {
-    --g-list-item-padding: 0 16px;
+    --g-list-item-view-padding-inline: 16px;
+    --g-list-item-view-padding-block: 0;
+    --g-list-item-view-border-radius: 0;
 
     display: flex;
     width: 100%;
@@ -24,7 +26,7 @@ $block: '.#{variables.$ns}item-selector';
         justify-content: space-between;
         align-items: center;
         margin-block-end: 8px;
-        padding: var(--g-list-item-padding);
+        padding: 0 16px;
         min-height: 24px;
     }
 
@@ -32,6 +34,23 @@ $block: '.#{variables.$ns}item-selector';
         @include mixins.text-accent;
     }
 
+    &__filter {
+        box-sizing: border-box;
+        padding-inline: 16px;
+        margin-block-end: 4px;
+    }
+
+    &__items {
+        height: 196px;
+        overflow: auto;
+    }
+
+    &__list-item [role='gridcell'] {
+        display: block;
+        width: 100%;
+        min-width: 0;
+    }
+
     &__item {
         display: flex;
         align-items: center;
@@ -82,7 +101,3 @@ $block: '.#{variables.$ns}item-selector';
         display: none;
     }
 }
-
-#{$block}__list-item {
-    --_--item-padding: var(--g-list-item-padding, 0 16px);
-}
diff --git a/src/components/ItemSelector/ItemSelector.tsx b/src/components/ItemSelector/ItemSelector.tsx
index 8439d9bc..495b531c 100644
--- a/src/components/ItemSelector/ItemSelector.tsx
+++ b/src/components/ItemSelector/ItemSelector.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react';
 
 import {Xmark} from '@gravity-ui/icons';
-import {Button, Icon, List, ListProps} from '@gravity-ui/uikit';
+import {Button, Icon, List, TextInput, useListFocusOwner} from '@gravity-ui/uikit';
+import {ListHelloPangeaDnd} from '@gravity-ui/uikit/hello-pangea-dnd';
+import {ListVirtualizer} from '@gravity-ui/uikit/virtualizer';
 
 import {block} from '../utils/cn';
 
@@ -27,9 +29,98 @@ export interface ItemSelectorProps<T> {
     getItemId: (item: T) => string;
 
     renderItemValue?: (item: T) => React.ReactNode;
-    renderItem?: ListProps<T>['renderItem'];
-    renderValueItem?: ListProps<T>['renderItem'];
-    filterItem?: ListProps<T>['filterItem'];
+    renderItem?: (item: T, active: boolean, index: number) => React.ReactNode;
+    renderValueItem?: ItemSelectorProps<T>['renderItem'];
+    filterItem?: (filter: string) => (item: T) => boolean;
+}
+
+function ItemSelectorList<T>({
+    items,
+    getItemId,
+    renderItem,
+    filterItem,
+    label,
+    onItemsUpdate,
+}: {
+    items: T[];
+    getItemId: ItemSelectorProps<T>['getItemId'];
+    renderItem: NonNullable<ItemSelectorProps<T>['renderItem']>;
+    filterItem: NonNullable<ItemSelectorProps<T>['filterItem']>;
+    label: string;
+    onItemsUpdate?: (items: T[]) => void;
+}) {
+    const {t} = i18n.useTranslation();
+    const [filter, setFilter] = React.useState('');
+    const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
+    const focusOwner = useListFocusOwner();
+    const {onKeyDown, ...inputProps} = focusOwner.getInputProps();
+    const filteredItems = filter ? items.filter(filterItem(filter)) : items;
+    const list = (
+        <List
+            role="grid"
+            aria-label={label}
+            items={filteredItems}
+            focusOwner={onItemsUpdate ? undefined : focusOwner}
+            activeItemId={activeItemId}
+            onActiveItemUpdate={setActiveItemId}
+            getItemId={getItemId}
+            getItemTextValue={getItemId}
+            className={b('items')}
+            renderItem={(ctx, helpers) =>
+                onItemsUpdate ? (
+                    <ListHelloPangeaDnd.Row ctx={ctx} helpers={helpers} className={b('list-item')}>
+                        {renderItem(ctx.item, ctx.state.active, ctx.index)}
+                    </ListHelloPangeaDnd.Row>
+                ) : (
+                    <List.ItemView
+                        {...helpers.getItemProps()}
+                        {...helpers.getItemViewProps()}
+                        className={b('list-item')}
+                    >
+                        <div {...helpers.getCellProps()}>
+                            {renderItem(ctx.item, ctx.state.active, ctx.index)}
+                        </div>
+                    </List.ItemView>
+                )
+            }
+        />
+    );
+
+    return (
+        <React.Fragment>
+            <TextInput
+                className={b('filter')}
+                placeholder={t('placeholder_search')}
+                value={filter}
+                controlProps={{
+                    ...(onItemsUpdate ? {} : inputProps),
+                    'aria-haspopup': onItemsUpdate ? undefined : 'grid',
+                    'aria-label': `${label}: ${t('placeholder_search')}`,
+                }}
+                onKeyDown={onItemsUpdate ? undefined : onKeyDown}
+                onUpdate={(query) => {
+                    setFilter(query);
+                    const firstItem = items.find(filterItem(query));
+                    setActiveItemId(firstItem === undefined ? null : getItemId(firstItem));
+                }}
+                hasClear
+            />
+            <ListVirtualizer estimateItemSize={28}>
+                {onItemsUpdate ? (
+                    <ListHelloPangeaDnd
+                        items={filteredItems}
+                        getItemId={getItemId}
+                        onItemsUpdate={onItemsUpdate}
+                        getItemDragDisabled={() => Boolean(filter)}
+                    >
+                        {list}
+                    </ListHelloPangeaDnd>
+                ) : (
+                    list
+                )}
+            </ListVirtualizer>
+        </React.Fragment>
+    );
 }
 
 export class ItemSelector<T> extends React.Component<ItemSelectorProps<T>> {
@@ -57,7 +148,10 @@ export class ItemSelector<T> extends React.Component<ItemSelectorProps<T>> {
                     view="flat-secondary"
                     size="s"
                     className={b('item-select')}
-                    onClick={this.onAddItem.bind(this, item)}
+                    onClick={(event) => {
+                        event.stopPropagation();
+                        this.onAddItem(item);
+                    }}
                 >
                     <i18n.Translation>{({t}) => t('button_select')}</i18n.Translation>
                 </Button>
@@ -80,7 +174,11 @@ export class ItemSelector<T> extends React.Component<ItemSelectorProps<T>> {
                     view="flat-secondary"
                     size="s"
                     className={b('value-item-remove')}
-                    onClick={() => this.onRemoveItem(item)}
+                    aria-label={typeof title === 'string' ? title : this.props.getItemId(item)}
+                    onClick={(event) => {
+                        event.stopPropagation();
+                        this.onRemoveItem(item);
+                    }}
                 >
                     <Icon data={Xmark} size={16} />
                 </Button>
@@ -128,11 +226,8 @@ export class ItemSelector<T> extends React.Component<ItemSelectorProps<T>> {
         const value = items.map(getItemId);
         this.onUpdate(value);
     };
-    onMoveItem = ({oldIndex, newIndex}: {oldIndex: number; newIndex: number}) => {
-        if (oldIndex !== newIndex) {
-            const value = this.props.value.slice();
-            this.onUpdate(List.moveListElement(value, oldIndex, newIndex));
-        }
+    onMoveItems = (items: T[]) => {
+        this.onUpdate(items.map(this.props.getItemId));
     };
     onUpdate = (value: string[]) => {
         this.props.onUpdate(value);
@@ -146,6 +241,7 @@ export class ItemSelector<T> extends React.Component<ItemSelectorProps<T>> {
             renderValueItem = this.renderValueItem,
             filterItem = this.filterItem,
             hideSelectAllButton,
+            getItemId,
         } = this.props;
         const [items, selected] = this.getActualItems();
         return (
@@ -166,13 +262,12 @@ export class ItemSelector<T> extends React.Component<ItemSelectorProps<T>> {
                                     </Button>
                                 )}
                             </div>
-                            <List
+                            <ItemSelectorList
                                 items={items}
-                                itemClassName={b('list-item')}
+                                getItemId={getItemId}
                                 renderItem={renderItem}
                                 filterItem={filterItem}
-                                filterPlaceholder={t('placeholder_search')}
-                                itemsHeight={196}
+                                label={selectorTitle || t('placeholder_search')}
                             />
                         </div>
                         <div className={b('list')}>
@@ -189,15 +284,13 @@ export class ItemSelector<T> extends React.Component<ItemSelectorProps<T>> {
                                     {t('button_deselect-all')}
                                 </Button>
                             </div>
-                            <List
+                            <ItemSelectorList
                                 items={selected}
-                                itemClassName={b('list-item')}
+                                getItemId={getItemId}
                                 renderItem={renderValueItem}
                                 filterItem={filterItem}
-                                filterPlaceholder={t('placeholder_search')}
-                                sortable={true}
-                                onSortEnd={this.onMoveItem}
-                                itemsHeight={196}
+                                label={t('label_selected')}
+                                onItemsUpdate={this.onMoveItems}
                             />
                         </div>
                     </div>
diff --git a/src/components/ItemSelector/README.md b/src/components/ItemSelector/README.md
index 580b0e3c..e6df1313 100644
--- a/src/components/ItemSelector/README.md
+++ b/src/components/ItemSelector/README.md
@@ -20,8 +20,9 @@ A component that allows you to form a subset of a list (e.g., a subset of column
 
 The item can be a string or an any object (but must be `truly`).
 
-The `getItemId` must be specified if the items in the main list are objects and not strings.
-The `renderItem` and `filterItem` can be specified if custom display and filtering are required.
+The `getItemId` must be specified if the items in the main list are objects and not strings. IDs must be unique and stable.
+The `renderItem(item, active, index)` and `filterItem(query)(item)` callbacks still render row content and filter items; they do not use the new UIKit List callback signatures. `renderValueItem` uses the same signature as `renderItem` for selected rows.
+Selected items can be reordered with the pointer or keyboard (focus a drag handle, press Space, use arrow keys, then press Space again). Sorting is disabled while the selected-items search is active.
 
 ```jsx
 <ItemSelector
diff --git a/src/components/ItemSelector/__stories__/ItemSelector.stories.tsx b/src/components/ItemSelector/__stories__/ItemSelector.stories.tsx
index 7ed00073..76544ba5 100644
--- a/src/components/ItemSelector/__stories__/ItemSelector.stories.tsx
+++ b/src/components/ItemSelector/__stories__/ItemSelector.stories.tsx
@@ -49,18 +49,6 @@ export default {
         disableStrictMode: true,
         a11y: {
             element: '#storybook-root',
-            config: {
-                rules: [
-                    {
-                        id: 'aria-allowed-attr',
-                        enabled: false, // https://github.com/gravity-ui/uikit/issues/1336
-                    },
-                    {
-                        id: 'scrollable-region-focusable', // https://github.com/gravity-ui/uikit/issues/1549
-                        enabled: false,
-                    },
-                ],
-            },
         },
     },
     args: {
diff --git a/src/components/ItemSelector/__tests__/ItemSelector.test.tsx b/src/components/ItemSelector/__tests__/ItemSelector.test.tsx
new file mode 100644
index 00000000..adb1c539
--- /dev/null
+++ b/src/components/ItemSelector/__tests__/ItemSelector.test.tsx
@@ -0,0 +1,65 @@
+import userEvent from '@testing-library/user-event';
+
+import {render, screen, within} from '../../../../test-utils/utils';
+import {ItemSelector} from '../ItemSelector';
+
+// JSDOM has no viewport; keep these interaction tests independent of measurement.
+jest.mock('@gravity-ui/uikit/virtualizer', () => ({
+    ListVirtualizer: ({children}: {children: React.ReactNode}) => children,
+}));
+
+test('Filters items and selects the first match from the search input', async () => {
+    const onUpdate = jest.fn();
+    render(
+        <ItemSelector
+            selectorTitle="Available"
+            items={['apple', 'pear']}
+            value={[]}
+            getItemId={(item) => item}
+            onUpdate={onUpdate}
+        />,
+    );
+    const user = userEvent.setup();
+    await user.type(screen.getByRole('combobox', {name: 'Available: Search'}), 'pear');
+    expect(screen.queryByText('apple')).not.toBeInTheDocument();
+    await user.keyboard('{Enter}');
+    expect(onUpdate).toHaveBeenCalledTimes(1);
+    expect(onUpdate).toHaveBeenCalledWith(['pear']);
+});
+
+test('Removing an item preserves the other selected items', async () => {
+    const onUpdate = jest.fn();
+    render(
+        <ItemSelector
+            items={['apple', 'pear']}
+            value={['pear', 'apple']}
+            getItemId={(item) => item}
+            onUpdate={onUpdate}
+        />,
+    );
+    const user = userEvent.setup();
+    const selected = screen.getByRole('grid', {name: 'Selected'});
+    await user.click(within(selected).getByRole('button', {name: 'pear'}));
+    expect(onUpdate).toHaveBeenCalledTimes(1);
+    expect(onUpdate).toHaveBeenCalledWith(['apple']);
+});
+
+test('Filtering selected items disables dragging without changing the selection', async () => {
+    const onUpdate = jest.fn();
+    render(
+        <ItemSelector
+            items={['apple', 'pear']}
+            value={['pear', 'apple']}
+            getItemId={(item) => item}
+            onUpdate={onUpdate}
+        />,
+    );
+    const user = userEvent.setup();
+    await user.type(screen.getByRole('textbox', {name: 'Selected: Search'}), 'pear');
+    const selected = screen.getByRole('grid', {name: 'Selected'});
+    expect(within(selected).queryByText('apple')).not.toBeInTheDocument();
+    expect(
+        within(selected).queryByRole('button', {name: 'Drag to reorder'}),
+    ).not.toBeInTheDocument();
+    expect(onUpdate).not.toHaveBeenCalled();
+});
diff --git a/src/components/Notification/Notification.tsx b/src/components/Notification/Notification.tsx
index e9a7f317..64710f00 100644
--- a/src/components/Notification/Notification.tsx
+++ b/src/components/Notification/Notification.tsx
@@ -173,7 +173,7 @@ function renderSourceIcon(source: NotificationSourceProps, titleId: string): Rea
     if (!iconElement) return null;
 
     return source.href ? (
-        <Link href={source.href} target="_blank" extraProps={{'aria-labelledby': titleId}}>
+        <Link href={source.href} target="_blank" aria-labelledby={titleId}>
             {iconElement}
         </Link>
     ) : (
diff --git a/src/components/Notification/NotificationWithSwipe.tsx b/src/components/Notification/NotificationWithSwipe.tsx
index 5294dcc8..8a8d89c6 100644
--- a/src/components/Notification/NotificationWithSwipe.tsx
+++ b/src/components/Notification/NotificationWithSwipe.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import clamp from 'lodash/clamp';
+import {clamp} from 'es-toolkit';
 
 import {block} from '../utils/cn';
 
diff --git a/src/components/Notifications/__stories__/Notifications.stories.tsx b/src/components/Notifications/__stories__/Notifications.stories.tsx
index 36a8e981..aaab6f10 100644
--- a/src/components/Notifications/__stories__/Notifications.stories.tsx
+++ b/src/components/Notifications/__stories__/Notifications.stories.tsx
@@ -82,7 +82,7 @@ export const Default: StoryFn = () => {
     });
 
     return (
-        <Flex gap={4}>
+        <Flex gap="spacing-4">
             <Wrapper>
                 <Notifications notifications={notifications} actions={actions} />
             </Wrapper>
@@ -119,14 +119,14 @@ export const LoadByScrolling: StoryFn = () => {
 export const InsideAPopup: StoryFn = () => {
     const {notifications, actions} = useNotificationsWithActions();
     const [isOpen, setIsOpen] = React.useState(false);
-    const ref = React.useRef(null);
+    const [anchorElement, setAnchorElement] = React.useState<HTMLButtonElement | null>(null);
 
     return (
         <React.Fragment>
-            <Button onClick={() => setIsOpen(!isOpen)} ref={ref}>
+            <Button onClick={() => setIsOpen(!isOpen)} ref={setAnchorElement}>
                 <Icon data={Bell} />
             </Button>
-            <Popup open={isOpen} anchorRef={ref}>
+            <Popup open={isOpen} anchorElement={anchorElement}>
                 <NotificationsPopupWrapper>
                     <Notifications notifications={notifications} actions={actions} />
                 </NotificationsPopupWrapper>
@@ -227,7 +227,7 @@ function CustomHeaderComponent({title, activeTab, onTabUpdate}: CustomHeaderComp
                         top: '50%',
                         transform: 'translateY(-50%)',
                     }}
-                    gap={1}
+                    gap="spacing-1"
                 >
                     <NotificationAction action={{icon: Funnel, text: 'Filter'}} />
                     {activeTab === 'second' && (
@@ -250,7 +250,7 @@ function useNotificationsVariationsControl() {
         showNotificationActions,
         sourcePlacement,
         renderControls: () => (
-            <Flex gap={2} direction="column">
+            <Flex gap="spacing-2" direction="column">
                 <Checkbox
                     title=""
                     checked={showNotificationsActions}
@@ -264,7 +264,7 @@ function useNotificationsVariationsControl() {
                 >
                     Notification actions
                 </Checkbox>
-                <Flex direction="column" gap={1}>
+                <Flex direction="column" gap="spacing-1">
                     <Text>Source/date placement</Text>
                     <SegmentedRadioGroup<NotificationSourcePlacement>
                         value={sourcePlacement}
diff --git a/src/components/Notifications/__stories__/mockData.tsx b/src/components/Notifications/__stories__/mockData.tsx
index 537a6b82..a09ecc39 100644
--- a/src/components/Notifications/__stories__/mockData.tsx
+++ b/src/components/Notifications/__stories__/mockData.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import {Archive, ArrowRotateLeft, CircleCheck, Funnel, TrashBin} from '@gravity-ui/icons';
-import {Disclosure, DropdownMenu, Flex, Icon, Link} from '@gravity-ui/uikit';
+import {Disclosure, Flex, Icon, Link, Menu} from '@gravity-ui/uikit';
 
 import {NotificationAction} from '../../Notification/NotificationAction';
 import {NotificationSwipeAction} from '../../Notification/NotificationSwipeAction';
@@ -22,19 +22,18 @@ export const notificationsMockActions = {
         <NotificationAction action={{icon: Archive, text: 'Remove all from archive', onClick}} />
     ),
     filter: () => (
-        <DropdownMenu
-            switcher={
-                <NotificationAction
-                    action={{icon: Funnel, text: 'Filter', onClick: () => console.log('FILTER')}}
-                />
+        <Menu
+            trigger={
+                <Menu.Trigger aria-label="Filter" view="flat">
+                    <Icon data={Funnel} />
+                </Menu.Trigger>
             }
-            items={[
-                {text: 'Any', action: () => console.log('any')},
-                {text: 'Tracker', action: () => console.log('tracker')},
-                {text: 'Cloud', action: () => console.log('cloud')},
-                {text: 'You can put any popup here', action: () => console.log('cloud')},
-            ]}
-        />
+        >
+            <Menu.Item onClick={() => console.log('any')}>Any</Menu.Item>
+            <Menu.Item onClick={() => console.log('tracker')}>Tracker</Menu.Item>
+            <Menu.Item onClick={() => console.log('cloud')}>Cloud</Menu.Item>
+            <Menu.Item onClick={() => console.log('cloud')}>You can put any popup here</Menu.Item>
+        </Menu>
     ),
 };
 
@@ -104,7 +103,7 @@ export const LongNotificationContent = (props: {
 
     return (
         <Disclosure summary="Collapsed content" onUpdate={handleUpdate}>
-            <Flex direction="column" gap={1}>
+            <Flex direction="column" gap="spacing-1">
                 {Array.from({length: 20}, (_, index) => (
                     <i key={index}>{'Long expanded content. '}</i>
                 ))}
diff --git a/src/components/OnboardingMenu/OnboardingMenu.scss b/src/components/OnboardingMenu/OnboardingMenu.scss
index 4a6af96c..99b425a6 100644
--- a/src/components/OnboardingMenu/OnboardingMenu.scss
+++ b/src/components/OnboardingMenu/OnboardingMenu.scss
@@ -11,6 +11,19 @@ $block: '.#{variables.$ns}onboarding-menu';
 
     position: relative;
 
+    &__complete-button {
+        --g-button-text-color: var(--g-color-text-light-primary);
+        --g-button-text-color-hover: var(--g-color-text-light-primary);
+        --g-button-background-color: transparent;
+        --g-button-background-color-hover: var(--g-color-base-contrast-light-simple-hover);
+        --g-button-border-color: var(--g-color-line-contrast-light);
+        --g-button-focus-outline-color: var(--g-color-line-contrast-light);
+
+        &:disabled {
+            --g-button-text-color: var(--g-color-text-light-hint);
+        }
+    }
+
     &__content {
         box-shadow: 0 2px 8px 0 var(--g-color-sfx-shadow-light);
         display: flex;
diff --git a/src/components/OnboardingMenu/OnboardingMenu.tsx b/src/components/OnboardingMenu/OnboardingMenu.tsx
index 9553a7c6..0a5cb742 100644
--- a/src/components/OnboardingMenu/OnboardingMenu.tsx
+++ b/src/components/OnboardingMenu/OnboardingMenu.tsx
@@ -146,7 +146,7 @@ const OnboardingMenuParent = ({
                         </div>
                         <div className={cnOnboardingMenu('buttons')}>
                             <Button
-                                view="normal-contrast"
+                                view="contrast-light"
                                 size="m"
                                 onClick={onCollapseClickCallback}
                                 width="max"
@@ -154,7 +154,8 @@ const OnboardingMenuParent = ({
                                 {collapseButtonText ?? t('collapse')}
                             </Button>
                             <Button
-                                view="outlined-contrast"
+                                view="outlined"
+                                className={cnOnboardingMenu('complete-button')}
                                 onClick={onCompleteClick}
                                 size="m"
                                 width="max"
diff --git a/src/components/PromoSheet/PromoSheet.scss b/src/components/PromoSheet/PromoSheet.scss
index cc6595e1..df8e1b78 100644
--- a/src/components/PromoSheet/PromoSheet.scss
+++ b/src/components/PromoSheet/PromoSheet.scss
@@ -3,6 +3,20 @@
 $block: '.#{variables.$ns}promo-sheet';
 
 #{$block} {
+    &__close-button,
+    &__action-button {
+        --g-button-text-color: var(--g-color-text-light-primary);
+        --g-button-text-color-hover: var(--g-color-text-light-primary);
+        --g-button-background-color: transparent;
+        --g-button-background-color-hover: var(--g-color-base-contrast-light-simple-hover);
+        --g-button-border-color: var(--g-color-line-contrast-light);
+        --g-button-focus-outline-color: var(--g-color-line-contrast-light);
+
+        &:disabled {
+            --g-button-text-color: var(--g-color-text-light-hint);
+        }
+    }
+
     &__content[class] {
         width: auto;
         padding: var(--gc-promo-sheet-padding);
diff --git a/src/components/PromoSheet/PromoSheet.tsx b/src/components/PromoSheet/PromoSheet.tsx
index 3c7b3eb2..e3c275ab 100644
--- a/src/components/PromoSheet/PromoSheet.tsx
+++ b/src/components/PromoSheet/PromoSheet.tsx
@@ -23,7 +23,7 @@ export type PromoSheetProps = {
     imageContainerClassName?: string;
     imageClassName?: string;
     onActionClick?: ButtonProps['onClick'];
-    onClose?: SheetProps['onClose'];
+    onClose?: SheetProps['onTransitionOutComplete'];
 };
 
 type ImageSizes = {
@@ -62,13 +62,6 @@ export function PromoSheet({
         setVisible(false);
     }, []);
 
-    const closeButtonExtraProps = React.useMemo(
-        () => ({
-            'aria-label': closeText,
-        }),
-        [closeText],
-    );
-
     React.useEffect(() => {
         if (!imageSrc) {
             setLoaded(true);
@@ -101,18 +94,19 @@ export function PromoSheet({
         <Sheet
             className={cn(null, className)}
             contentClassName={cn('content', contentClassName)}
-            visible={visible && loaded}
+            open={visible && loaded}
             hideTopBar
-            onClose={onClose}
+            onOpenChange={setVisible}
+            onTransitionOutComplete={onClose}
         >
             <header className={cn('header')}>
                 <h2 className={cn('title')}>{title}</h2>
                 <Button
                     className={cn('close-button')}
                     size="xl"
-                    view="flat-contrast"
+                    view="flat"
                     onClick={handleCloseClick}
-                    extraProps={closeButtonExtraProps}
+                    aria-label={closeText}
                 >
                     <Icon data={Xmark} size={24} />
                 </Button>
@@ -134,7 +128,7 @@ export function PromoSheet({
                 <Button
                     className={cn('action-button')}
                     size="xl"
-                    view="outlined-contrast"
+                    view="outlined"
                     width="max"
                     href={actionHref as any}
                     onClick={handleActionClick as any}
diff --git a/src/components/PromoSheet/README.md b/src/components/PromoSheet/README.md
index ff33bdd7..4b55abc1 100644
--- a/src/components/PromoSheet/README.md
+++ b/src/components/PromoSheet/README.md
@@ -4,21 +4,21 @@ A component for displaying a promo dialog informing the user about a new feature
 
 ## Properties
 
-| Name                      | Type                     | Default | Description                                   |
-| :------------------------ | :----------------------- | :------ | :-------------------------------------------- |
-| `title`                   | `string`                 | —       | Sheet title                                   |
-| `message`                 | `string`                 | —       | Promo text                                    |
-| `actionText`              | `string`                 | —       | Text of the primary action button             |
-| `closeText`               | `string`                 | —       | Text of the close button                      |
-| `actionHref`              | `string`                 |         | Link opened by the primary action button      |
-| `imageSrc`                | `string`                 |         | Promo image URL                               |
-| `imageAlt`                | `string`                 | `''`    | Promo image `alt` text                        |
-| `onActionClick`           | `ButtonProps['onClick']` |         | Primary action click handler                  |
-| `onClose`                 | `SheetProps['onClose']`  |         | Called when the sheet is closed               |
-| `className`               | `string`                 |         | HTML `class` attribute of the sheet           |
-| `contentClassName`        | `string`                 |         | HTML `class` attribute of the content block   |
-| `imageContainerClassName` | `string`                 |         | HTML `class` attribute of the image container |
-| `imageClassName`          | `string`                 |         | HTML `class` attribute of the image           |
+| Name                      | Type                                    | Default | Description                                   |
+| :------------------------ | :-------------------------------------- | :------ | :-------------------------------------------- |
+| `title`                   | `string`                                | —       | Sheet title                                   |
+| `message`                 | `string`                                | —       | Promo text                                    |
+| `actionText`              | `string`                                | —       | Text of the primary action button             |
+| `closeText`               | `string`                                | —       | Text of the close button                      |
+| `actionHref`              | `string`                                |         | Link opened by the primary action button      |
+| `imageSrc`                | `string`                                |         | Promo image URL                               |
+| `imageAlt`                | `string`                                | `''`    | Promo image `alt` text                        |
+| `onActionClick`           | `ButtonProps['onClick']`                |         | Primary action click handler                  |
+| `onClose`                 | `SheetProps['onTransitionOutComplete']` |         | Called when the sheet is closed               |
+| `className`               | `string`                                |         | HTML `class` attribute of the sheet           |
+| `contentClassName`        | `string`                                |         | HTML `class` attribute of the content block   |
+| `imageContainerClassName` | `string`                                |         | HTML `class` attribute of the image container |
+| `imageClassName`          | `string`                                |         | HTML `class` attribute of the image           |
 
 ## Usage
 
diff --git a/src/components/PromoSheet/__tests__/PromoSheet.test.tsx b/src/components/PromoSheet/__tests__/PromoSheet.test.tsx
index fced6451..c5345e08 100644
--- a/src/components/PromoSheet/__tests__/PromoSheet.test.tsx
+++ b/src/components/PromoSheet/__tests__/PromoSheet.test.tsx
@@ -1,6 +1,6 @@
 import userEvent from '@testing-library/user-event';
 
-import {act, render, screen} from '../../../../test-utils/utils';
+import {act, render, screen, waitFor} from '../../../../test-utils/utils';
 import {PromoSheet} from '../PromoSheet';
 
 test('Renders base content', () => {
@@ -77,4 +77,22 @@ test('Call onActionClick and onClose by action button', async () => {
     await act(() => user.click(actionButton));
 
     expect(handleActionClick).toBeCalled();
+    await waitFor(() => expect(handleClose).toHaveBeenCalledTimes(1));
+});
+
+test('Escape closes the sheet and calls onClose after the transition', async () => {
+    const onClose = jest.fn();
+    render(
+        <PromoSheet
+            title="Title"
+            message="Message"
+            actionText="Action"
+            closeText="Close"
+            onClose={onClose}
+        />,
+    );
+    const user = userEvent.setup();
+    await user.keyboard('{Escape}');
+    await waitFor(() => expect(onClose).toHaveBeenCalledTimes(1));
+    expect(screen.queryByRole('heading', {name: 'Title'})).not.toBeInTheDocument();
 });
diff --git a/src/components/Reactions/Reaction.tsx b/src/components/Reactions/Reaction.tsx
index c6c80b13..90e40f7d 100644
--- a/src/components/Reactions/Reaction.tsx
+++ b/src/components/Reactions/Reaction.tsx
@@ -77,7 +77,7 @@ export function Reaction(props: ReactionInnerProps) {
             size={size}
             selected={selected}
             view="outlined"
-            extraProps={{value}}
+            value={value}
             pin="circle-circle"
             onClick={onClickCallback}
             className={b('reaction-button', {size})}
@@ -108,7 +108,7 @@ export function Reaction(props: ReactionInnerProps) {
             {currentHoveredReaction && currentHoveredReaction.reaction.value === value ? (
                 <Popup
                     className={b('popup')}
-                    anchorRef={currentHoveredReaction.ref}
+                    anchorElement={currentHoveredReaction.ref.current}
                     placement={popupDefaultPlacement}
                     open={currentHoveredReaction.open}
                     hasArrow
diff --git a/src/components/Reactions/Reactions.tsx b/src/components/Reactions/Reactions.tsx
index 782c69b3..c9c17d2d 100644
--- a/src/components/Reactions/Reactions.tsx
+++ b/src/components/Reactions/Reactions.tsx
@@ -12,7 +12,7 @@ import {
     PopupPlacement,
     QAProps,
 } from '@gravity-ui/uikit';
-import xor from 'lodash/xor';
+import {xor} from 'es-toolkit';
 
 import {block} from '../utils/cn';
 
@@ -265,14 +265,15 @@ export function Reactions<AddReactionRef extends HTMLElement = HTMLButtonElement
     const addReactionPopup = readOnly ? null : (
         <Popup
             id={popupId}
-            anchorRef={renderAddReaction ? addReactionRef : addReactionButtonRef}
+            anchorElement={
+                renderAddReaction ? addReactionRef.current : addReactionButtonRef.current
+            }
             className={b('add-reaction-popover', popupClassName)}
             open={palettePopupOpened}
             modal
             placement={popupPlacement}
             initialFocus={0}
-            onOutsideClick={onClosePalettePopup}
-            onEscapeKeyDown={onClosePalettePopup}
+            onOpenChange={setPalettePopupOpened}
         >
             {paletteContent}
         </Popup>
diff --git a/src/components/Reactions/ReactionsContainer.tsx b/src/components/Reactions/ReactionsContainer.tsx
index 13b7c6ed..2b91ac92 100644
--- a/src/components/Reactions/ReactionsContainer.tsx
+++ b/src/components/Reactions/ReactionsContainer.tsx
@@ -13,7 +13,7 @@ export type ReactionsContainerProps = {
 
 export function ReactionsContainer({className, style, qa, children}: ReactionsContainerProps) {
     return (
-        <Flex className={b(null, className)} style={style} gap={1} wrap={true} qa={qa}>
+        <Flex className={b(null, className)} style={style} gap="spacing-1" wrap={true} qa={qa}>
             {children}
         </Flex>
     );
diff --git a/src/components/Reactions/__stories__/Reactions.stories.tsx b/src/components/Reactions/__stories__/Reactions.stories.tsx
index 75853af1..67fdb7f6 100644
--- a/src/components/Reactions/__stories__/Reactions.stories.tsx
+++ b/src/components/Reactions/__stories__/Reactions.stories.tsx
@@ -22,7 +22,7 @@ export const Readonly: StoryFn = () => {
             renderTooltip={
                 renderTooltip
                     ? (state) => (
-                          <Flex direction="column" gap={2}>
+                          <Flex direction="column" gap="spacing-2">
                               <Text variant="subheader-1">You must be singed in to react</Text>
                               {renderTooltip(state)}
                           </Flex>
@@ -38,24 +38,24 @@ export const Readonly: StoryFn = () => {
 
 export const Size: StoryFn = () => {
     return (
-        <Flex direction="column" gap={4}>
-            <Flex direction="column" gap={2}>
+        <Flex direction="column" gap="spacing-4">
+            <Flex direction="column" gap="spacing-2">
                 <Text variant="subheader-1">Size XS</Text>
                 <Reactions {...useMockReactions()} size="xs" />
             </Flex>
-            <Flex direction="column" gap={2}>
+            <Flex direction="column" gap="spacing-2">
                 <Text variant="subheader-1">Size S</Text>
                 <Reactions {...useMockReactions()} size="s" />
             </Flex>
-            <Flex direction="column" gap={2}>
+            <Flex direction="column" gap="spacing-2">
                 <Text variant="subheader-1">Size M</Text>
                 <Reactions {...useMockReactions()} size="m" />
             </Flex>
-            <Flex direction="column" gap={2}>
+            <Flex direction="column" gap="spacing-2">
                 <Text variant="subheader-1">Size L</Text>
                 <Reactions {...useMockReactions()} size="l" />
             </Flex>
-            <Flex direction="column" gap={2}>
+            <Flex direction="column" gap="spacing-2">
                 <Text variant="subheader-1">Size XL</Text>
                 <Reactions {...useMockReactions()} size="xl" />
             </Flex>
@@ -65,12 +65,12 @@ export const Size: StoryFn = () => {
 
 export const AddButtonPlacement: StoryFn = () => {
     return (
-        <Flex direction="column" gap={4}>
-            <Flex direction="column" gap={2}>
+        <Flex direction="column" gap="spacing-4">
+            <Flex direction="column" gap="spacing-2">
                 <Text variant="subheader-1">Start</Text>
                 <Reactions {...useMockReactions()} addButtonPlacement="start" />
             </Flex>
-            <Flex direction="column" gap={2}>
+            <Flex direction="column" gap="spacing-2">
                 <Text variant="subheader-1">End</Text>
                 <Reactions {...useMockReactions()} addButtonPlacement="end" />
             </Flex>
diff --git a/src/components/Reactions/__tests__/mock/mockHooks.tsx b/src/components/Reactions/__tests__/mock/mockHooks.tsx
index 6d1ab416..7c17e09d 100644
--- a/src/components/Reactions/__tests__/mock/mockHooks.tsx
+++ b/src/components/Reactions/__tests__/mock/mockHooks.tsx
@@ -35,7 +35,7 @@ const renderUserReacted = ({avatar, name}: ReactionsMockUser) => {
 
 const renderUsersReacted = (users: ReactionsMockUser[]) => {
     return (
-        <Flex direction="column" gap={1}>
+        <Flex direction="column" gap="spacing-1">
             {users.map(renderUserReacted)}
         </Flex>
     );
diff --git a/src/components/SharePopover/ShareListItem/ShareListItem.tsx b/src/components/SharePopover/ShareListItem/ShareListItem.tsx
index 9b631a94..88a4f9e3 100644
--- a/src/components/SharePopover/ShareListItem/ShareListItem.tsx
+++ b/src/components/SharePopover/ShareListItem/ShareListItem.tsx
@@ -44,7 +44,7 @@ export class ShareListItem extends React.PureComponent<ShareListItemProps> {
                     target="_blank"
                     width="max"
                     className={b(null, className)}
-                    extraProps={{'aria-label': i18n('label_share', {name})}}
+                    aria-label={i18n('label_share', {name})}
                 >
                     {icon && (
                         <Icon data={icon} size={16} className={b('icon', {type: typeModifier})} />
@@ -60,7 +60,7 @@ export class ShareListItem extends React.PureComponent<ShareListItemProps> {
                 href={url}
                 target="_blank"
                 className={b(null, className)}
-                extraProps={{'aria-label': i18n('label_share', {name})}}
+                aria-label={i18n('label_share', {name})}
             >
                 {icon && <Icon data={icon} size={24} className={b('icon', {type: typeModifier})} />}
             </Button>
diff --git a/src/components/SharePopover/SharePopover.scss b/src/components/SharePopover/SharePopover.scss
index 6bfb150a..af3b0ac6 100644
--- a/src/components/SharePopover/SharePopover.scss
+++ b/src/components/SharePopover/SharePopover.scss
@@ -6,8 +6,7 @@ $block: '.#{variables.$ns}share-popover';
 #{$block} {
     position: relative;
 
-    // for guaranteed popover style override
-    #{$block} &__tooltip {
+    &__tooltip .g-popup__content {
         max-width: none;
         padding: 8px;
     }
diff --git a/src/components/SharePopover/SharePopover.tsx b/src/components/SharePopover/SharePopover.tsx
index 3c009de0..562f4f2c 100644
--- a/src/components/SharePopover/SharePopover.tsx
+++ b/src/components/SharePopover/SharePopover.tsx
@@ -1,9 +1,8 @@
 import * as React from 'react';
 
 import {NodesRight} from '@gravity-ui/icons';
-import {Icon, useUniqId} from '@gravity-ui/uikit';
-import type {IconData, PopupPlacement} from '@gravity-ui/uikit';
-import {Popover} from '@gravity-ui/uikit/legacy';
+import {Icon, Popover} from '@gravity-ui/uikit';
+import type {IconData, PopoverProps, PopupPlacement} from '@gravity-ui/uikit';
 
 import {block} from '../utils/cn';
 
@@ -106,8 +105,8 @@ export const SharePopover = (props: SharePopoverProps) => {
         buttonAriaLabel,
     } = props;
     const [isOpen, setIsOpen] = React.useState(false);
-    const buttonRef = React.useRef<HTMLButtonElement>(null);
-    const tooltipId = useUniqId();
+    const canWebShare =
+        useWebShareApi && typeof navigator !== 'undefined' && typeof navigator.share === 'function';
 
     const content = React.useMemo(
         () => (
@@ -145,56 +144,55 @@ export const SharePopover = (props: SharePopoverProps) => {
                 onClick(event);
             }
 
-            if (useWebShareApi && navigator && typeof navigator.share === 'function') {
-                await navigator.share({url, title, text});
+            if (canWebShare) {
                 event.preventDefault();
-                return false;
+                await navigator.share({url, title, text});
+            } else if (!autoclosable && openByHover) {
+                setIsOpen((open) => !open);
             }
-            return true;
         },
-        [onClick, text, title, url, useWebShareApi],
+        [onClick, text, title, url, canWebShare, autoclosable, openByHover],
     );
 
+    const handleOpenChange: PopoverProps['onOpenChange'] = (open, _event, reason) => {
+        if (!open && !autoclosable && reason === 'hover') return;
+        setIsOpen(open);
+    };
+
     const shouldOpenByHover = openByHover && !useWebShareApi;
     return (
         <Popover
             placement={placement}
             hasArrow={false}
-            openOnHover={shouldOpenByHover}
-            autoclosable={autoclosable}
-            delayClosing={closeDelay}
+            trigger={shouldOpenByHover ? 'all' : 'click'}
+            openDelay={0}
+            closeDelay={closeDelay}
+            open={isOpen}
+            disabled={canWebShare}
             content={content}
-            className={b(null, className)}
-            tooltipClassName={b('tooltip', tooltipClassName)}
-            onClick={handleClick}
-            tooltipId={tooltipId}
+            className={b('tooltip', tooltipClassName)}
             disablePortal
-            onOpenChange={setIsOpen}
-            focusTrap={!shouldOpenByHover}
-            autoFocus={!shouldOpenByHover}
-            restoreFocusRef={shouldOpenByHover ? undefined : buttonRef}
+            onOpenChange={handleOpenChange}
+            modal={!shouldOpenByHover}
+            initialFocus={shouldOpenByHover ? -1 : 0}
+            returnFocus={!shouldOpenByHover}
         >
-            {({onClick: onClickInner}) => (
-                <button
-                    className={b('container', switcherClassName)}
-                    aria-expanded={openByHover ? undefined : isOpen}
-                    aria-controls={tooltipId}
-                    aria-describedby={tooltipId}
-                    aria-label={buttonAriaLabel}
-                    onClick={onClickInner}
-                    ref={buttonRef}
-                >
-                    <div className={b('icon-container')}>
-                        <Icon
-                            data={customIcon ? customIcon : NodesRight}
-                            size={iconSize}
-                            className={b('icon', iconClass)}
-                        />
-                    </div>
+            <button
+                type="button"
+                className={b('container', [b(null, className), switcherClassName])}
+                aria-label={buttonAriaLabel}
+                onClick={handleClick}
+            >
+                <div className={b('icon-container')}>
+                    <Icon
+                        data={customIcon ? customIcon : NodesRight}
+                        size={iconSize}
+                        className={b('icon', iconClass)}
+                    />
+                </div>
 
-                    {Boolean(buttonTitle) && <div className={b('title')}>{buttonTitle}</div>}
-                </button>
-            )}
+                {Boolean(buttonTitle) && <div className={b('title')}>{buttonTitle}</div>}
+            </button>
         </Popover>
     );
 };
diff --git a/src/components/SharePopover/__stories__/SharePopover.stories.tsx b/src/components/SharePopover/__stories__/SharePopover.stories.tsx
index 9e26899b..3724d567 100644
--- a/src/components/SharePopover/__stories__/SharePopover.stories.tsx
+++ b/src/components/SharePopover/__stories__/SharePopover.stories.tsx
@@ -24,12 +24,6 @@ export default {
             element: '#storybook-root',
             config: {
                 rules: [
-                    {
-                        id: 'aria-valid-attr-value',
-                        enabled: false,
-                        // the id in aria-controls will resolve on hover
-                        selector: '.gc-share-popover__container[aria-controls]',
-                    },
                     {
                         id: 'color-contrast',
                         enabled: false,
diff --git a/src/components/SharePopover/__tests__/SharePopover.test.tsx b/src/components/SharePopover/__tests__/SharePopover.test.tsx
new file mode 100644
index 00000000..a956ac93
--- /dev/null
+++ b/src/components/SharePopover/__tests__/SharePopover.test.tsx
@@ -0,0 +1,52 @@
+import userEvent from '@testing-library/user-event';
+
+import {render, screen, waitFor} from '../../../../test-utils/utils';
+import {SharePopover} from '../SharePopover';
+
+test('Click opens the share dialog and Escape restores focus to the trigger', async () => {
+    render(<SharePopover buttonAriaLabel="Share" openByHover={false} url="https://example.com" />);
+    const user = userEvent.setup();
+    const trigger = screen.getByRole('button', {name: 'Share'});
+    await user.click(trigger);
+    expect(await screen.findByRole('dialog')).toBeInTheDocument();
+    await user.keyboard('{Escape}');
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+    expect(trigger).toHaveFocus();
+});
+
+test('A non-autoclosable popover stays open after leaving the trigger', async () => {
+    render(
+        <SharePopover
+            buttonAriaLabel="Share"
+            autoclosable={false}
+            closeDelay={0}
+            url="https://example.com"
+        />,
+    );
+    const user = userEvent.setup();
+    const trigger = screen.getByRole('button', {name: 'Share'});
+    await user.hover(trigger);
+    expect(await screen.findByRole('dialog')).toBeInTheDocument();
+    await user.unhover(trigger);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    await user.click(trigger);
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+});
+
+test('Uses Web Share without opening the popover', async () => {
+    const share = jest.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, 'share', {value: share, configurable: true});
+    try {
+        render(<SharePopover buttonAriaLabel="Share" useWebShareApi url="https://example.com" />);
+        const user = userEvent.setup();
+        await user.click(screen.getByRole('button', {name: 'Share'}));
+        expect(share).toHaveBeenCalledWith({
+            url: 'https://example.com',
+            title: undefined,
+            text: undefined,
+        });
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    } finally {
+        Reflect.deleteProperty(navigator, 'share');
+    }
+});
diff --git a/src/components/StoreBadge/README.md b/src/components/StoreBadge/README.md
index f5ead1db..78778142 100644
--- a/src/components/StoreBadge/README.md
+++ b/src/components/StoreBadge/README.md
@@ -62,19 +62,18 @@ LANDING_BLOCK-->
 
 ## Properties
 
-| Name           | Description                                         | Default |
-| :------------- | :-------------------------------------------------- | :-----: |
-| **platform**   | App store platform: `"android"` or `"ios"`          |    -    |
-| **href**       | The URL                                             |    -    |
-| **title**      | Link title                                          |    -    |
-| **target**     | Link target attribute                               |    -    |
-| **rel**        | Link rel attribute                                  |    -    |
-| **id**         | Id attribute                                        |    -    |
-| **children**   | Child element `React.ReactNode`                     |    -    |
-| **onClick**    | Handler for onclick event `React.MouseEventHandler` |    -    |
-| **onFocus**    | Handler for onfocus event `React.MouseEventHandler` |    -    |
-| **onBlur**     | Handler for onblur event `React.MouseEventHandler`  |    -    |
-| **extraProps** | Extra html attributes                               |    -    |
+| Name         | Description                                         | Default |
+| :----------- | :-------------------------------------------------- | :-----: |
+| **platform** | App store platform: `"android"` or `"ios"`          |    -    |
+| **href**     | The URL                                             |    -    |
+| **title**    | Link title                                          |    -    |
+| **target**   | Link target attribute                               |    -    |
+| **rel**      | Link rel attribute                                  |    -    |
+| **id**       | Id attribute                                        |    -    |
+| **children** | Child element `React.ReactNode`                     |    -    |
+| **onClick**  | Handler for onclick event `React.MouseEventHandler` |    -    |
+| **onFocus**  | Handler for onfocus event `React.MouseEventHandler` |    -    |
+| **onBlur**   | Handler for onblur event `React.MouseEventHandler`  |    -    |
 
 <!--LANDING_BLOCK
 More information about the Link component on the basis of which this component is made can be found [here](https://gravity-ui.com/components/uikit/link)
diff --git a/src/components/StoreBadge/StoreBadge.tsx b/src/components/StoreBadge/StoreBadge.tsx
index 91a7d89b..a8a40d6d 100644
--- a/src/components/StoreBadge/StoreBadge.tsx
+++ b/src/components/StoreBadge/StoreBadge.tsx
@@ -78,11 +78,8 @@ export const StoreBadge = ({
             href={href}
             target="_blank"
             rel="noopener"
+            aria-label={iconLabelData}
             {...restLinkProps}
-            extraProps={{
-                'aria-label': iconLabelData,
-                ...restLinkProps.extraProps,
-            }}
         >
             <Icon data={iconData} />
         </Link>
diff --git a/src/components/Stories/README.md b/src/components/Stories/README.md
index 80ce8ee6..0c87e8ef 100644
--- a/src/components/Stories/README.md
+++ b/src/components/Stories/README.md
@@ -4,6 +4,8 @@ Component for displaying stories. It looks like a carousel in a modal with given
 
 ## Properties
 
+`onClose(event?, reason?)` uses UIKit 8 reasons: `escape-key`, `outside-press`, or `click` for the close button. Assistive-technology dismissal may omit the event or reason.
+
 | Property               | Type            | Required | Default | Description                                       |
 | :--------------------- | :-------------- | :------- | :------ | :------------------------------------------------ |
 | open                   | `Boolean`       | ✓        |         | Visibility flag                                   |
diff --git a/src/components/Stories/Stories.tsx b/src/components/Stories/Stories.tsx
index 39fde991..1fc63c07 100644
--- a/src/components/Stories/Stories.tsx
+++ b/src/components/Stories/Stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import type {ModalCloseReason} from '@gravity-ui/uikit';
+import type {OpenChangeReason} from '@gravity-ui/uikit';
 import {Modal} from '@gravity-ui/uikit';
 
 import {block} from '../utils/cn';
@@ -17,8 +17,8 @@ export interface StoriesProps {
     open: boolean;
     items: StoriesItem[];
     onClose?: (
-        event: MouseEvent | KeyboardEvent | React.MouseEvent<HTMLElement, MouseEvent>,
-        reason: ModalCloseReason | 'closeButtonClick',
+        event?: Event | React.MouseEvent<HTMLElement, MouseEvent>,
+        reason?: OpenChangeReason,
     ) => void;
     initialStoryIndex?: number;
     onPreviousClick?: (storyIndex: number) => void;
@@ -64,8 +64,8 @@ export function Stories({
         (event: MouseEvent | KeyboardEvent | React.MouseEvent<HTMLElement, MouseEvent>) => void
     >(
         (event) => {
-            handleClose(event, 'closeButtonClick');
-            if (syncInTabsKey) closeWithLS(event, 'closeButtonClick');
+            handleClose(event, 'click');
+            if (syncInTabsKey) closeWithLS(event, 'click');
         },
         [handleClose, syncInTabsKey, closeWithLS],
     );
@@ -137,7 +137,9 @@ export function Stories({
     return (
         <Modal
             open={open}
-            onClose={handleClose}
+            onOpenChange={(nextOpen, event, reason) => {
+                if (!nextOpen) handleClose(event, reason);
+            }}
             disableOutsideClick={disableOutsideClick}
             className={b()}
             contentClassName={b('modal-content', className)}
diff --git a/src/components/Stories/__stories__/Stories.stories.tsx b/src/components/Stories/__stories__/Stories.stories.tsx
index dd65cc3f..5a241a58 100644
--- a/src/components/Stories/__stories__/Stories.stories.tsx
+++ b/src/components/Stories/__stories__/Stories.stories.tsx
@@ -251,7 +251,7 @@ const DefaultTemplate: StoryFn<StoriesProps> = () => {
             },
             secondAction: {
                 children: 'Second button',
-                view: 'normal-contrast',
+                view: 'contrast-light',
             },
             content:
                 'Lorem ipsum odor amet, consectetuer adipiscing elit. Nunc at parturient tristique senectus class duis eget per taciti. Eu rutrum est euismod risus aliquet in. Vehicula habitant nostra enim quis blandit consequat. Blandit ex ut purus; vestibulum accumsan duis? Porttitor accumsan at molestie integer nulla habitant? Egestas urna suscipit eleifend tortor mauris montes vulputate primis?Tempor viverra vitae tempus consectetur egestas? Quam dolor dictumst pellentesque porta; pulvinar conubia placerat risus. Leo at elementum vivamus fermentum erat taciti. Turpis ipsum faucibus primis purus, montes curae eu vel. Lacus metus sagittis dictumst diam libero imperdiet rhoncus neque. Natoque nullam inceptos porttitor integer porttitor nascetur a interdum. Imperdiet scelerisque rutrum congue massa eleifend torquent nisi. Sociosqu libero volutpat nisl orci viverra. Tristique egestas auctor conubia; etiam lectus scelerisque ligula. Magnis ultrices venenatis vivamus hac taciti inceptos leo. Interdum magnis sollicitudin elementum placerat montes. Lacinia platea netus nascetur ornare sociosqu. Inceptos taciti iaculis interdum nisl sodales in eros fermentum. Justo maecenas elementum condimentum feugiat consectetur semper sollicitudin. Primis sodales posuere facilisis donec ipsum efficitur. Faucibus accumsan lectus bibendum rhoncus maecenas, eget aliquam netus. Lectus torquent ut sodales fringilla natoque.',
@@ -288,7 +288,7 @@ const DefaultTemplate: StoryFn<StoriesProps> = () => {
     ];
 
     return (
-        <Flex gap={5} direction="column">
+        <Flex gap="spacing-5" direction="column">
             {[itemsFirst, itemsSecond, itemsThird].map((items, index) => {
                 return (
                     <BaseStory key={index} items={items} description={exampleDescription[index]} />
diff --git a/src/components/Stories/components/StoriesLayout/StoriesLayout.tsx b/src/components/Stories/components/StoriesLayout/StoriesLayout.tsx
index 70b47816..f8ad3bc1 100644
--- a/src/components/Stories/components/StoriesLayout/StoriesLayout.tsx
+++ b/src/components/Stories/components/StoriesLayout/StoriesLayout.tsx
@@ -106,7 +106,7 @@ export const StoriesLayout = ({
                                     </div>
                                 )}
                                 {Boolean(currentStory.firstAction || currentStory.secondAction) && (
-                                    <Flex gap={4} className={b('action-block')}>
+                                    <Flex gap="spacing-4" className={b('action-block')}>
                                         {currentStory.firstAction && (
                                             <Button
                                                 size="l"
diff --git a/src/components/StoriesGroup/README.md b/src/components/StoriesGroup/README.md
index 33cffd33..e419bff9 100644
--- a/src/components/StoriesGroup/README.md
+++ b/src/components/StoriesGroup/README.md
@@ -4,6 +4,8 @@ Component for displaying group of stories. It looks like a carousel in a modal w
 
 ## Properties
 
+`onClose(event?, reason?)` uses UIKit 8 reasons: `escape-key`, `outside-press`, or `click` for the close button. Assistive-technology dismissal may omit the event or reason.
+
 | Property            | Type                                      | Required | Default | Description                                                |
 | :------------------ | :---------------------------------------- | :------- | :------ | :--------------------------------------------------------- |
 | open                | `Boolean`                                 | ✓        |         | Visibility flag                                            |
diff --git a/src/components/StoriesGroup/StoriesGroup.tsx b/src/components/StoriesGroup/StoriesGroup.tsx
index 5650f825..ebcafcbb 100644
--- a/src/components/StoriesGroup/StoriesGroup.tsx
+++ b/src/components/StoriesGroup/StoriesGroup.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import {Modal} from '@gravity-ui/uikit';
-import type {ModalCloseReason} from '@gravity-ui/uikit';
+import type {OpenChangeReason} from '@gravity-ui/uikit';
 
 import {IndexType, StoriesLayout} from '../Stories/components/StoriesLayout/StoriesLayout';
 import {block} from '../utils/cn';
@@ -22,8 +22,8 @@ export interface StoriesGroupProps {
     disableOutsideClick?: boolean;
     maxSliderItemsCount?: number;
     onClose?: (
-        event: MouseEvent | KeyboardEvent | React.MouseEvent<HTMLElement, MouseEvent>,
-        reason: ModalCloseReason | 'closeButtonClick',
+        event?: Event | React.MouseEvent<HTMLElement, MouseEvent>,
+        reason?: OpenChangeReason,
     ) => void;
     onItemSelect?: (
         itemIndexes: [groupIndex: number, itemIndex: number],
@@ -54,7 +54,7 @@ export const StoriesGroup = ({
         (event: MouseEvent | KeyboardEvent | React.MouseEvent<HTMLElement, MouseEvent>) => void
     >(
         (event) => {
-            handleClose(event, 'closeButtonClick');
+            handleClose(event, 'click');
         },
         [handleClose],
     );
@@ -153,7 +153,9 @@ export const StoriesGroup = ({
     return (
         <Modal
             open={open}
-            onClose={handleClose}
+            onOpenChange={(nextOpen, event, reason) => {
+                if (!nextOpen) handleClose(event, reason);
+            }}
             disableOutsideClick={disableOutsideClick}
             className={b()}
             contentClassName={b('modal-content')}
diff --git a/src/components/StoriesGroup/components/StoriesPreview/StoriesPreview.tsx b/src/components/StoriesGroup/components/StoriesPreview/StoriesPreview.tsx
index 6b110fbe..afb53354 100644
--- a/src/components/StoriesGroup/components/StoriesPreview/StoriesPreview.tsx
+++ b/src/components/StoriesGroup/components/StoriesPreview/StoriesPreview.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import {ChevronLeft, ChevronRight} from '@gravity-ui/icons';
 import {Button, Icon} from '@gravity-ui/uikit';
-import type {ButtonButtonProps, ModalCloseReason} from '@gravity-ui/uikit';
+import type {ButtonButtonProps, OpenChangeReason} from '@gravity-ui/uikit';
 
 import {MediaRenderer} from '../../../Stories/components';
 import type {StoriesItemMedia} from '../../../Stories/types';
@@ -172,8 +172,8 @@ export type StoriesPreviewProps = {
     onGroupSelect: (groupIndex: number) => void;
     maxSliderItemsCount: number;
     onClose?: (
-        event: MouseEvent | KeyboardEvent | React.MouseEvent<HTMLElement, MouseEvent>,
-        reason: ModalCloseReason,
+        event?: Event | React.MouseEvent<HTMLElement, MouseEvent>,
+        reason?: OpenChangeReason,
     ) => void;
 };
 
@@ -188,7 +188,7 @@ export const StoriesPreview = ({
 }: StoriesPreviewProps) => {
     const handleClose = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(
         (event) => {
-            onClose?.(event, 'outsideClick');
+            onClose?.(event, 'outside-press');
         },
         [onClose],
     );
diff --git a/src/components/TokenizedInput/TokenizedInput.scss b/src/components/TokenizedInput/TokenizedInput.scss
index 7e0e8dfa..96591163 100644
--- a/src/components/TokenizedInput/TokenizedInput.scss
+++ b/src/components/TokenizedInput/TokenizedInput.scss
@@ -300,6 +300,12 @@
     }
 
     &__suggestions-list {
+        overflow: auto;
+
+        --g-list-item-view-padding-inline: 0;
+        --g-list-item-view-padding-block: 0;
+        --g-list-item-view-min-height: 0;
+        --g-list-item-view-border-radius: 0;
         &-wrapper {
             --gc-tokenized-input-suggestion-loading-height: 20px;
             --gc-tokenized-input-suggestion-padding-block: 2px;
@@ -346,22 +352,6 @@
                 font-size: var(--g-text-body-2-font-size);
                 line-height: var(--g-text-body-2-line-height);
             }
-
-            &_size_l,
-            &_size_xl {
-                &.gc-tokenized-input__suggestions-list-wrapper_empty {
-                    .g-list__empty-placeholder {
-                        min-height: 0;
-                        padding: 0;
-                    }
-                }
-
-                &.gc-tokenized-input__suggestions-list-wrapper_loading {
-                    .g-list__item {
-                        height: var(--gc-tokenized-input-suggestion-loading-height);
-                    }
-                }
-            }
         }
 
         &-item {
diff --git a/src/components/TokenizedInput/__stories__/DebounceShowcaseTemplate.tsx b/src/components/TokenizedInput/__stories__/DebounceShowcaseTemplate.tsx
index b4498f60..5f98cc5e 100644
--- a/src/components/TokenizedInput/__stories__/DebounceShowcaseTemplate.tsx
+++ b/src/components/TokenizedInput/__stories__/DebounceShowcaseTemplate.tsx
@@ -9,7 +9,7 @@ type TokenValue = {key: string; operator: string; value: string};
 
 export const DebounceShowcaseTemplate: StoryFn<TokenizedComponentType<TokenValue>> = (args) => {
     return (
-        <Flex direction="column" gap={4}>
+        <Flex direction="column" gap="spacing-4">
             <Text variant="subheader-1">
                 Strategy &apos;focus-field&apos;, 500ms debounce, synchronous suggestions
             </Text>
diff --git a/src/components/TokenizedInput/__stories__/MultipleInputTemplate.tsx b/src/components/TokenizedInput/__stories__/MultipleInputTemplate.tsx
index 4d07f836..d0852289 100644
--- a/src/components/TokenizedInput/__stories__/MultipleInputTemplate.tsx
+++ b/src/components/TokenizedInput/__stories__/MultipleInputTemplate.tsx
@@ -9,7 +9,7 @@ type TokenValue = {key: string; operator: string; value: string};
 
 export const MultipleInputTemplate: StoryFn<TokenizedComponentType<TokenValue>> = (args) => {
     return (
-        <Flex direction="column" gap={4}>
+        <Flex direction="column" gap="spacing-4">
             <AsyncSuggestsTokenizedInput
                 {...args}
                 placeholder="Enter value A"
diff --git a/src/components/TokenizedInput/components/Suggestions/SuggestionsList.tsx b/src/components/TokenizedInput/components/Suggestions/SuggestionsList.tsx
index 276659f7..a72dc3c4 100644
--- a/src/components/TokenizedInput/components/Suggestions/SuggestionsList.tsx
+++ b/src/components/TokenizedInput/components/Suggestions/SuggestionsList.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import {List} from '@gravity-ui/uikit';
+import {List, Loader} from '@gravity-ui/uikit';
 
 import {b} from '../../constants';
 import i18n from '../../i18n';
@@ -58,16 +58,28 @@ export function SuggestionsList({
                 size,
             })}
         >
-            <List
-                items={items}
-                renderItem={(s) => <div className={b('suggestions-list-item')}>{s.label}</div>}
-                activeItemIndex={selected}
-                filterable={false}
-                loading={isLoading}
-                emptyPlaceholder={EmptyPlaceholder}
-                onItemClick={onApplySuggestion}
-                virtualized={false}
-            />
+            {items.length > 0 && (
+                <List
+                    aria-label={i18n('suggestions.title')}
+                    className={b('suggestions-list')}
+                    items={items.map((item, index) => ({id: String(index), item}))}
+                    getItemContent={({item}) => item.label}
+                    getItemTextValue={({item}) => item.search}
+                    activeItemId={selected < 0 ? null : String(selected)}
+                    activateOnHover={false}
+                    onItemAction={(_id, {item}) => onApplySuggestion(item)}
+                    renderItem={(ctx, helpers) => (
+                        <List.ItemView
+                            {...helpers.getItemProps()}
+                            {...helpers.getItemViewProps()}
+                            className={b('suggestions-list-item')}
+                        >
+                            {ctx.content}
+                        </List.ItemView>
+                    )}
+                />
+            )}
+            {isLoading ? <Loader size="s" /> : isEmpty && EmptyPlaceholder}
         </div>
     );
 }
diff --git a/src/components/TokenizedInput/components/Suggestions/__tests__/SuggestionsList.test.tsx b/src/components/TokenizedInput/components/Suggestions/__tests__/SuggestionsList.test.tsx
new file mode 100644
index 00000000..8ecb1104
--- /dev/null
+++ b/src/components/TokenizedInput/components/Suggestions/__tests__/SuggestionsList.test.tsx
@@ -0,0 +1,42 @@
+import userEvent from '@testing-library/user-event';
+
+import {render, screen} from '../../../../../../test-utils/utils';
+import {SuggestionsList} from '../SuggestionsList';
+
+const suggestions = {
+    items: [
+        {label: 'First', search: 'duplicate', value: {name: 'first'}},
+        {label: 'Second', search: 'duplicate', value: {name: 'second'}},
+    ],
+};
+
+test('Applies the clicked suggestion even when search strings repeat', async () => {
+    const onApplySuggestion = jest.fn();
+    render(
+        <SuggestionsList
+            selected={1}
+            isLoading={false}
+            suggestions={suggestions}
+            onApplySuggestion={onApplySuggestion}
+        />,
+    );
+    expect(screen.getByRole('option', {name: 'Second'})).toHaveAttribute('data-active');
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('option', {name: 'First'}));
+    expect(onApplySuggestion).toHaveBeenCalledWith(suggestions.items[0]);
+});
+
+test('Shows the empty message only when loading is finished', () => {
+    const props = {
+        selected: -1,
+        suggestions: {
+            items: [],
+            currentWord: {value: 'pear', offset: 0, position: {start: 0, end: 4}},
+        },
+        onApplySuggestion: jest.fn(),
+    };
+    const {rerender} = render(<SuggestionsList {...props} isLoading />);
+    expect(screen.queryByText(/No matches/)).not.toBeInTheDocument();
+    rerender(<SuggestionsList {...props} isLoading={false} />);
+    expect(screen.getByText('No matches for the search string «pear»')).toBeInTheDocument();
+});
diff --git a/src/components/TokenizedInput/components/Suggestions/hooks/__tests__/useSuggestions.test.tsx b/src/components/TokenizedInput/components/Suggestions/hooks/__tests__/useSuggestions.test.tsx
index 38372028..eab2423a 100644
--- a/src/components/TokenizedInput/components/Suggestions/hooks/__tests__/useSuggestions.test.tsx
+++ b/src/components/TokenizedInput/components/Suggestions/hooks/__tests__/useSuggestions.test.tsx
@@ -71,6 +71,36 @@ describe('useSuggestions', () => {
 
     afterEach(() => {
         jest.useRealTimers();
+        mockOptionsInfo.debounceDelay = 0;
+        mockOptionsInfo.suggestionsInitialCall.value.current = true;
+    });
+
+    it('debounces requests and fetches only the latest input', async () => {
+        mockOptionsInfo.debounceDelay = 300;
+        mockOptionsInfo.suggestionsInitialCall.value.current = false;
+        mockOnSuggest.mockResolvedValue({items: [], options: {isFilterable: false}});
+        const {rerender} = renderHook(
+            ({value}) =>
+                useSuggestions({
+                    idx: 0,
+                    fieldKey: 'key',
+                    value,
+                    offset: value.length,
+                    inputElement: null,
+                }),
+            {wrapper, initialProps: {value: 'a'}},
+        );
+
+        act(() => jest.advanceTimersByTime(200));
+        rerender({value: 'ab'});
+        act(() => jest.advanceTimersByTime(299));
+        expect(mockOnSuggest).not.toHaveBeenCalled();
+
+        await act(async () => {
+            jest.advanceTimersByTime(1);
+        });
+        expect(mockOnSuggest).toHaveBeenCalledTimes(1);
+        expect(mockOnSuggest).toHaveBeenCalledWith(expect.objectContaining({value: 'ab'}));
     });
 
     it('should fetch suggestions and update state', async () => {
diff --git a/src/components/TokenizedInput/components/Suggestions/hooks/useSuggestions.ts b/src/components/TokenizedInput/components/Suggestions/hooks/useSuggestions.ts
index 65475f16..47b2a6a8 100644
--- a/src/components/TokenizedInput/components/Suggestions/hooks/useSuggestions.ts
+++ b/src/components/TokenizedInput/components/Suggestions/hooks/useSuggestions.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import {getUniqId} from '@gravity-ui/uikit';
-import debounce from 'lodash/debounce';
+import {debounce} from 'es-toolkit';
 
 import {useFocusContext, useInputContext, useOptionsContext} from '../../../context';
 import type {
diff --git a/src/components/TokenizedInput/hooks/useTokenizedInputInfo.ts b/src/components/TokenizedInput/hooks/useTokenizedInputInfo.ts
index 95fe2d85..6584f964 100644
--- a/src/components/TokenizedInput/hooks/useTokenizedInputInfo.ts
+++ b/src/components/TokenizedInput/hooks/useTokenizedInputInfo.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import {getUniqId} from '@gravity-ui/uikit';
-import isEqual from 'lodash/isEqual';
+import {isEqual} from 'es-toolkit';
 
 import type {Token, TokenValueBase, TokenizedInputData, TokenizedInputInfo} from '../types';
 import {UndoRedoManager} from '../undoredo-manager';
diff --git a/src/components/TokenizedInput/i18n/en.json b/src/components/TokenizedInput/i18n/en.json
index 3472171e..b3179742 100644
--- a/src/components/TokenizedInput/i18n/en.json
+++ b/src/components/TokenizedInput/i18n/en.json
@@ -2,5 +2,6 @@
   "suggestions.items_not_found": "No matches for the search string «{{text}}»",
   "clear_input": "Clear input",
   "remove_token": "Remove token {{index}}",
-  "field_aria_label": "Field {{key}} in token {{index}}"
+  "field_aria_label": "Field {{key}} in token {{index}}",
+  "suggestions.title": "Suggestions"
 }
diff --git a/src/components/TokenizedInput/i18n/ru.json b/src/components/TokenizedInput/i18n/ru.json
index fdc8b880..b10efbd4 100644
--- a/src/components/TokenizedInput/i18n/ru.json
+++ b/src/components/TokenizedInput/i18n/ru.json
@@ -2,5 +2,6 @@
   "suggestions.items_not_found": "По запросу «{{text}}» ничего не найдено",
   "clear_input": "Очистить поле",
   "remove_token": "Удалить токен {{index}}",
-  "field_aria_label": "Поле {{key}} в токене {{index}}"
+  "field_aria_label": "Поле {{key}} в токене {{index}}",
+  "suggestions.title": "Подсказки"
 }
diff --git a/src/components/TokenizedInput/undoredo-manager.ts b/src/components/TokenizedInput/undoredo-manager.ts
index 4cfceab7..4efb3a83 100644
--- a/src/components/TokenizedInput/undoredo-manager.ts
+++ b/src/components/TokenizedInput/undoredo-manager.ts
@@ -1,4 +1,4 @@
-import isEqual from 'lodash/isEqual';
+import {isEqual} from 'es-toolkit';
 
 const cloneValue = <T>(value: T) => {
     if (typeof structuredClone === 'function') {
diff --git a/test-utils/utils.tsx b/test-utils/utils.tsx
index ba62502a..b08c1618 100644
--- a/test-utils/utils.tsx
+++ b/test-utils/utils.tsx
@@ -1,18 +1,11 @@
 import * as React from 'react';
 
-import {ThemeContext} from '@gravity-ui/uikit';
-import type {ThemeContextProps} from '@gravity-ui/uikit';
+import {Provider} from '@gravity-ui/uikit';
 import {render} from '@testing-library/react';
 import type {RenderOptions} from '@testing-library/react';
 
-const themeContextValue: ThemeContextProps = {
-    direction: 'ltr',
-    theme: 'light',
-    themeValue: 'light',
-};
-
 function Providers({children}: {children: React.ReactNode}) {
-    return <ThemeContext.Provider value={themeContextValue}>{children}</ThemeContext.Provider>;
+    return <Provider theme="light">{children}</Provider>;
 }
 
 function createWrapper(Component: React.JSXElementConstructor<{children: React.ReactNode}>) {

From 58b2f677fbc94e4c5c73ad17a4eb7d7718d29803 Mon Sep 17 00:00:00 2001
From: Evgenii Alaev <alaev89@yandex-team.ru>
Date: Tue, 13 Oct 2026 18:11:42 +0300
Subject: [PATCH 2/9] fix(ItemSelector): hide row actions after the pointer
 leaves the list

List v8 keeps the last hovered row active after the pointer leaves, so
the "Select" and remove buttons stuck on it. Pass `active` to
renderItem only for the keyboard cursor and show the buttons on hover
via CSS; on devices without hover they are always visible.
---
 src/components/ItemSelector/ItemSelector.scss | 30 +++++++------------
 src/components/ItemSelector/ItemSelector.tsx  | 14 +++++----
 src/components/ItemSelector/README.md         |  2 +-
 .../__tests__/ItemSelector.test.tsx           | 23 ++++++++++++++
 4 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/src/components/ItemSelector/ItemSelector.scss b/src/components/ItemSelector/ItemSelector.scss
index 48f7746c..fd40aab8 100644
--- a/src/components/ItemSelector/ItemSelector.scss
+++ b/src/components/ItemSelector/ItemSelector.scss
@@ -51,21 +51,21 @@ $block: '.#{variables.$ns}item-selector';
         min-width: 0;
     }
 
+    // Without hover (touch) the actions are always visible
+    @media (hover: hover) {
+        &__list-item:not(:hover) {
+            #{$block}__item:not(#{$block}__item_active) #{$block}__item-select,
+            #{$block}__value-item:not(#{$block}__value-item_active) #{$block}__value-item-remove {
+                display: none;
+            }
+        }
+    }
+
     &__item {
         display: flex;
         align-items: center;
         width: 100%;
         height: 100%;
-
-        &_active {
-            #{$block}__item-select {
-                display: block;
-            }
-        }
-    }
-
-    &__item-select {
-        display: none;
     }
 
     &__item-text {
@@ -81,12 +81,6 @@ $block: '.#{variables.$ns}item-selector';
         align-items: center;
         width: 100%;
         overflow: hidden;
-
-        &_active {
-            #{$block}__value-item-remove {
-                display: block;
-            }
-        }
     }
 
     &__value-item-text {
@@ -96,8 +90,4 @@ $block: '.#{variables.$ns}item-selector';
         white-space: nowrap;
         min-width: 0;
     }
-
-    &__value-item-remove {
-        display: none;
-    }
 }
diff --git a/src/components/ItemSelector/ItemSelector.tsx b/src/components/ItemSelector/ItemSelector.tsx
index 495b531c..49f26d76 100644
--- a/src/components/ItemSelector/ItemSelector.tsx
+++ b/src/components/ItemSelector/ItemSelector.tsx
@@ -66,10 +66,12 @@ function ItemSelectorList<T>({
             getItemId={getItemId}
             getItemTextValue={getItemId}
             className={b('items')}
-            renderItem={(ctx, helpers) =>
-                onItemsUpdate ? (
+            renderItem={(ctx, helpers) => {
+                // In List v8 `active` stays on the last hovered row; hover is handled by CSS
+                const active = ctx.state.active && Boolean(ctx.state.cursorVisible);
+                return onItemsUpdate ? (
                     <ListHelloPangeaDnd.Row ctx={ctx} helpers={helpers} className={b('list-item')}>
-                        {renderItem(ctx.item, ctx.state.active, ctx.index)}
+                        {renderItem(ctx.item, active, ctx.index)}
                     </ListHelloPangeaDnd.Row>
                 ) : (
                     <List.ItemView
@@ -78,11 +80,11 @@ function ItemSelectorList<T>({
                         className={b('list-item')}
                     >
                         <div {...helpers.getCellProps()}>
-                            {renderItem(ctx.item, ctx.state.active, ctx.index)}
+                            {renderItem(ctx.item, active, ctx.index)}
                         </div>
                     </List.ItemView>
-                )
-            }
+                );
+            }}
         />
     );
 
diff --git a/src/components/ItemSelector/README.md b/src/components/ItemSelector/README.md
index e6df1313..bb0d1468 100644
--- a/src/components/ItemSelector/README.md
+++ b/src/components/ItemSelector/README.md
@@ -21,7 +21,7 @@ A component that allows you to form a subset of a list (e.g., a subset of column
 The item can be a string or an any object (but must be `truly`).
 
 The `getItemId` must be specified if the items in the main list are objects and not strings. IDs must be unique and stable.
-The `renderItem(item, active, index)` and `filterItem(query)(item)` callbacks still render row content and filter items; they do not use the new UIKit List callback signatures. `renderValueItem` uses the same signature as `renderItem` for selected rows.
+The `renderItem(item, active, index)` and `filterItem(query)(item)` callbacks still render row content and filter items; they do not use the new UIKit List callback signatures. `renderValueItem` uses the same signature as `renderItem` for selected rows. `active` is `true` only for the row under the keyboard cursor; hover is not reported, style it with CSS `:hover`.
 Selected items can be reordered with the pointer or keyboard (focus a drag handle, press Space, use arrow keys, then press Space again). Sorting is disabled while the selected-items search is active.
 
 ```jsx
diff --git a/src/components/ItemSelector/__tests__/ItemSelector.test.tsx b/src/components/ItemSelector/__tests__/ItemSelector.test.tsx
index adb1c539..2056be00 100644
--- a/src/components/ItemSelector/__tests__/ItemSelector.test.tsx
+++ b/src/components/ItemSelector/__tests__/ItemSelector.test.tsx
@@ -63,3 +63,26 @@ test('Filtering selected items disables dragging without changing the selection'
     ).not.toBeInTheDocument();
     expect(onUpdate).not.toHaveBeenCalled();
 });
+
+test('Passes `active` to renderItem for the keyboard cursor only', async () => {
+    const renderItem = (item: string, active: boolean) => (active ? `${item}: active` : item);
+    render(
+        <ItemSelector
+            selectorTitle="Available"
+            items={['apple', 'pear']}
+            value={[]}
+            getItemId={(item) => item}
+            renderItem={renderItem}
+            onUpdate={jest.fn()}
+        />,
+    );
+    const user = userEvent.setup();
+
+    await user.hover(screen.getByText('apple'));
+    await user.unhover(screen.getByText('apple'));
+    expect(screen.getByText('apple')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('combobox', {name: 'Available: Search'}));
+    await user.keyboard('{ArrowDown}');
+    expect(screen.getByText(/: active$/)).toBeInTheDocument();
+});

From a898132813a36e7f5b3c1a34fcbbf28260ced6cc Mon Sep 17 00:00:00 2001
From: Evgenii Alaev <alaev89@yandex-team.ru>
Date: Tue, 13 Oct 2026 19:03:41 +0300
Subject: [PATCH 3/9] docs(ItemSelector): update the story value synchronously

`useArgs` applies updates asynchronously, so after a drop the List
rendered the old order for a frame before the new value arrived.
---
 .../__stories__/ItemSelector.stories.tsx      | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/ItemSelector/__stories__/ItemSelector.stories.tsx b/src/components/ItemSelector/__stories__/ItemSelector.stories.tsx
index 76544ba5..7a8a6a36 100644
--- a/src/components/ItemSelector/__stories__/ItemSelector.stories.tsx
+++ b/src/components/ItemSelector/__stories__/ItemSelector.stories.tsx
@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 import {useArgs} from '@storybook/preview-api';
 import {Meta, StoryFn} from '@storybook/react';
 
@@ -57,14 +59,27 @@ export default {
     },
 } as Meta;
 
-const DefaultTemplate: StoryFn<ItemSelectorProps<{name: string; type: string}>> = (args) => {
-    const [, setStoryArgs] = useArgs();
+type Item = {name: string; type: string};
+
+// `useArgs` updates asynchronously, and the List needs the new order in the drop render
+function ItemSelectorWithState({onUpdate, ...props}: Omit<ItemSelectorProps<Item>, 'getItemId'>) {
+    const [value, setValue] = React.useState(props.value);
+    React.useEffect(() => setValue(props.value), [props.value]);
     return (
         <ItemSelector
-            {...args}
-            onUpdate={(value) => setStoryArgs({value})}
+            {...props}
+            value={value}
+            onUpdate={(nextValue) => {
+                setValue(nextValue);
+                onUpdate(nextValue);
+            }}
             getItemId={(item) => item.name}
         />
     );
+}
+
+const DefaultTemplate: StoryFn<ItemSelectorProps<Item>> = (args) => {
+    const [, setStoryArgs] = useArgs();
+    return <ItemSelectorWithState {...args} onUpdate={(value) => setStoryArgs({value})} />;
 };
 export const Default = DefaultTemplate.bind({});

From b6fbfd84918928441be798d9c8572fadd1eeca95 Mon Sep 17 00:00:00 2001
From: Andrey Morozov <amje@yandex-team.ru>
Date: Tue, 13 Oct 2026 19:20:47 +0300
Subject: [PATCH 4/9] chore: use single HOC in storybook

---
 .storybook/decorators/withLang.tsx     | 20 ----------------
 .storybook/decorators/withProvider.tsx | 32 ++++++++++++++++++++++++++
 .storybook/decorators/withTheme.tsx    | 16 -------------
 .storybook/preview.tsx                 |  5 ++--
 4 files changed, 34 insertions(+), 39 deletions(-)
 delete mode 100644 .storybook/decorators/withLang.tsx
 create mode 100644 .storybook/decorators/withProvider.tsx
 delete mode 100644 .storybook/decorators/withTheme.tsx

diff --git a/.storybook/decorators/withLang.tsx b/.storybook/decorators/withLang.tsx
deleted file mode 100644
index aa306c8f..00000000
--- a/.storybook/decorators/withLang.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react';
-
-import {settings} from '@gravity-ui/date-utils';
-import {configure} from '@gravity-ui/uikit';
-import type {Decorator} from '@storybook/react';
-
-export const withLang: Decorator = (Story, context) => {
-    const lang = context.globals.lang;
-    configure({lang});
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React.useEffect(() => {
-        (async () => {
-            await settings.loadLocale(lang);
-            settings.setLocale(lang);
-        })();
-    }, [lang]);
-
-    return <Story key={lang} {...context} />;
-};
diff --git a/.storybook/decorators/withProvider.tsx b/.storybook/decorators/withProvider.tsx
new file mode 100644
index 00000000..aa12a0f2
--- /dev/null
+++ b/.storybook/decorators/withProvider.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+import {settings} from '@gravity-ui/date-utils';
+import {Provider, configure} from '@gravity-ui/uikit';
+import type {Decorator} from '@storybook/react';
+
+export const withProvider: Decorator = (Story, context) => {
+    const lang = context.globals.lang;
+
+    configure({lang});
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+        (async () => {
+            await settings.loadLocale(lang);
+            settings.setLocale(lang);
+        })();
+    }, [lang]);
+
+    return (
+        <Provider
+            key={lang}
+            lang={lang}
+            theme={context.globals.theme}
+            direction={context.globals.direction}
+            mobile={context.globals.platform === 'mobile'}
+            platform={context.globals.platform}
+        >
+            <Story key={context.globals.platform} {...context} />
+        </Provider>
+    );
+};
diff --git a/.storybook/decorators/withTheme.tsx b/.storybook/decorators/withTheme.tsx
deleted file mode 100644
index 64d1979d..00000000
--- a/.storybook/decorators/withTheme.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import {Provider} from '@gravity-ui/uikit';
-import type {Decorator} from '@storybook/react';
-
-export const withTheme: Decorator = (Story, context) => {
-    return (
-        <Provider
-            theme={context.globals.theme}
-            direction={context.globals.direction}
-            lang={context.globals.lang}
-            mobile={context.globals.platform === 'mobile'}
-            platform={context.globals.platform}
-        >
-            <Story key={context.globals.platform} {...context} />
-        </Provider>
-    );
-};
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 2475f6b7..da5e5b93 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -6,12 +6,11 @@ import '@gravity-ui/uikit/styles/styles.css';
 import {MINIMAL_VIEWPORTS} from '@storybook/addon-viewport';
 import type {Preview} from '@storybook/react';
 
-import {withLang} from './decorators/withLang';
+import {withProvider} from './decorators/withProvider';
 import {withStrictMode} from './decorators/withStrictMode';
-import {withTheme} from './decorators/withTheme';
 
 const preview: Preview = {
-    decorators: [withLang, withTheme, withStrictMode],
+    decorators: [withProvider, withStrictMode],
     parameters: {
         jsx: {showFunctions: true},
         viewport: {

From 9a7038f50d6971a5600fea4b3606bd9a05b637a2 Mon Sep 17 00:00:00 2001
From: Andrey Morozov <amje@yandex-team.ru>
Date: Tue, 13 Oct 2026 19:36:29 +0300
Subject: [PATCH 5/9] test: remove unrelated test

---
 .../__tests__/ItemSelector.test.tsx           | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/src/components/ItemSelector/__tests__/ItemSelector.test.tsx b/src/components/ItemSelector/__tests__/ItemSelector.test.tsx
index 2056be00..318a2fce 100644
--- a/src/components/ItemSelector/__tests__/ItemSelector.test.tsx
+++ b/src/components/ItemSelector/__tests__/ItemSelector.test.tsx
@@ -8,25 +8,6 @@ jest.mock('@gravity-ui/uikit/virtualizer', () => ({
     ListVirtualizer: ({children}: {children: React.ReactNode}) => children,
 }));
 
-test('Filters items and selects the first match from the search input', async () => {
-    const onUpdate = jest.fn();
-    render(
-        <ItemSelector
-            selectorTitle="Available"
-            items={['apple', 'pear']}
-            value={[]}
-            getItemId={(item) => item}
-            onUpdate={onUpdate}
-        />,
-    );
-    const user = userEvent.setup();
-    await user.type(screen.getByRole('combobox', {name: 'Available: Search'}), 'pear');
-    expect(screen.queryByText('apple')).not.toBeInTheDocument();
-    await user.keyboard('{Enter}');
-    expect(onUpdate).toHaveBeenCalledTimes(1);
-    expect(onUpdate).toHaveBeenCalledWith(['pear']);
-});
-
 test('Removing an item preserves the other selected items', async () => {
     const onUpdate = jest.fn();
     render(

From 2a96c87f961b033e89b8376e0bdaf49bee2d004d Mon Sep 17 00:00:00 2001
From: Andrey Morozov <amje@yandex-team.ru>
Date: Tue, 13 Oct 2026 20:05:10 +0300
Subject: [PATCH 6/9] fix: minor issues fixes

---
 src/components/PromoSheet/PromoSheet.tsx      | 10 ++++---
 src/components/PromoSheet/README.md           | 30 +++++++++----------
 .../SharePopover/ShareList/ShareList.tsx      | 13 --------
 src/components/SharePopover/SharePopover.scss |  3 +-
 4 files changed, 22 insertions(+), 34 deletions(-)

diff --git a/src/components/PromoSheet/PromoSheet.tsx b/src/components/PromoSheet/PromoSheet.tsx
index e3c275ab..a4650ab5 100644
--- a/src/components/PromoSheet/PromoSheet.tsx
+++ b/src/components/PromoSheet/PromoSheet.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import {Xmark} from '@gravity-ui/icons';
 import {Button, Icon, Sheet} from '@gravity-ui/uikit';
-import type {ButtonProps, SheetProps} from '@gravity-ui/uikit';
+import type {ButtonProps} from '@gravity-ui/uikit';
 
 import {block} from '../utils/cn';
 
@@ -23,7 +23,7 @@ export type PromoSheetProps = {
     imageContainerClassName?: string;
     imageClassName?: string;
     onActionClick?: ButtonProps['onClick'];
-    onClose?: SheetProps['onTransitionOutComplete'];
+    onClose?: () => void;
 };
 
 type ImageSizes = {
@@ -96,8 +96,10 @@ export function PromoSheet({
             contentClassName={cn('content', contentClassName)}
             open={visible && loaded}
             hideTopBar
-            onOpenChange={setVisible}
-            onTransitionOutComplete={onClose}
+            onOpenChange={(nextOpen) => {
+                setVisible(nextOpen);
+                if (!nextOpen) onClose?.();
+            }}
         >
             <header className={cn('header')}>
                 <h2 className={cn('title')}>{title}</h2>
diff --git a/src/components/PromoSheet/README.md b/src/components/PromoSheet/README.md
index 4b55abc1..4c7ef5a7 100644
--- a/src/components/PromoSheet/README.md
+++ b/src/components/PromoSheet/README.md
@@ -4,21 +4,21 @@ A component for displaying a promo dialog informing the user about a new feature
 
 ## Properties
 
-| Name                      | Type                                    | Default | Description                                   |
-| :------------------------ | :-------------------------------------- | :------ | :-------------------------------------------- |
-| `title`                   | `string`                                | —       | Sheet title                                   |
-| `message`                 | `string`                                | —       | Promo text                                    |
-| `actionText`              | `string`                                | —       | Text of the primary action button             |
-| `closeText`               | `string`                                | —       | Text of the close button                      |
-| `actionHref`              | `string`                                |         | Link opened by the primary action button      |
-| `imageSrc`                | `string`                                |         | Promo image URL                               |
-| `imageAlt`                | `string`                                | `''`    | Promo image `alt` text                        |
-| `onActionClick`           | `ButtonProps['onClick']`                |         | Primary action click handler                  |
-| `onClose`                 | `SheetProps['onTransitionOutComplete']` |         | Called when the sheet is closed               |
-| `className`               | `string`                                |         | HTML `class` attribute of the sheet           |
-| `contentClassName`        | `string`                                |         | HTML `class` attribute of the content block   |
-| `imageContainerClassName` | `string`                                |         | HTML `class` attribute of the image container |
-| `imageClassName`          | `string`                                |         | HTML `class` attribute of the image           |
+| Name                      | Type                     | Default | Description                                   |
+| :------------------------ | :----------------------- | :------ | :-------------------------------------------- |
+| `title`                   | `string`                 | —       | Sheet title                                   |
+| `message`                 | `string`                 | —       | Promo text                                    |
+| `actionText`              | `string`                 | —       | Text of the primary action button             |
+| `closeText`               | `string`                 | —       | Text of the close button                      |
+| `actionHref`              | `string`                 |         | Link opened by the primary action button      |
+| `imageSrc`                | `string`                 |         | Promo image URL                               |
+| `imageAlt`                | `string`                 | `''`    | Promo image `alt` text                        |
+| `onActionClick`           | `ButtonProps['onClick']` |         | Primary action click handler                  |
+| `onClose`                 | `() => {}`               |         | Called when the sheet is closed               |
+| `className`               | `string`                 |         | HTML `class` attribute of the sheet           |
+| `contentClassName`        | `string`                 |         | HTML `class` attribute of the content block   |
+| `imageContainerClassName` | `string`                 |         | HTML `class` attribute of the image container |
+| `imageClassName`          | `string`                 |         | HTML `class` attribute of the image           |
 
 ## Usage
 
diff --git a/src/components/SharePopover/ShareList/ShareList.tsx b/src/components/SharePopover/ShareList/ShareList.tsx
index 97e79aaa..f52a4179 100644
--- a/src/components/SharePopover/ShareList/ShareList.tsx
+++ b/src/components/SharePopover/ShareList/ShareList.tsx
@@ -65,14 +65,6 @@ export class ShareList extends React.PureComponent<ShareListInnerProps, ShareLis
         copied: false,
     };
 
-    private copyLink: HTMLButtonElement | null = null;
-
-    componentDidMount() {
-        if (this.props.withCopyLink && this.copyLink) {
-            this.copyLink.style.width = `${this.copyLink.scrollWidth}px`;
-        }
-    }
-
     render() {
         const {shareOptions, withCopyLink, className, direction, children} = this.props;
         const hasShareOptions = Array.isArray(shareOptions) && shareOptions.length > 0;
@@ -130,7 +122,6 @@ export class ShareList extends React.PureComponent<ShareListInnerProps, ShareLis
                     <CopyToClipboard text={this.props.url} timeout={1500}>
                         {(status) => (
                             <Button
-                                ref={this.copyLinkRef}
                                 view="flat-secondary"
                                 size="l"
                                 disabled={status === 'success'}
@@ -145,8 +136,4 @@ export class ShareList extends React.PureComponent<ShareListInnerProps, ShareLis
             </div>
         );
     }
-
-    private copyLinkRef = (element: unknown) => {
-        this.copyLink = element as HTMLButtonElement;
-    };
 }
diff --git a/src/components/SharePopover/SharePopover.scss b/src/components/SharePopover/SharePopover.scss
index af3b0ac6..ab699049 100644
--- a/src/components/SharePopover/SharePopover.scss
+++ b/src/components/SharePopover/SharePopover.scss
@@ -6,8 +6,7 @@ $block: '.#{variables.$ns}share-popover';
 #{$block} {
     position: relative;
 
-    &__tooltip .g-popup__content {
-        max-width: none;
+    &__tooltip {
         padding: 8px;
     }
 

From 24879d9065e894a472761325a98eefdb6ef53148 Mon Sep 17 00:00:00 2001
From: Andrey Morozov <amje@yandex-team.ru>
Date: Wed, 14 Oct 2026 13:45:54 +0300
Subject: [PATCH 7/9] fix: fix PromoSheet tests

---
 src/components/PromoSheet/PromoSheet.tsx      |  6 ++-
 .../PromoSheet/__tests__/PromoSheet.test.tsx  | 41 +++++++++++--------
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/components/PromoSheet/PromoSheet.tsx b/src/components/PromoSheet/PromoSheet.tsx
index a4650ab5..cc5e28bb 100644
--- a/src/components/PromoSheet/PromoSheet.tsx
+++ b/src/components/PromoSheet/PromoSheet.tsx
@@ -54,13 +54,15 @@ export function PromoSheet({
         (event: any) => {
             setVisible(false);
             onActionClick?.(event);
+            onClose?.();
         },
-        [onActionClick],
+        [onActionClick, onClose],
     );
 
     const handleCloseClick = React.useCallback<NonNullable<PromoSheetProps['onClose']>>(() => {
         setVisible(false);
-    }, []);
+        onClose?.();
+    }, [onClose]);
 
     React.useEffect(() => {
         if (!imageSrc) {
diff --git a/src/components/PromoSheet/__tests__/PromoSheet.test.tsx b/src/components/PromoSheet/__tests__/PromoSheet.test.tsx
index c5345e08..c0b16a59 100644
--- a/src/components/PromoSheet/__tests__/PromoSheet.test.tsx
+++ b/src/components/PromoSheet/__tests__/PromoSheet.test.tsx
@@ -80,19 +80,28 @@ test('Call onActionClick and onClose by action button', async () => {
     await waitFor(() => expect(handleClose).toHaveBeenCalledTimes(1));
 });
 
-test('Escape closes the sheet and calls onClose after the transition', async () => {
-    const onClose = jest.fn();
-    render(
-        <PromoSheet
-            title="Title"
-            message="Message"
-            actionText="Action"
-            closeText="Close"
-            onClose={onClose}
-        />,
-    );
-    const user = userEvent.setup();
-    await user.keyboard('{Escape}');
-    await waitFor(() => expect(onClose).toHaveBeenCalledTimes(1));
-    expect(screen.queryByRole('heading', {name: 'Title'})).not.toBeInTheDocument();
-});
+test.each(['escape', 'close button'])(
+    '%s closes the sheet and calls onClose once',
+    async (action) => {
+        const onClose = jest.fn();
+        render(
+            <PromoSheet
+                title="Title"
+                message="Message"
+                actionText="Action"
+                closeText="Close"
+                onClose={onClose}
+            />,
+        );
+        const user = userEvent.setup();
+        if (action === 'escape') {
+            await user.keyboard('{Escape}');
+        } else {
+            await user.click(screen.getByRole('button', {name: 'Close'}));
+        }
+        await waitFor(() => {
+            expect(screen.queryByRole('heading', {name: 'Title'})).not.toBeInTheDocument();
+        });
+        expect(onClose).toHaveBeenCalledTimes(1);
+    },
+);

From 68ea1a810dc6f2b2eec2a1093d19e463ce6eaadd Mon Sep 17 00:00:00 2001
From: kseniyakuzina <kseniyakuzina@yandex-team.ru>
Date: Wed, 14 Oct 2026 14:08:31 +0300
Subject: [PATCH 8/9] fix(Gallery): restore mobile action list layout

---
 .../MobileGalleryActions.scss                 | 11 +++++
 .../MobileGalleryActions.tsx                  | 41 ++++++++++++-------
 2 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/src/components/Gallery/components/MobileGalleryActions/MobileGalleryActions.scss b/src/components/Gallery/components/MobileGalleryActions/MobileGalleryActions.scss
index f71f0e56..ff06f493 100644
--- a/src/components/Gallery/components/MobileGalleryActions/MobileGalleryActions.scss
+++ b/src/components/Gallery/components/MobileGalleryActions/MobileGalleryActions.scss
@@ -5,8 +5,19 @@ $block: '.#{variables.$ns}mobile-gallery-actions';
 #{$block} {
     --g-sheet-content-padding: var(--g-spacing-1) 0;
     --g-button-border-radius: 0;
+    --g-list-item-view-border-radius: 0;
+    --g-list-item-view-padding-inline: 0;
+    --g-list-item-view-padding-block: 0;
+
+    &__cell {
+        width: 100%;
+        min-width: 0;
+    }
 
     &__list-item {
+        --g-button-background-color-hover: transparent;
+        --g-button-focus-outline-offset: -2px;
+
         justify-content: flex-start;
         transition: background-color 0.2s ease-in-out;
     }
diff --git a/src/components/Gallery/components/MobileGalleryActions/MobileGalleryActions.tsx b/src/components/Gallery/components/MobileGalleryActions/MobileGalleryActions.tsx
index 95527f4a..684478f6 100644
--- a/src/components/Gallery/components/MobileGalleryActions/MobileGalleryActions.tsx
+++ b/src/components/Gallery/components/MobileGalleryActions/MobileGalleryActions.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import {Button, ButtonProps, Flex, List, Sheet} from '@gravity-ui/uikit';
+import {Button, ButtonProps, Flex, List, ListProps, Sheet} from '@gravity-ui/uikit';
 
 import {block} from '../../../utils/cn';
 import type {GalleryItemAction, GalleryItemProps} from '../../GalleryItem';
@@ -19,6 +19,11 @@ export type MobileGalleryActionsProps = {
 export const MobileGalleryActions = ({open, actions = [], onClose}: MobileGalleryActionsProps) => {
     const {t} = i18n.useTranslation();
 
+    const getItemTextValue = React.useCallback(
+        (item: GalleryItemAction) => (item.__titleT ? item.__titleT({t}) : item.title),
+        [t],
+    );
+
     const renderListItem = React.useCallback(
         (item: GalleryItemAction) => {
             const title = item.__titleT ? item.__titleT({t}) : item.title;
@@ -67,25 +72,33 @@ export const MobileGalleryActions = ({open, actions = [], onClose}: MobileGaller
         [t],
     );
 
+    const renderItem = React.useCallback<NonNullable<ListProps<GalleryItemAction>['renderItem']>>(
+        (ctx, helpers) => (
+            <List.ItemView {...helpers.getItemProps()} {...helpers.getItemViewProps()}>
+                <div {...helpers.getCellProps()} className={cnMobileGalleryActions('cell')}>
+                    {renderListItem(ctx.item)}
+                </div>
+            </List.ItemView>
+        ),
+        [renderListItem],
+    );
+
+    const handleOpenChange = React.useCallback(
+        (nextOpen: boolean) => {
+            if (!nextOpen) onClose();
+        },
+        [onClose],
+    );
+
     return (
-        <Sheet
-            className={cnMobileGalleryActions()}
-            open={open}
-            onOpenChange={(nextOpen) => {
-                if (!nextOpen) onClose();
-            }}
-        >
+        <Sheet className={cnMobileGalleryActions()} open={open} onOpenChange={handleOpenChange}>
             <List
                 aria-label={t('actions')}
                 role="grid"
                 items={actions}
                 size="xl"
-                getItemTextValue={(item) => (item.__titleT ? item.__titleT({t}) : item.title)}
-                renderItem={(ctx, helpers) => (
-                    <List.ItemView {...helpers.getItemProps()} {...helpers.getItemViewProps()}>
-                        <div {...helpers.getCellProps()}>{renderListItem(ctx.item)}</div>
-                    </List.ItemView>
-                )}
+                getItemTextValue={getItemTextValue}
+                renderItem={renderItem}
                 onItemAction={onClose}
             />
         </Sheet>

From ae04b9975269a44235f4c84f53c677f65b4bf6b5 Mon Sep 17 00:00:00 2001
From: Andrey Morozov <amje@yandex-team.ru>
Date: Thu, 15 Oct 2026 19:16:15 +0300
Subject: [PATCH 9/9] feat: update beta version

---
 package-lock.json | 10 +++++-----
 package.json      |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e9ce5e1c..0effe95c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,7 +30,7 @@
         "@gravity-ui/readme-validator": "^1.3.0",
         "@gravity-ui/stylelint-config": "^4.0.1",
         "@gravity-ui/tsconfig": "^1.0.0",
-        "@gravity-ui/uikit": "^8.0.0-beta.1",
+        "@gravity-ui/uikit": "^8.0.0-beta.2",
         "@storybook/addon-a11y": "^8.4.7",
         "@storybook/addon-actions": "^8.4.7",
         "@storybook/addon-docs": "^8.4.7",
@@ -78,7 +78,7 @@
         "typescript": "^5.7.3"
       },
       "peerDependencies": {
-        "@gravity-ui/uikit": "^8.0.0-beta.1",
+        "@gravity-ui/uikit": "^8.0.0-beta.2",
         "react": "^18.0.0 || ^19.0.0",
         "react-dom": "^18.0.0 || ^19.0.0"
       }
@@ -3381,9 +3381,9 @@
       "dev": true
     },
     "node_modules/@gravity-ui/uikit": {
-      "version": "8.0.0-beta.1",
-      "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-8.0.0-beta.1.tgz",
-      "integrity": "sha512-8cQzm90ais35cP5jRNdcZlzIE0kK4UT/Klzvv5VLspz+TgRBrNoKx3wMOPdmLbfM1QstJPSFe93fz4LrCXvl7g==",
+      "version": "8.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-8.0.0-beta.2.tgz",
+      "integrity": "sha512-VkkrH1Tin/q813aNvsbOKalHZmp8XCHDeWLdHIezAnijDL68xsVarA/Rk6RlrWiMzrPM1x3/oFEr8sBe4zJE6Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index 25316afe..34d5986d 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
     "@gravity-ui/readme-validator": "^1.3.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^8.0.0-beta.1",
+    "@gravity-ui/uikit": "^8.0.0-beta.2",
     "@storybook/addon-a11y": "^8.4.7",
     "@storybook/addon-actions": "^8.4.7",
     "@storybook/addon-docs": "^8.4.7",
@@ -121,7 +121,7 @@
     "typescript": "^5.7.3"
   },
   "peerDependencies": {
-    "@gravity-ui/uikit": "^8.0.0-beta.1",
+    "@gravity-ui/uikit": "^8.0.0-beta.2",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },