From 792e571a8f6c2ee2e702f8e117f67d56401b0593 Mon Sep 17 00:00:00 2001
From: EldarMuhamethanov <61377022+EldarMuhamethanov@users.noreply.github.com>
Date: Tue, 29 Oct 2024 16:59:02 +0300
Subject: [PATCH 01/19] fix(Touch): rm todo of events (#7869)

---
 packages/vkui/src/components/Touch/Touch.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/vkui/src/components/Touch/Touch.tsx b/packages/vkui/src/components/Touch/Touch.tsx
index fec7205677..59fc834c1f 100644
--- a/packages/vkui/src/components/Touch/Touch.tsx
+++ b/packages/vkui/src/components/Touch/Touch.tsx
@@ -25,11 +25,11 @@ export interface TouchProps
   useCapture?: boolean;
   slideThreshold?: number;
   noSlideClick?: boolean;
-  onEnter?: HoverHandler; // TODO [>=7] Заменить типы события в VKUITouchEvent на события из React
+  onEnter?: HoverHandler;
   onLeave?: HoverHandler;
-  onStart?: CustomTouchEventHandler; // TODO [>=7] Заменить типы события в VKUITouchEvent на события из React
-  onStartX?: CustomTouchEventHandler; // TODO [>=7] Заменить типы события в VKUITouchEvent на события из React
-  onStartY?: CustomTouchEventHandler; // TODO [>=7] Заменить типы события в VKUITouchEvent на события из React
+  onStart?: CustomTouchEventHandler;
+  onStartX?: CustomTouchEventHandler;
+  onStartY?: CustomTouchEventHandler;
   onMove?: CustomTouchEventHandler;
   onMoveX?: CustomTouchEventHandler;
   onMoveY?: CustomTouchEventHandler;

From 6086d34cc754fb7e7d008155750f9a47ebdc60eb Mon Sep 17 00:00:00 2001
From: Daniil Suvorov <severecloud@gmail.com>
Date: Wed, 30 Oct 2024 10:27:24 +0300
Subject: [PATCH 02/19] fix: hash classes (#7857)

---
 packages/vkui/package.swcrc                                     | 2 +-
 packages/vkui/rspack.styles.config.ts                           | 2 +-
 packages/vkui/src/components/CustomSelect/CustomSelect.test.tsx | 2 +-
 .../vkui/src/components/HorizontalCell/HorizontalCell.test.tsx  | 2 +-
 shared.js                                                       | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/vkui/package.swcrc b/packages/vkui/package.swcrc
index 3a34698ab2..1bbf58ad2d 100644
--- a/packages/vkui/package.swcrc
+++ b/packages/vkui/package.swcrc
@@ -29,7 +29,7 @@
         [
           "swc-plugin-css-modules",
           {
-            "generate_scoped_name": "vkui[folder]__[local]"
+            "generate_scoped_name": "[folder]__[local]--[hash:base64:5]"
           }
         ],
         [
diff --git a/packages/vkui/rspack.styles.config.ts b/packages/vkui/rspack.styles.config.ts
index d4d01aff6d..f44aba2b71 100644
--- a/packages/vkui/rspack.styles.config.ts
+++ b/packages/vkui/rspack.styles.config.ts
@@ -55,7 +55,7 @@ const config: Configuration = {
                 [
                   'swc-plugin-css-modules',
                   {
-                    generate_scoped_name: 'vkui[folder]_[local]',
+                    generate_scoped_name: '[folder]__[local]--[hash:base64:5]',
                   },
                 ],
               ],
diff --git a/packages/vkui/src/components/CustomSelect/CustomSelect.test.tsx b/packages/vkui/src/components/CustomSelect/CustomSelect.test.tsx
index bbb5c39268..edc3889d98 100644
--- a/packages/vkui/src/components/CustomSelect/CustomSelect.test.tsx
+++ b/packages/vkui/src/components/CustomSelect/CustomSelect.test.tsx
@@ -7,7 +7,7 @@ import { baselineComponent, userEvent, waitForFloatingPosition } from '../../tes
 import { Avatar } from '../Avatar/Avatar';
 import { CustomSelectOption } from '../CustomSelectOption/CustomSelectOption';
 import { CustomSelect, type CustomSelectRenderOption, type SelectProps } from './CustomSelect';
-import styles from './CustomSelectDropdown.module.css';
+import styles from './CustomSelect.module.css';
 
 let placementStub: Placement | undefined = undefined;
 jest.mock('../../lib/floating', () => {
diff --git a/packages/vkui/src/components/HorizontalCell/HorizontalCell.test.tsx b/packages/vkui/src/components/HorizontalCell/HorizontalCell.test.tsx
index 71ccdfc525..ae984b08bb 100644
--- a/packages/vkui/src/components/HorizontalCell/HorizontalCell.test.tsx
+++ b/packages/vkui/src/components/HorizontalCell/HorizontalCell.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { baselineComponent } from '../../testing/utils';
 import { CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH, HorizontalCell } from './HorizontalCell';
-import styles from './HorizontaCell.module.css';
+import styles from './HorizontalCell.module.css';
 
 describe('HorizontalCell', () => {
   baselineComponent((props) => <HorizontalCell {...props}>HorizontalCell</HorizontalCell>);
diff --git a/shared.js b/shared.js
index 10ade59b1f..965df7923b 100644
--- a/shared.js
+++ b/shared.js
@@ -17,5 +17,5 @@ module.exports = {
     './node_modules/@vkontakte/vkui-tokens/themes/vkComDark/cssVars/declarations/onlyVariablesLocal.css',
   ],
 
-  generateScopedName: 'vkui[folder]__[local]',
+  generateScopedName: '[folder]__[local]--[hash:base64:5]',
 };

From 1d765fd2df80e5733a8e2b92ddcbef24c21f84f1 Mon Sep 17 00:00:00 2001
From: EldarMuhamethanov <61377022+EldarMuhamethanov@users.noreply.github.com>
Date: Wed, 30 Oct 2024 11:35:13 +0300
Subject: [PATCH 03/19] feat(SimpleCell): rename subhead to overTitle (#7861)

* feat(SimpleCell): rename subhead to overTitle

* test(SimpleCell): update screenshots
---
 .../v7/__testfixtures__/cell-button/basic.input.tsx    |  5 +++++
 .../v7/__testfixtures__/cell/basic.input.tsx           |  9 +++++++++
 .../v7/__testfixtures__/simple-cell/basic.input.tsx    | 10 ++++++++++
 .../v7/__tests__/__snapshots__/cell-button.ts.snap     |  4 ++++
 .../transforms/v7/__tests__/__snapshots__/cell.ts.snap |  8 ++++++++
 .../v7/__tests__/__snapshots__/simple-cell.ts.snap     |  8 ++++++++
 packages/codemods/src/transforms/v7/cell-button.ts     |  4 +++-
 packages/codemods/src/transforms/v7/cell.ts            |  1 +
 packages/codemods/src/transforms/v7/simple-cell.ts     |  1 +
 .../src/components/CellButton/CellButton.stories.tsx   |  2 +-
 .../SimpleCell/SimpleCell.e2e-playground.tsx           |  2 +-
 .../src/components/SimpleCell/SimpleCell.module.css    |  2 +-
 .../src/components/SimpleCell/SimpleCell.stories.tsx   |  2 +-
 packages/vkui/src/components/SimpleCell/SimpleCell.tsx | 10 +++++-----
 .../simplecell-android-chromium-dark-1-snap.png        |  4 ++--
 .../simplecell-android-chromium-light-1-snap.png       |  4 ++--
 .../simplecell-ios-webkit-dark-1-snap.png              |  4 ++--
 .../simplecell-ios-webkit-light-1-snap.png             |  4 ++--
 .../simplecell-vkcom-chromium-dark-1-snap.png          |  4 ++--
 .../simplecell-vkcom-chromium-light-1-snap.png         |  4 ++--
 .../simplecell-vkcom-firefox-dark-1-snap.png           |  4 ++--
 .../simplecell-vkcom-firefox-light-1-snap.png          |  4 ++--
 .../simplecell-vkcom-webkit-dark-1-snap.png            |  4 ++--
 .../simplecell-vkcom-webkit-light-1-snap.png           |  4 ++--
 24 files changed, 78 insertions(+), 30 deletions(-)

diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/cell-button/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/cell-button/basic.input.tsx
index 8dbee448ab..a0d09b8b85 100644
--- a/packages/codemods/src/transforms/v7/__testfixtures__/cell-button/basic.input.tsx
+++ b/packages/codemods/src/transforms/v7/__testfixtures__/cell-button/basic.input.tsx
@@ -33,6 +33,11 @@ const App = () => {
       <CellButton centered>
         Создать что-нибудь
       </CellButton>
+
+      {/* rename subhead -> overtitle */}
+      <CellButton centered subhead={"Subhead"}>
+        Создать что-нибудь
+      </CellButton>
     </React.Fragment>
   );
 };
diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/cell/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/cell/basic.input.tsx
index 64276f4223..5f3a2c1b7c 100644
--- a/packages/codemods/src/transforms/v7/__testfixtures__/cell/basic.input.tsx
+++ b/packages/codemods/src/transforms/v7/__testfixtures__/cell/basic.input.tsx
@@ -19,6 +19,15 @@ const App = () => {
       >
         Геолокация
       </Cell>
+
+      {/* rename subhead -> overtitle */}
+      <Cell
+        subhead={"Subhead"}
+        onClick={() => {}}
+        indicator="При использовании"
+      >
+        Геолокация
+      </Cell>
     </React.Fragment>
   );
 };
diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/simple-cell/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/simple-cell/basic.input.tsx
index 7eb68fe467..c98a6cc8ba 100644
--- a/packages/codemods/src/transforms/v7/__testfixtures__/simple-cell/basic.input.tsx
+++ b/packages/codemods/src/transforms/v7/__testfixtures__/simple-cell/basic.input.tsx
@@ -19,6 +19,16 @@ const App = () => {
       >
         Геолокация
       </SimpleCell>
+
+
+      {/* rename subhead -> overtitle */}
+      <SimpleCell
+        onClick={() => {}}
+        subhead={"Subhead"}
+        indicator="При использовании"
+      >
+        Геолокация
+      </SimpleCell>
     </React.Fragment>
   );
 };
diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/cell-button.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/cell-button.ts.snap
index aae725ef24..0ba2f0ef80 100644
--- a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/cell-button.ts.snap
+++ b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/cell-button.ts.snap
@@ -31,6 +31,10 @@ const App = () => {
       <CellButton centered>
         Создать что-нибудь
       </CellButton>
+      {/* rename subhead -> overtitle */}
+      <CellButton centered overTitle={"Subhead"}>
+        Создать что-нибудь
+      </CellButton>
     </React.Fragment>)
   );
 };"
diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/cell.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/cell.ts.snap
index 7753d6e8c6..46c0a1f072 100644
--- a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/cell.ts.snap
+++ b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/cell.ts.snap
@@ -21,6 +21,14 @@ const App = () => {
       >
         Геолокация
       </Cell>
+      {/* rename subhead -> overtitle */}
+      <Cell
+        overTitle={"Subhead"}
+        onClick={() => {}}
+        indicator="При использовании"
+      >
+        Геолокация
+      </Cell>
     </React.Fragment>)
   );
 };"
diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/simple-cell.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/simple-cell.ts.snap
index 451a6a1d0a..d1253bd820 100644
--- a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/simple-cell.ts.snap
+++ b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/simple-cell.ts.snap
@@ -21,6 +21,14 @@ const App = () => {
       >
         Геолокация
       </SimpleCell>
+      {/* rename subhead -> overtitle */}
+      <SimpleCell
+        onClick={() => {}}
+        overTitle={"Subhead"}
+        indicator="При использовании"
+      >
+        Геолокация
+      </SimpleCell>
     </React.Fragment>)
   );
 };"
diff --git a/packages/codemods/src/transforms/v7/cell-button.ts b/packages/codemods/src/transforms/v7/cell-button.ts
index e760c36ad2..e0eb60299d 100644
--- a/packages/codemods/src/transforms/v7/cell-button.ts
+++ b/packages/codemods/src/transforms/v7/cell-button.ts
@@ -1,5 +1,5 @@
 import { API, FileInfo, JSXAttribute } from 'jscodeshift';
-import { getImportInfo } from '../../codemod-helpers';
+import { getImportInfo, renameProp } from '../../codemod-helpers';
 import { report } from '../../report';
 import { JSCodeShiftOptions } from '../../types';
 
@@ -14,6 +14,8 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi
     return source.toSource();
   }
 
+  renameProp(j, source, localName, { subhead: 'overTitle' });
+
   const attributeToReplace = 'mode';
   const newAttributeName = 'appearance';
 
diff --git a/packages/codemods/src/transforms/v7/cell.ts b/packages/codemods/src/transforms/v7/cell.ts
index 979d496f14..0816bfa3ef 100644
--- a/packages/codemods/src/transforms/v7/cell.ts
+++ b/packages/codemods/src/transforms/v7/cell.ts
@@ -12,6 +12,7 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi
 
   if (localName) {
     renameProp(j, source, localName, {
+      subhead: 'overTitle',
       expandable: 'chevron',
     });
   }
diff --git a/packages/codemods/src/transforms/v7/simple-cell.ts b/packages/codemods/src/transforms/v7/simple-cell.ts
index 1c356a97ec..809a00679b 100644
--- a/packages/codemods/src/transforms/v7/simple-cell.ts
+++ b/packages/codemods/src/transforms/v7/simple-cell.ts
@@ -13,6 +13,7 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi
   if (localName) {
     renameProp(j, source, localName, {
       expandable: 'chevron',
+      subhead: 'overTitle',
     });
   }
 
diff --git a/packages/vkui/src/components/CellButton/CellButton.stories.tsx b/packages/vkui/src/components/CellButton/CellButton.stories.tsx
index 49e4ccb6f2..80d5a7e95e 100644
--- a/packages/vkui/src/components/CellButton/CellButton.stories.tsx
+++ b/packages/vkui/src/components/CellButton/CellButton.stories.tsx
@@ -45,7 +45,7 @@ const story: Meta<CellButtonProps> = {
     }),
     subtitle: StringArg,
     extraSubtitle: StringArg,
-    subhead: StringArg,
+    overTitle: StringArg,
   },
 };
 
diff --git a/packages/vkui/src/components/SimpleCell/SimpleCell.e2e-playground.tsx b/packages/vkui/src/components/SimpleCell/SimpleCell.e2e-playground.tsx
index 88bdc0831d..2a4f5d6368 100644
--- a/packages/vkui/src/components/SimpleCell/SimpleCell.e2e-playground.tsx
+++ b/packages/vkui/src/components/SimpleCell/SimpleCell.e2e-playground.tsx
@@ -67,7 +67,7 @@ export const SimpleCellPlayground = (props: ComponentPlaygroundProps) => {
         },
         {
           before: [<Avatar key="avatar" size={40} />],
-          subhead: ['Subhead'],
+          overTitle: ['Subhead'],
           children: ['Title'],
           subtitle: ['Subtitle'],
           extraSubtitle: ['Extra Subtitle'],
diff --git a/packages/vkui/src/components/SimpleCell/SimpleCell.module.css b/packages/vkui/src/components/SimpleCell/SimpleCell.module.css
index a3586a5522..3c59121c69 100644
--- a/packages/vkui/src/components/SimpleCell/SimpleCell.module.css
+++ b/packages/vkui/src/components/SimpleCell/SimpleCell.module.css
@@ -60,7 +60,7 @@
   margin-block-start: var(--vkui--spacing_size_2xs);
 }
 
-.subhead {
+.overTitle {
   color: var(--vkui--color_text_subhead);
 }
 
diff --git a/packages/vkui/src/components/SimpleCell/SimpleCell.stories.tsx b/packages/vkui/src/components/SimpleCell/SimpleCell.stories.tsx
index 84afee9bdc..9bfc8e4c83 100644
--- a/packages/vkui/src/components/SimpleCell/SimpleCell.stories.tsx
+++ b/packages/vkui/src/components/SimpleCell/SimpleCell.stories.tsx
@@ -16,7 +16,7 @@ const story: Meta<SimpleCellProps> = {
   component: SimpleCell,
   parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
   argTypes: {
-    subhead: StringArg,
+    overTitle: StringArg,
     extraSubtitle: StringArg,
     before: createFieldWithPresets({
       iconSizes: ['28'],
diff --git a/packages/vkui/src/components/SimpleCell/SimpleCell.tsx b/packages/vkui/src/components/SimpleCell/SimpleCell.tsx
index 7b40114c29..83c18194ba 100644
--- a/packages/vkui/src/components/SimpleCell/SimpleCell.tsx
+++ b/packages/vkui/src/components/SimpleCell/SimpleCell.tsx
@@ -45,7 +45,7 @@ export interface SimpleCellOwnProps extends HasComponent {
   /**
    * Дополнительная строка текста над `children`.
    */
-  subhead?: React.ReactNode;
+  overTitle?: React.ReactNode;
   /**
    * Дополнительная строка текста под `children`.
    */
@@ -95,7 +95,7 @@ export const SimpleCell = ({
   after,
   chevron,
   multiline,
-  subhead,
+  overTitle,
   subtitle,
   extraSubtitle,
   className,
@@ -124,9 +124,9 @@ export const SimpleCell = ({
         {before}
       </div>
       <div className={styles.middle}>
-        {subhead && (
-          <Subhead Component="span" className={classNames(styles.text, styles.subhead)}>
-            {subhead}
+        {overTitle && (
+          <Subhead Component="span" className={classNames(styles.text, styles.overTitle)}>
+            {overTitle}
           </Subhead>
         )}
         <div className={styles.content}>
diff --git a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-android-chromium-dark-1-snap.png b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-android-chromium-dark-1-snap.png
index cadfe562f0..fd1d1bc1a4 100644
--- a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-android-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-android-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:aff1fb5d3986e6628fea13b1e2e9c08485bd63f4bb284177b62acea341b81a84
-size 133088
+oid sha256:f67c7f5f5bc0bacebdf30bd841e02c55474db7612fb5664763a4541c08d0fc5e
+size 133391
diff --git a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-android-chromium-light-1-snap.png b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-android-chromium-light-1-snap.png
index b28db9cb02..a9fcd6622e 100644
--- a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-android-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-android-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:49b8b6a3826583068c7d3e2c879073443cf7f9c6e9ff4b8c2de4ab7bf19d8ed6
-size 129271
+oid sha256:373ef913ee31cbfa682dc6b6ace8d8e2dc0718b637cd4bf3bf01307e9f788e2e
+size 129652
diff --git a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-ios-webkit-dark-1-snap.png
index 9ad8dfdc79..126d47269f 100644
--- a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-ios-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-ios-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e1bc127074fbccd75fd0fd1a2e18849f8a6a89f6c19e2d4ac8cb60da4ad6ebc1
-size 138304
+oid sha256:6a52d02b4d3aefddd4548fb9c4449fe9d2a113ff3b27c65f89549de274ee304b
+size 138770
diff --git a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-ios-webkit-light-1-snap.png b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-ios-webkit-light-1-snap.png
index 98c236d89e..a1173a101b 100644
--- a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-ios-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-ios-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7af6f83a7ef40c42eb372995c8c134b6e7762c07f59b865dc57d9cae8b2d93ab
-size 133792
+oid sha256:c2c921db0396b5e0803dc19150bc65a77368543eb0447ca66e974e8a67da8652
+size 134284
diff --git a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-chromium-dark-1-snap.png
index 4ee6004a85..e11fb6f07b 100644
--- a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:225698f6f62f429db0a5e899384c864ada8d1870388fa2fa78e32b29a8a7a3c0
-size 118627
+oid sha256:2684cd6f6be7e1fe1e4d6184369b218a2f50b61de789e026758058944aaeffac
+size 118897
diff --git a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-chromium-light-1-snap.png
index 6eca907a8b..d223ea8db2 100644
--- a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:faa1bce2967558b1948d18f249dde88394a47686b3a94f59778eac2748eea042
-size 120402
+oid sha256:f9dd3b5e6f24f26f25030336c6bee8890ca32fd2397709ca7d61b1b2093abc9a
+size 120819
diff --git a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-firefox-dark-1-snap.png
index 1bb2b96e8c..cd5d65f4ba 100644
--- a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-firefox-dark-1-snap.png
+++ b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-firefox-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e883aa88db1b06fbcf339292557c497065d1e065561dda62e22a73d92d34d548
-size 212266
+oid sha256:585f032b0e56699b0b41c79ffb06d3c013b4feb90794eebf80058fa05bfecb91
+size 212068
diff --git a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-firefox-light-1-snap.png
index 19413dc7ab..85df884a6d 100644
--- a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-firefox-light-1-snap.png
+++ b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-firefox-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0331465297206fbf63bb319618546dfe5d509d88f17a680a2e9a9649c856d878
-size 210920
+oid sha256:6e3407c2892dc7ef168f8afefe2a6011f5442f4f86ef7a290504dc7f521470ba
+size 210735
diff --git a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-webkit-dark-1-snap.png
index 6e9d448fe0..93261fd1f4 100644
--- a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d0f9c48bdb2ebec4b77a6a757230be0d784e2d38f3b395f9d5de543f19e262ba
-size 122912
+oid sha256:00dbbb7873f6d8ac1547c3261808a8c92b03f647244f28ea23919d268cd88733
+size 123225
diff --git a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-webkit-light-1-snap.png
index d1adbd67f3..e3296d69d2 100644
--- a/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/SimpleCell/__image_snapshots__/simplecell-vkcom-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c30aa48402a209633ea11547d329b61f6b5174b38f3c707ec643dd5876aaab58
-size 123685
+oid sha256:391d406dfea789cc713623cacd897cf9285a2b8bb73a80efef768526db382913
+size 123993

From 50960eae67aec5604c5ab48e0d03ec3a68b1dd35 Mon Sep 17 00:00:00 2001
From: EldarMuhamethanov <61377022+EldarMuhamethanov@users.noreply.github.com>
Date: Wed, 30 Oct 2024 11:44:50 +0300
Subject: [PATCH 04/19] feat(Header): rm mode prop and increase size values
 (#7863)

* feat(Header): rm mode prop and increase size values

* fix(Header): fix docs and tests
---
 README.md                                     |  2 +-
 .../__testfixtures__/header/basic.input.tsx   | 45 +++++++++-
 .../v7/__tests__/__snapshots__/header.ts.snap | 19 +++-
 packages/codemods/src/transforms/v7/header.ts | 88 ++++++++++++++++++-
 packages/vkui/src/components/Avatar/Readme.md |  6 +-
 packages/vkui/src/components/Badge/Readme.md  |  4 +-
 packages/vkui/src/components/Card/Readme.md   |  8 +-
 .../vkui/src/components/CellButton/Readme.md  |  8 +-
 .../vkui/src/components/Counter/Readme.md     |  6 +-
 .../src/components/CustomScrollView/Readme.md |  4 +-
 .../vkui/src/components/Gallery/Readme.md     | 14 +--
 .../vkui/src/components/Gradient/Readme.md    |  2 +-
 packages/vkui/src/components/Group/Readme.md  |  8 +-
 .../group-android-chromium-dark-1-snap.png    |  4 +-
 .../group-android-chromium-light-1-snap.png   |  4 +-
 .../group-ios-webkit-dark-1-snap.png          |  4 +-
 .../group-ios-webkit-light-1-snap.png         |  4 +-
 .../group-vkcom-chromium-dark-1-snap.png      |  4 +-
 .../group-vkcom-chromium-light-1-snap.png     |  4 +-
 .../group-vkcom-firefox-dark-1-snap.png       |  4 +-
 .../group-vkcom-firefox-light-1-snap.png      |  4 +-
 .../group-vkcom-webkit-dark-1-snap.png        |  4 +-
 .../group-vkcom-webkit-light-1-snap.png       |  4 +-
 .../Header/Header.e2e-playground.tsx          | 28 +++---
 .../src/components/Header/Header.module.css   | 82 +++++++++--------
 .../src/components/Header/Header.stories.tsx  |  4 +-
 .../src/components/Header/Header.test.tsx     | 78 ++++++----------
 .../vkui/src/components/Header/Header.tsx     | 84 ++++++++----------
 packages/vkui/src/components/Header/Readme.md | 28 ++----
 .../header-android-chromium-dark-1-snap.png   |  4 +-
 .../header-android-chromium-light-1-snap.png  |  4 +-
 .../header-ios-webkit-dark-1-snap.png         |  4 +-
 .../header-ios-webkit-light-1-snap.png        |  4 +-
 .../header-vkcom-chromium-dark-1-snap.png     |  4 +-
 .../header-vkcom-chromium-light-1-snap.png    |  4 +-
 .../header-vkcom-firefox-dark-1-snap.png      |  4 +-
 .../header-vkcom-firefox-light-1-snap.png     |  4 +-
 .../header-vkcom-webkit-dark-1-snap.png       |  4 +-
 .../header-vkcom-webkit-light-1-snap.png      |  4 +-
 .../HorizontalScroll.stories.tsx              |  2 +-
 .../src/components/HorizontalScroll/Readme.md |  6 +-
 packages/vkui/src/components/Image/Readme.md  |  8 +-
 .../components/InfoRow/InfoRow.stories.tsx    |  2 +-
 .../vkui/src/components/InfoRow/Readme.md     |  2 +-
 .../ModalPage/ModalPage.stories.tsx           |  2 +-
 .../vkui/src/components/ModalRoot/Readme.md   |  2 +-
 .../src/components/PanelSpinner/Readme.md     |  2 +-
 .../vkui/src/components/Separator/Readme.md   |  4 +-
 .../vkui/src/components/SimpleCell/Readme.md  | 10 +--
 .../vkui/src/components/Spacing/Readme.md     |  4 +-
 packages/vkui/src/components/Touch/Readme.md  |  2 +-
 .../vkui/src/components/UsersStack/Readme.md  |  4 +-
 52 files changed, 366 insertions(+), 282 deletions(-)

diff --git a/README.md b/README.md
index 36393f9536..435a8a120e 100644
--- a/README.md
+++ b/README.md
@@ -69,7 +69,7 @@ const Example = () => {
           <View activePanel="main">
             <Panel id="main">
               <PanelHeader>VKUI</PanelHeader>
-              <Group header={<Header mode="secondary">Items</Header>}>
+              <Group header={<Header size="s">Items</Header>}>
                 <SimpleCell>Hello</SimpleCell>
                 <SimpleCell>World</SimpleCell>
               </Group>
diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/header/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/header/basic.input.tsx
index 89de681f87..948a31090f 100644
--- a/packages/codemods/src/transforms/v7/__testfixtures__/header/basic.input.tsx
+++ b/packages/codemods/src/transforms/v7/__testfixtures__/header/basic.input.tsx
@@ -12,16 +12,15 @@ const App = () => {
   return (
     <React.Fragment>
       {/* Проверка изменения size */}
-      <Header mode="primary" multiline size="large">
+      <Header multiline size="large">
         Кто может писать мне личные сообщения
       </Header>
-      <Header mode="secondary" multiline size="regular">
+      <Header multiline size="regular">
         Кто может писать мне личные сообщения
       </Header>
 
       {/* Проверка замены aside на after */}
       <Header
-        mode="primary"
         subtitle="SOHN — Conrad"
         subtitleComponent="h3"
         aside={
@@ -32,11 +31,49 @@ const App = () => {
         }
       />
       <Header
-        mode="primary"
         subtitle="SOHN — Conrad"
         subtitleComponent="h3"
         aside={aside}
       />
+
+      {/* Проверка удаления mode */}
+      {/* замена Large Primary на xl */}
+      <Header
+        mode="primary"
+        size="large"
+        subtitle="SOHN — Conrad"
+      />
+
+      {/* замена Large tertiary на m */}
+      <Header
+        mode="tertiary"
+        size="large"
+        subtitle="SOHN — Conrad"
+      />
+      {/* замена Regular tertiary на m */}
+      <Header
+        mode="tertiary"
+        size="regular"
+        subtitle="SOHN — Conrad"
+      />
+      {/* замена Regular primary на m */}
+      <Header
+        mode="primary"
+        size="regular"
+        subtitle="SOHN — Conrad"
+      />
+      {/* замена Large secondary на m */}
+      <Header
+        mode="secondary"
+        size="large"
+        subtitle="SOHN — Conrad"
+      />
+      {/* замена Regular secondary на s */}
+      <Header
+        mode="secondary"
+        size="regular"
+        subtitle="SOHN — Conrad"
+      />
     </React.Fragment>
   );
 };
diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/header.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/header.ts.snap
index 77b774efcd..1c41cfd5ff 100644
--- a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/header.ts.snap
+++ b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/header.ts.snap
@@ -15,15 +15,14 @@ const App = () => {
   return (
     (<React.Fragment>
       {/* Проверка изменения size */}
-      <Header mode="primary" multiline size="l">
+      <Header multiline size="l">
         Кто может писать мне личные сообщения
       </Header>
-      <Header mode="secondary" multiline size="m">
+      <Header multiline size="m">
         Кто может писать мне личные сообщения
       </Header>
       {/* Проверка замены aside на after */}
       <Header
-        mode="primary"
         subtitle="SOHN — Conrad"
         subtitleComponent="h3"
         after={
@@ -34,11 +33,23 @@ const App = () => {
         }
       />
       <Header
-        mode="primary"
         subtitle="SOHN — Conrad"
         subtitleComponent="h3"
         after={aside}
       />
+      {/* Проверка удаления mode */}
+      {/* замена Large Primary на xl */}
+      <Header size="xl" subtitle="SOHN — Conrad" />
+      {/* замена Large tertiary на m */}
+      <Header size="m" subtitle="SOHN — Conrad" />
+      {/* замена Regular tertiary на m */}
+      <Header size="m" subtitle="SOHN — Conrad" />
+      {/* замена Regular primary на m */}
+      <Header size="m" subtitle="SOHN — Conrad" />
+      {/* замена Large secondary на m */}
+      <Header size="s" subtitle="SOHN — Conrad" />
+      {/* замена Regular secondary на s */}
+      <Header size="s" subtitle="SOHN — Conrad" />
     </React.Fragment>)
   );
 };"
diff --git a/packages/codemods/src/transforms/v7/header.ts b/packages/codemods/src/transforms/v7/header.ts
index bb89e39ad0..766c8d4d46 100644
--- a/packages/codemods/src/transforms/v7/header.ts
+++ b/packages/codemods/src/transforms/v7/header.ts
@@ -1,10 +1,92 @@
-import { API, FileInfo } from 'jscodeshift';
+import {
+  API,
+  Collection,
+  FileInfo,
+  JSCodeshift,
+  JSXAttribute,
+  JSXSpreadAttribute,
+} from 'jscodeshift';
+import { report } from '../../report';
 import { remapSizePropValue } from './common/remapSizePropValue';
-import { getImportInfo, renameProp } from '../../codemod-helpers';
+import { getImportInfo, removeAttribute, renameProp } from '../../codemod-helpers';
 import { JSCodeShiftOptions } from '../../types';
 
 export const parser = 'tsx';
 
+function removePropMode(j: JSCodeshift, api: API, source: Collection, localName: string) {
+  const getValueFromAttribute = (attr: JSXAttribute): string | null => {
+    if (attr.value?.type === 'StringLiteral') {
+      return attr.value.value;
+    }
+    if (attr.value?.type === 'JSXExpressionContainer') {
+      const expression = attr.value.expression;
+      if (expression.type === 'StringLiteral') {
+        return expression.value;
+      }
+    }
+    return null;
+  };
+
+  const changeAttributeValue = (
+    attributes: Array<JSXAttribute | JSXSpreadAttribute> | undefined,
+    attribute: JSXAttribute | undefined,
+    attrName: string,
+    newValue: string,
+  ) => {
+    if (attribute) {
+      attribute.value = j.stringLiteral(newValue);
+    } else {
+      attributes?.push(j.jsxAttribute(j.jsxIdentifier(attrName), j.stringLiteral(newValue)));
+    }
+  };
+
+  source
+    .find(j.JSXOpeningElement, {
+      name: {
+        name: localName,
+      },
+    })
+    .forEach((path) => {
+      const attributes = path.node.attributes;
+      const modeAttr =
+        (attributes?.find(
+          (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'mode',
+        ) as JSXAttribute) || undefined;
+      const sizeAttr =
+        (attributes?.find(
+          (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'size',
+        ) as JSXAttribute) || undefined;
+      const hasSpread = !!attributes?.some((attr) => attr.type === 'JSXSpreadAttribute');
+      if (!modeAttr) {
+        if (hasSpread) {
+          report(
+            api,
+            `: ${localName} has been changed. Manual changes required: remove mode attribute and replace it by size prop`,
+          );
+        }
+        return;
+      }
+      removeAttribute(attributes, modeAttr);
+      const modeValue = getValueFromAttribute(modeAttr);
+      if (!modeValue) {
+        report(
+          api,
+          `: ${localName} has been changed. Manual changes required: remove mode attribute and replace it by size prop`,
+        );
+        return;
+      }
+      const sizeValue = getValueFromAttribute(sizeAttr);
+
+      if (modeValue === 'primary' && sizeValue === 'l') {
+        changeAttributeValue(attributes, sizeAttr, 'size', 'xl');
+      } else if (modeValue === 'tertiary' || (modeValue === 'primary' && sizeValue === 'm')) {
+        changeAttributeValue(attributes, sizeAttr, 'size', 'm');
+      } else if (modeValue === 'secondary') {
+        changeAttributeValue(attributes, sizeAttr, 'size', 's');
+      }
+    });
+}
+
 export default function transformer(file: FileInfo, api: API, options: JSCodeShiftOptions) {
   const { alias } = options;
   const j = api.jscodeshift;
@@ -27,5 +109,7 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi
 
   renameProp(j, source, localName, { aside: 'after' });
 
+  removePropMode(j, api, source, localName);
+
   return source.toSource();
 }
diff --git a/packages/vkui/src/components/Avatar/Readme.md b/packages/vkui/src/components/Avatar/Readme.md
index f16b90476f..465ee4f8a8 100644
--- a/packages/vkui/src/components/Avatar/Readme.md
+++ b/packages/vkui/src/components/Avatar/Readme.md
@@ -10,7 +10,7 @@
 ```jsx
 const Default = () => {
   return (
-    <Group header={<Header mode="secondary">По умолчанию</Header>}>
+    <Group header={<Header size="s">По умолчанию</Header>}>
       <SimpleCell before={<Avatar src={getAvatarUrl('user_id34')} />}>Татьяна Плуталова</SimpleCell>
     </Group>
   );
@@ -19,7 +19,7 @@ const Default = () => {
 const Fallbacks = () => {
   return (
     <Group
-      header={<Header mode="secondary">Фолбеки</Header>}
+      header={<Header size="s">Фолбеки</Header>}
       description="На случаи если аватарка не загрузилась или она отсутсвует"
     >
       <SimpleCell
@@ -48,7 +48,7 @@ const OthersFeatures = () => {
   const [overlay, setOverlay] = React.useState();
 
   return (
-    <Group header={<Header mode="secondary">Другие возможности</Header>}>
+    <Group header={<Header size="s">Другие возможности</Header>}>
       <AvatarPropsForm
         onUseInisitals={setUseInisitals}
         onGradientColorChange={setGradientColorChange}
diff --git a/packages/vkui/src/components/Badge/Readme.md b/packages/vkui/src/components/Badge/Readme.md
index 5bea7e877c..fbfaed3eb4 100644
--- a/packages/vkui/src/components/Badge/Readme.md
+++ b/packages/vkui/src/components/Badge/Readme.md
@@ -13,7 +13,7 @@ const Example = () => {
       <Panel id="badge">
         <PanelHeader>Бейдж</PanelHeader>
 
-        <Group header={<Header mode="secondary">В пунктах меню</Header>}>
+        <Group header={<Header size="s">В пунктах меню</Header>}>
           <Cell
             chevron
             before={<Icon28Notifications />}
@@ -24,7 +24,7 @@ const Example = () => {
           </Cell>
         </Group>
 
-        <Group header={<Header mode="secondary">В переключателях</Header>}>
+        <Group header={<Header size="s">В переключателях</Header>}>
           <Tabs>
             <TabsItem
               selected={tab === 'dialogs'}
diff --git a/packages/vkui/src/components/Card/Readme.md b/packages/vkui/src/components/Card/Readme.md
index eee2565232..4f6bf95279 100644
--- a/packages/vkui/src/components/Card/Readme.md
+++ b/packages/vkui/src/components/Card/Readme.md
@@ -8,21 +8,21 @@
   <Panel id="card">
     <PanelHeader>Card</PanelHeader>
     <Group>
-      <Group mode="plain" header={<Header mode="secondary">Дефолтный стиль</Header>}>
+      <Group mode="plain" header={<Header size="s">Дефолтный стиль</Header>}>
         <CardGrid size="l">
           <Card>
             <div style={{ height: 96 }} />
           </Card>
         </CardGrid>
       </Group>
-      <Group mode="plain" header={<Header mode="secondary">С внутренней обводкой</Header>}>
+      <Group mode="plain" header={<Header size="s">С внутренней обводкой</Header>}>
         <CardGrid size="l">
           <Card mode="outline">
             <div style={{ height: 96 }} />
           </Card>
         </CardGrid>
       </Group>
-      <Group mode="plain" header={<Header mode="secondary">С внешней тенью</Header>}>
+      <Group mode="plain" header={<Header size="s">С внешней тенью</Header>}>
         <CardGrid size="l">
           <Card mode="shadow">
             <div style={{ height: 96 }} />
@@ -31,7 +31,7 @@
       </Group>
       <Group
         mode="plain"
-        header={<Header mode="secondary">С внутренней обводкой и дефолтным фоном</Header>}
+        header={<Header size="s">С внутренней обводкой и дефолтным фоном</Header>}
       >
         <CardGrid size="l">
           <Card mode="outline-tint">
diff --git a/packages/vkui/src/components/CellButton/Readme.md b/packages/vkui/src/components/CellButton/Readme.md
index 7b17accaa2..7114c78622 100644
--- a/packages/vkui/src/components/CellButton/Readme.md
+++ b/packages/vkui/src/components/CellButton/Readme.md
@@ -2,13 +2,13 @@
 <View activePanel="button">
   <Panel id="button">
     <PanelHeader>CellButton</PanelHeader>
-    <Group header={<Header mode="secondary">Базовый пример</Header>}>
+    <Group header={<Header size="s">Базовый пример</Header>}>
       <CellButton onClick={() => {}}>Добавить новую школу</CellButton>
       <CellButton onClick={() => {}} appearance="negative">
         Удалить беседу
       </CellButton>
     </Group>
-    <Group header={<Header mode="secondary">Иконки</Header>}>
+    <Group header={<Header size="s">Иконки</Header>}>
       <CellButton onClick={() => {}} before={<Icon28AddOutline />}>
         Добавить родственника
       </CellButton>
@@ -16,7 +16,7 @@
         Удалить беседу
       </CellButton>
     </Group>
-    <Group header={<Header mode="secondary">Аватарки</Header>}>
+    <Group header={<Header size="s">Аватарки</Header>}>
       <CellButton
         onClick={() => {}}
         before={
@@ -48,7 +48,7 @@
         Создать плейлист
       </CellButton>
     </Group>
-    <Group header={<Header mode="secondary">Центрирование</Header>}>
+    <Group header={<Header size="s">Центрирование</Header>}>
       <CellButton onClick={() => {}} centered before={<Icon24Add />}>
         Создать беседу
       </CellButton>
diff --git a/packages/vkui/src/components/Counter/Readme.md b/packages/vkui/src/components/Counter/Readme.md
index 815a5ca194..f11f7d1cc2 100644
--- a/packages/vkui/src/components/Counter/Readme.md
+++ b/packages/vkui/src/components/Counter/Readme.md
@@ -14,7 +14,7 @@ const Example = () => {
     <View activePanel="counter-demo">
       <Panel id="counter-demo">
         <PanelHeader>Counter</PanelHeader>
-        <Group header={<Header mode="secondary">Счётчики в ячейках</Header>}>
+        <Group header={<Header size="s">Счётчики в ячейках</Header>}>
           <List>
             <Cell before={<Icon28UserOutline />} indicator={<Counter>4</Counter>}>
               Друзья
@@ -40,7 +40,7 @@ const Example = () => {
             </Cell>
           </List>
         </Group>
-        <Group header={<Header mode="secondary">Счётчики в кнопках</Header>}>
+        <Group header={<Header size="s">Счётчики в кнопках</Header>}>
           <FormItem>
             <Button mode="secondary" size="m" after={<Counter>16</Counter>}>
               Secondary medium
@@ -85,7 +85,7 @@ const Example = () => {
           <Cell before={<Avatar />}>Виктор Пелевин</Cell>
           <Cell before={<Avatar />}>Михаил Зыгарь</Cell>
         </Group>
-        <Group header={<Header mode="secondary">В переключателях</Header>}>
+        <Group header={<Header size="s">В переключателях</Header>}>
           <Tabs mode="buttons">
             <HorizontalScroll>
               <TabsItem
diff --git a/packages/vkui/src/components/CustomScrollView/Readme.md b/packages/vkui/src/components/CustomScrollView/Readme.md
index d6044024bf..60e5d846f1 100644
--- a/packages/vkui/src/components/CustomScrollView/Readme.md
+++ b/packages/vkui/src/components/CustomScrollView/Readme.md
@@ -50,10 +50,10 @@ const Example = () => {
     <View activePanel="customScrollView">
       <Panel id="customScrollView">
         <PanelHeader>CustomScrollView</PanelHeader>
-        <Group header={<Header mode="secondary">Вертикальный скролл</Header>}>
+        <Group header={<Header size="s">Вертикальный скролл</Header>}>
           <WithVerticalScroll />
         </Group>
-        <Group header={<Header mode="secondary">Горизонтальный скролл</Header>}>
+        <Group header={<Header size="s">Горизонтальный скролл</Header>}>
           <WithHorizontalScroll />
         </Group>
       </Panel>
diff --git a/packages/vkui/src/components/Gallery/Readme.md b/packages/vkui/src/components/Gallery/Readme.md
index fed052ba50..1eea3c46d5 100644
--- a/packages/vkui/src/components/Gallery/Readme.md
+++ b/packages/vkui/src/components/Gallery/Readme.md
@@ -14,14 +14,14 @@ const Example = () => {
     <View activePanel="gallery">
       <Panel nav="gallery">
         <PanelHeader>Gallery</PanelHeader>
-        <Group header={<Header mode="secondary">Sticks right</Header>}>
+        <Group header={<Header size="s">Sticks right</Header>}>
           <Gallery slideWidth="90%" bullets="dark">
             <div style={{ backgroundColor: 'var(--vkui--color_background_negative)' }} />
             <img src="https://placebear.com/1024/640" style={{ display: 'block' }} />
             <div style={{ backgroundColor: 'var(--vkui--color_background_accent)' }} />
           </Gallery>
         </Group>
-        <Group header={<Header mode="secondary">Sticks left</Header>}>
+        <Group header={<Header size="s">Sticks left</Header>}>
           <Gallery slideWidth="90%" align="right">
             <div
               style={{
@@ -33,14 +33,14 @@ const Example = () => {
             <div style={{ backgroundColor: 'var(--vkui--color_background_accent)' }} />
           </Gallery>
         </Group>
-        <Group header={<Header mode="secondary">Centered</Header>}>
+        <Group header={<Header size="s">Centered</Header>}>
           <Gallery slideWidth="90%" align="center">
             <div style={{ backgroundColor: 'var(--vkui--color_background_negative)' }} />
             <div style={{ backgroundColor: 'var(--vkui--color_background_positive)' }} />
             <div style={{ backgroundColor: 'var(--vkui--color_background_accent)' }} />
           </Gallery>
         </Group>
-        <Group header={<Header mode="secondary">Custom width</Header>}>
+        <Group header={<Header size="s">Custom width</Header>}>
           <Gallery slideWidth="custom" style={{ height: 150 }}>
             <div
               style={{
@@ -68,14 +68,14 @@ const Example = () => {
             />
           </Gallery>
         </Group>
-        <Group header={<Header mode="secondary">Arrows</Header>}>
+        <Group header={<Header size="s">Arrows</Header>}>
           <Gallery slideWidth="90%" style={{ height: 150 }} bullets="dark" showArrows>
             <div style={{ backgroundColor: 'var(--vkui--color_background_negative)' }} />
             <div style={{ backgroundColor: 'var(--vkui--color_background_positive)' }} />
             <div style={{ backgroundColor: 'var(--vkui--color_background_accent)' }} />
           </Gallery>
         </Group>
-        <Group header={<Header mode="secondary">Controlled</Header>}>
+        <Group header={<Header size="s">Controlled</Header>}>
           <Gallery
             slideWidth="90%"
             align="center"
@@ -104,7 +104,7 @@ const Example = () => {
             </Button>
           </FormItem>
         </Group>
-        <Group header={<Header mode="secondary">With looped prop</Header>}>
+        <Group header={<Header size="s">With looped prop</Header>}>
           <Gallery slideWidth="90%" style={{ height: 150 }} bullets="dark" showArrows looped>
             <Slide backgroundColor="var(--vkui--color_background_negative)">1</Slide>
             <Slide backgroundColor="var(--vkui--color_background_positive)">2</Slide>
diff --git a/packages/vkui/src/components/Gradient/Readme.md b/packages/vkui/src/components/Gradient/Readme.md
index 3660f706ce..ef6627d985 100644
--- a/packages/vkui/src/components/Gradient/Readme.md
+++ b/packages/vkui/src/components/Gradient/Readme.md
@@ -34,7 +34,7 @@ const Example = () => {
             </CellButton>
           </Group>
         </Group>
-        <Group mode="plain" header={<Header mode="secondary">Направление to="bottom"</Header>}>
+        <Group mode="plain" header={<Header size="s">Направление to="bottom"</Header>}>
           <Gradient mode="tint" to="bottom">
             <Div>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a sollicitudin lectus, a
diff --git a/packages/vkui/src/components/Group/Readme.md b/packages/vkui/src/components/Group/Readme.md
index 9801ff9043..2b6e216f10 100644
--- a/packages/vkui/src/components/Group/Readme.md
+++ b/packages/vkui/src/components/Group/Readme.md
@@ -45,7 +45,7 @@ const Example = () => {
 
             <SharedContent />
 
-            <Group header={<Header mode="secondary">Модальное окно с Group</Header>}>
+            <Group header={<Header size="s">Модальное окно с Group</Header>}>
               <SimpleCell onClick={() => setModalOpened(true)}>
                 Открыть Group в модальном окне
               </SimpleCell>
@@ -180,8 +180,8 @@ const SharedContent = () => {
 ```jsx
 const recentFriends = getRandomUsers(20);
 
-<Group header={<Header mode="secondary">Недавние</Header>}>
-  <Header mode="primary">HorizontalScroll не учитывает отступы Group по горизонтали</Header>
+<Group header={<Header size="s">Недавние</Header>}>
+  <Header>HorizontalScroll не учитывает отступы Group по горизонтали</Header>
 
   <Group.ExpandedContent direction="inline">
     <HorizontalScroll showArrows>
@@ -195,7 +195,7 @@ const recentFriends = getRandomUsers(20);
     </HorizontalScroll>
   </Group.ExpandedContent>
 
-  <Header mode="primary">Здесь контент учитывает отступы Group по горизонтали</Header>
+  <Header>Здесь контент учитывает отступы Group по горизонтали</Header>
   <HorizontalScroll showArrows>
     {recentFriends.map((item) => {
       return (
diff --git a/packages/vkui/src/components/Group/__image_snapshots__/group-android-chromium-dark-1-snap.png b/packages/vkui/src/components/Group/__image_snapshots__/group-android-chromium-dark-1-snap.png
index d096f1d53e..cdf6ad616c 100644
--- a/packages/vkui/src/components/Group/__image_snapshots__/group-android-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/Group/__image_snapshots__/group-android-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e2db93987d879f3bbcf7b149d7cdf9507e61664535690e61516d715527baa2e2
-size 28403
+oid sha256:50e9eb28351401b44a1668037bc881232e3da0b1157954d5613234e870c8000f
+size 25314
diff --git a/packages/vkui/src/components/Group/__image_snapshots__/group-android-chromium-light-1-snap.png b/packages/vkui/src/components/Group/__image_snapshots__/group-android-chromium-light-1-snap.png
index 713655218d..9815abe6e8 100644
--- a/packages/vkui/src/components/Group/__image_snapshots__/group-android-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/Group/__image_snapshots__/group-android-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6c692d7b01d9ea885183f3115679bae502dd4a7aa45ed2b11337463a9b44e641
-size 27344
+oid sha256:09fa0173d067a920900e7e226c91dc44b8e69f003ab8641f605b799daf673cae
+size 24498
diff --git a/packages/vkui/src/components/Group/__image_snapshots__/group-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Group/__image_snapshots__/group-ios-webkit-dark-1-snap.png
index e925abe6cf..ee065be38f 100644
--- a/packages/vkui/src/components/Group/__image_snapshots__/group-ios-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/Group/__image_snapshots__/group-ios-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9f921ddad42a5af023a2880963f865f9d528525edf8f62c0b97247d8d7524df1
-size 25659
+oid sha256:3f1df819ce627d618639e04e26ab5faa191211150da987fc20768bda07c6bb97
+size 25532
diff --git a/packages/vkui/src/components/Group/__image_snapshots__/group-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Group/__image_snapshots__/group-ios-webkit-light-1-snap.png
index 17d1b025ad..a5ed2c72af 100644
--- a/packages/vkui/src/components/Group/__image_snapshots__/group-ios-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/Group/__image_snapshots__/group-ios-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:16ad3382c97e62c16a9cff31d34c7c6d72235c489699f3b05da965683e65f1fb
-size 24898
+oid sha256:7fbced186bbb88f0b7979f8d79bf648c09df6e5a3288b0f79a24fc67a00dd8c4
+size 24669
diff --git a/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-chromium-dark-1-snap.png
index 0eb99a7d27..2f36094a17 100644
--- a/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0623e79f9713e2d4d197e95590294a32679c09ebed3412e9c36d8fa19e148e2b
-size 26110
+oid sha256:44b9f00953f4e7cc9b147be307037db4169121681aaf76703c8e40ec9d22f291
+size 26044
diff --git a/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-chromium-light-1-snap.png
index 1d8bc637bb..8da653b89f 100644
--- a/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ddc3cb314350f7803fb173c7e769226ad844f91a20bc3164362d36172eb4cfd2
-size 28982
+oid sha256:96c94dc351325253c9b6e23fc1d564e6127a274489fc23fd8712776336f844c1
+size 26104
diff --git a/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-firefox-dark-1-snap.png
index 39d1d2bffd..f995f4da82 100644
--- a/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-firefox-dark-1-snap.png
+++ b/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-firefox-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5bf02d447e327fb8eac82e587658b79d2e8f3284f5512b3fe3960e3eb913d6ba
-size 38936
+oid sha256:bbb1d0441f526bbb90138d97ac9a4f9aaba1e077736c0de50ed683d15bf9adab
+size 38764
diff --git a/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-firefox-light-1-snap.png
index 057eca003d..2f362e659b 100644
--- a/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-firefox-light-1-snap.png
+++ b/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-firefox-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:becd0aaa1166864da38fb9a304bf607b9b8b9d5b794f3d0341b7acc1f4606a41
-size 37998
+oid sha256:8209463c03c0f8017375fe678f41d93553ae74b10ab298da8e8e494221eb95c5
+size 38053
diff --git a/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-webkit-dark-1-snap.png
index 85318f928e..df548990e1 100644
--- a/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2251ed7ba8243d1496887277468c2081e4868175a0b22b40fe7a398791d573bd
-size 26448
+oid sha256:85f8501bb38b40c2a92dbfa3370c460a5aa0e76f51d313636ad290465e7892b0
+size 26381
diff --git a/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-webkit-light-1-snap.png
index 4cef137ceb..6386b559cc 100644
--- a/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/Group/__image_snapshots__/group-vkcom-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9c1080eab4cc26d728473fb4f9e1f2e56dee9de88487db56a58a4a4cd321901a
-size 26367
+oid sha256:34d3bf1fefc5f8dc9a65dc5b5234b998481bc194939ba7a05f329493c983b37f
+size 26334
diff --git a/packages/vkui/src/components/Header/Header.e2e-playground.tsx b/packages/vkui/src/components/Header/Header.e2e-playground.tsx
index 1c390e8d2d..f84f89289c 100644
--- a/packages/vkui/src/components/Header/Header.e2e-playground.tsx
+++ b/packages/vkui/src/components/Header/Header.e2e-playground.tsx
@@ -16,20 +16,20 @@ export const HeaderPlayground = (props: ComponentPlaygroundProps) => {
       {...props}
       propSets={[
         {
-          mode: ['primary', 'secondary', 'tertiary'],
+          size: ['s', 'm', 'l', 'xl'],
           children: ['Кто может оставлять записи на моей странице'],
           multiline: [undefined, true],
         },
         {
-          mode: ['primary'],
+          size: ['m'],
           after: [<Link key="link">Показать все</Link>],
         },
         {
-          mode: ['primary', 'secondary'],
+          size: ['s', 'm', 'l', 'xl'],
           subtitle: ['SOHN — Conrad'],
         },
         {
-          mode: ['primary'],
+          size: ['m'],
           indicator: [
             12,
             <Counter key="counter" size="s" mode="prominent">
@@ -38,13 +38,13 @@ export const HeaderPlayground = (props: ComponentPlaygroundProps) => {
           ],
         },
         {
-          mode: ['primary'],
+          size: ['m'],
           subtitle: ['SOHN — Conrad'],
           after: [<Link key="link">Показать все</Link>],
           indicator: [12],
         },
         {
-          mode: ['secondary', 'tertiary'],
+          size: ['m'],
           indicator: [
             12,
             <Counter key="counter" size="s" mode="prominent">
@@ -53,40 +53,36 @@ export const HeaderPlayground = (props: ComponentPlaygroundProps) => {
           ],
         },
         {
-          mode: ['primary'],
-          size: ['m', 'l'],
-        },
-        {
-          mode: ['primary'],
+          size: ['m'],
           children: ['Кто может оставлять записи на моей странице'],
           before: [<Icon28UserCircleFillBlue key="user" />],
         },
         {
-          mode: ['primary'],
+          size: ['m'],
           children: ['Кто может оставлять записи на моей странице'],
           beforeTitle: [<Icon16LockOutline key="beforeTitle" />],
         },
         {
-          mode: ['primary'],
+          size: ['m'],
           children: ['Кто может оставлять записи на моей странице'],
           afterTitle: [<Icon16UnlockOutline key="afterTitle" />],
           multiline: [undefined, true],
         },
         {
-          mode: ['primary'],
+          size: ['m'],
           children: ['Кто может оставлять записи на моей странице'],
           subtitle: ['SOHN — Conrad'],
           beforeSubtitle: [<Icon12Tag key="beforeSubtitle" />],
         },
         {
-          mode: ['primary'],
+          size: ['m'],
           children: ['Кто может оставлять записи на моей странице'],
           subtitle: ['SOHN — Conrad'],
           afterSubtitle: [<Icon12Fire key="afterSubtitle" />],
           multiline: [undefined, true],
         },
         {
-          mode: ['primary', 'secondary', 'tertiary'],
+          size: ['s', 'm', 'l', 'xl'],
           children: ['Кто может оставлять записи на моей странице'],
           before: [<Icon28UserCircleFillBlue key="user" />],
           beforeTitle: [<Icon16LockOutline key="beforeTitle" />],
diff --git a/packages/vkui/src/components/Header/Header.module.css b/packages/vkui/src/components/Header/Header.module.css
index 8db401f919..e6987c15f5 100644
--- a/packages/vkui/src/components/Header/Header.module.css
+++ b/packages/vkui/src/components/Header/Header.module.css
@@ -75,8 +75,7 @@
   color: var(--vkui--color_text_secondary);
 }
 
-.modeSecondary:not(.pi):not(.withSubtitle) .main,
-.modeTertiary .main {
+.sizeS .contentIn {
   color: var(--vkui--color_text_secondary);
 }
 
@@ -86,18 +85,10 @@
   flex-shrink: 0;
 }
 
-.modePrimary .indicator {
-  color: var(--vkui--color_text_subhead);
-}
-
 .host:not(.pi) .indicator {
   align-self: center;
 }
 
-.modeSecondary .indicator {
-  margin-inline-start: 8px;
-}
-
 .after {
   display: flex;
   white-space: nowrap;
@@ -109,6 +100,22 @@
   margin-inline-start: 12px;
 }
 
+.sizeS .after.after > * {
+  margin-block-start: 11px;
+}
+
+.sizeM .after.after > * {
+  margin-block-start: 13px;
+}
+
+.sizeL .after.after > * {
+  margin-block-start: 14px;
+}
+
+.sizeXl .after.after > * {
+  margin-block-start: 16px;
+}
+
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .after > :global(.vkuiIcon) {
   position: relative;
@@ -116,17 +123,37 @@
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-.after > :global(.vkuiIcon--24) {
+.sizeS .after > :global(.vkuiIcon--24) {
+  margin-block: 9px 5px;
+}
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.sizeM .after > :global(.vkuiIcon--24) {
+  margin-block: 10px 5px;
+}
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.sizeL .after > :global(.vkuiIcon--24) {
   margin-block: 11px 5px;
 }
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.sizeXl .after > :global(.vkuiIcon--24) {
+  margin-block: 12px 5px;
+}
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-.after > :global(.vkuiIcon--16) {
+.sizeS .after > :global(.vkuiIcon--16) {
+  margin-block: 13px 9px;
+}
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.sizeM .after > :global(.vkuiIcon--16) {
+  margin-block: 14px 9px;
+}
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.sizeL .after > :global(.vkuiIcon--16) {
   margin-block: 15px 9px;
 }
-
-.modePrimary {
-  padding-block: 3px 1px;
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.sizeXl .after > :global(.vkuiIcon--16) {
+  margin-block: 16px 9px;
 }
 
 .content {
@@ -137,27 +164,10 @@
   margin-block-end: 8px;
 }
 
-.modeTertiary .content {
-  margin-block-start: 15px;
-}
-
-.modeTertiary .content:last-child {
-  margin-block-end: 9px;
-}
-
 .subtitleWrapper {
   margin-block-end: 7px;
 }
 
-/* Компенсируем 1 пиксель из-за паддинга в .modePrimary */
-.modePrimary .subtitleWrapper {
-  margin-block-end: 6px;
-}
-
-.large .content {
-  margin-block: 10px 6px;
-}
-
 /**
  * CMP:
  * Group
@@ -184,20 +194,20 @@
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalGroup--mode-card) > .host:not(.modeTertiary):first-child,
+:global(.vkuiInternalGroup--mode-card) > .host:not(.sizeM):first-child,
 :global(.vkuiInternalGroup--mode-card)
   > :global(.vkuiInternalTappable):first-child
-  > .host:not(.modeTertiary) {
+  > .host:not(.sizeM) {
   margin-block-start: calc(-1 * var(--vkui--spacing_size_xs));
 }
 
 @media (--sizeX-regular) {
   /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
   :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none)
-    > .host:not(.modeTertiary):first-child,
+    > .host:not(.sizeM):first-child,
   :global(.vkuiInternalGroup--sizeX-none.vkuiInternalGroup--mode-none)
     > :global(.vkuiInternalTappable):first-child
-    > .host:not(.modeTertiary) {
+    > .host:not(.sizeM) {
     margin-block-start: calc(-1 * var(--vkui--spacing_size_xs));
   }
 }
diff --git a/packages/vkui/src/components/Header/Header.stories.tsx b/packages/vkui/src/components/Header/Header.stories.tsx
index 9e13e0efbd..a911dc5888 100644
--- a/packages/vkui/src/components/Header/Header.stories.tsx
+++ b/packages/vkui/src/components/Header/Header.stories.tsx
@@ -33,7 +33,7 @@ const story: Meta<HeaderProps> = {
       requiredIcons: ['Icon12Fire'],
     }),
     after: createFieldWithPresets({
-      iconSizes: [],
+      iconSizes: ['16', '24'],
       additionalPresets: {
         Link: <Link>Показать все</Link>,
       },
@@ -114,6 +114,6 @@ export const WithAllFeatures: Story = {
     beforeSubtitle: 'Icon12Tag',
     afterSubtitle: 'Icon12Fire',
     subtitle: 'SOHN — Conrad',
-    after: <Link>Показать все</Link>,
+    after: 'Link',
   },
 };
diff --git a/packages/vkui/src/components/Header/Header.test.tsx b/packages/vkui/src/components/Header/Header.test.tsx
index 4cc8a9cfb7..1fd300fbb9 100644
--- a/packages/vkui/src/components/Header/Header.test.tsx
+++ b/packages/vkui/src/components/Header/Header.test.tsx
@@ -9,100 +9,72 @@ const getTypographyTagNameByText = (text: string) => screen.getByText(text).tagN
 describe('Header', () => {
   baselineComponent((props) => <Header {...props}>Title</Header>);
 
-  it('[typography] HeaderContent is h2 on ANDROID regardless of mode and size', () => {
+  it('[typography] HeaderContent is h2 on ANDROID regardless size', () => {
     render(
       <ConfigProvider platform="android">
-        <Header mode="primary">Русский</Header>
-        <Header mode="secondary">English</Header>
-        <Header mode="tertiary">Espanõl</Header>
-        <Header mode="primary" size="l">
-          Français
-        </Header>
-        <Header mode="secondary" size="l">
-          Deutsch
-        </Header>
-        <Header mode="tertiary" size="l">
-          中國人
-        </Header>
+        <Header size="s">Русский</Header>
+        <Header size="m">English</Header>
+        <Header size="l">Espanõl</Header>
+        <Header size="xl">Français</Header>
       </ConfigProvider>,
     );
     expect(screen.getByText('Русский').parentElement?.tagName.toLowerCase()).toMatch('h2');
     expect(screen.getByText('English').parentElement?.tagName.toLowerCase()).toMatch('h2');
     expect(screen.getByText('Espanõl').parentElement?.tagName.toLowerCase()).toMatch('h2');
     expect(screen.getByText('Français').parentElement?.tagName.toLowerCase()).toMatch('h2');
-    expect(screen.getByText('Deutsch').parentElement?.tagName.toLowerCase()).toMatch('h2');
-    expect(screen.getByText('中國人').parentElement?.tagName.toLowerCase()).toMatch('h2');
   });
 
-  it('[typography] HeaderContent is h2 on IOS regardless of mode and size', () => {
+  it('[typography] HeaderContent is h2 on IOS regardless of size', () => {
     render(
       <ConfigProvider platform="ios">
-        <Header mode="primary">Русский</Header>
-        <Header mode="secondary">English</Header>
-        <Header mode="tertiary">Espanõl</Header>
-        <Header mode="primary" size="l">
-          Français
-        </Header>
-        <Header mode="secondary" size="l">
-          Deutsch
-        </Header>
-        <Header mode="tertiary" size="l">
-          中國人
-        </Header>
+        <Header size="s">Русский</Header>
+        <Header size="m">English</Header>
+        <Header size="l">Espanõl</Header>
+        <Header size="xl">Français</Header>
       </ConfigProvider>,
     );
     expect(screen.getByText('Русский').parentElement?.tagName.toLowerCase()).toMatch('h2');
     expect(screen.getByText('English').parentElement?.tagName.toLowerCase()).toMatch('h2');
     expect(screen.getByText('Espanõl').parentElement?.tagName.toLowerCase()).toMatch('h2');
     expect(screen.getByText('Français').parentElement?.tagName.toLowerCase()).toMatch('h2');
-    expect(screen.getByText('Deutsch').parentElement?.tagName.toLowerCase()).toMatch('h2');
-    expect(screen.getByText('中國人').parentElement?.tagName.toLowerCase()).toMatch('h2');
   });
 
-  it('[typography] HeaderContent is h2 on VKCOM regardless of mode and size', () => {
+  it('[typography] HeaderContent is h2 on VKCOM regardless of size', () => {
     render(
       <ConfigProvider platform="vkcom">
-        <Header mode="primary">Русский</Header>
-        <Header mode="secondary">English</Header>
-        <Header mode="tertiary">Espanõl</Header>
-        <Header mode="primary" size="l">
-          Français
-        </Header>
-        <Header mode="secondary" size="l">
-          Deutsch
-        </Header>
-        <Header mode="tertiary" size="l">
-          中國人
-        </Header>
+        <Header size="s">Русский</Header>
+        <Header size="m">English</Header>
+        <Header size="l">Espanõl</Header>
+        <Header size="xl">Français</Header>
       </ConfigProvider>,
     );
     expect(screen.getByText('Русский').parentElement?.tagName.toLowerCase()).toMatch('h2');
     expect(screen.getByText('English').parentElement?.tagName.toLowerCase()).toMatch('h2');
     expect(screen.getByText('Espanõl').parentElement?.tagName.toLowerCase()).toMatch('h2');
     expect(screen.getByText('Français').parentElement?.tagName.toLowerCase()).toMatch('h2');
-    expect(screen.getByText('Deutsch').parentElement?.tagName.toLowerCase()).toMatch('h2');
-    expect(screen.getByText('中國人').parentElement?.tagName.toLowerCase()).toMatch('h2');
   });
 
-  it('[typography] HeaderSubtitle is span by default regardless of mode', () => {
+  it('[typography] HeaderSubtitle is span by default regardless of size', () => {
     render(
       <Fragment>
-        <Header mode="primary" subtitle="Русский" />
-        <Header mode="secondary" subtitle="English" />
-        <Header mode="tertiary" subtitle="Espanõl" />
+        <Header size="s" subtitle="Русский" />
+        <Header size="m" subtitle="English" />
+        <Header size="l" subtitle="Espanõl" />
+        <Header size="xl" subtitle="Français" />
       </Fragment>,
     );
     expect(getTypographyTagNameByText('Русский')).toMatch('span');
     expect(getTypographyTagNameByText('English')).toMatch('span');
     expect(getTypographyTagNameByText('Espanõl')).toMatch('span');
+    expect(getTypographyTagNameByText('Français')).toMatch('span');
   });
 
-  it('[typography] HeaderSubtitle is h3 with subtitleComponent prop regardless of mode', () => {
+  it('[typography] HeaderSubtitle is h3 with subtitleComponent prop regardless of size', () => {
     render(
       <Fragment>
-        <Header mode="primary" subtitle="Русский" subtitleComponent="h3" />
-        <Header mode="secondary" subtitle="English" subtitleComponent="h3" />
-        <Header mode="tertiary" subtitle="Espanõl" subtitleComponent="h3" />
+        <Header size="s" subtitle="Русский" subtitleComponent="h3" />
+        <Header size="s" subtitle="English" subtitleComponent="h3" />
+        <Header size="s" subtitle="Espanõl" subtitleComponent="h3" />
       </Fragment>,
     );
     expect(getTypographyTagNameByText('Русский')).toMatch('h3');
diff --git a/packages/vkui/src/components/Header/Header.tsx b/packages/vkui/src/components/Header/Header.tsx
index bbf73c2a03..91a55a51c1 100644
--- a/packages/vkui/src/components/Header/Header.tsx
+++ b/packages/vkui/src/components/Header/Header.tsx
@@ -2,9 +2,9 @@
 
 import * as React from 'react';
 import { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';
-import { usePlatform } from '../../hooks/usePlatform';
 import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
+import { Caption } from '../Typography/Caption/Caption';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { Headline } from '../Typography/Headline/Headline';
 import { Paragraph } from '../Typography/Paragraph/Paragraph';
@@ -13,8 +13,7 @@ import { Title } from '../Typography/Title/Title';
 import styles from './Header.module.css';
 
 export interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement>, HasComponent {
-  mode?: 'primary' | 'secondary' | 'tertiary';
-  size?: 'm' | 'l';
+  size?: 's' | 'm' | 'l' | 'xl';
   subtitle?: React.ReactNode;
   /* Позволяет задать тип элемента в который будет обёрнут subtitle */
   subtitleComponent?: React.ElementType;
@@ -49,54 +48,48 @@ export interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement>, Has
   afterSubtitle?: React.ReactNode;
 }
 
-type HeaderContentProps = Pick<HeaderProps, 'children' | 'mode' | 'size' | 'className'> &
-  HasComponent;
-
-const HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {
-  const isLarge = size === 'l';
+const sizeClassNames: Record<Exclude<HeaderProps['size'], undefined>, string> = {
+  s: styles.sizeS,
+  m: styles.sizeM,
+  l: styles.sizeL,
+  xl: styles.sizeXl,
+};
 
-  const platform = usePlatform();
-  if (platform === 'ios') {
-    switch (mode) {
-      case 'primary':
-        return isLarge ? (
-          <Title level="2" weight="2" {...restProps} />
-        ) : (
-          <Title weight="1" level="3" {...restProps} />
-        );
-      case 'secondary':
-        return <Footnote weight="1" caps {...restProps} />;
-      case 'tertiary':
-        return <Title weight="1" level="3" {...restProps} />;
-    }
-  }
+type HeaderContentProps = Pick<HeaderProps, 'children' | 'size' | 'className'> & HasComponent;
 
-  switch (mode) {
-    case 'primary':
-      return isLarge ? (
-        <Title level="2" weight="2" {...restProps} />
-      ) : (
-        <Headline weight="2" {...restProps} />
-      );
-    case 'secondary':
-      return <Footnote weight="1" caps {...restProps} />;
-    case 'tertiary':
-      return <Headline weight="2" {...restProps} />;
+const HeaderContent = ({ size, ...restProps }: HeaderContentProps) => {
+  switch (size) {
+    case 'xl':
+      return <Title level="2" weight="1" {...restProps} />;
+    case 'l':
+      return <Title level="3" weight="1" {...restProps} />;
+    case 'm':
+      return <Headline {...restProps} />;
+    case 's':
+      return <Footnote caps weight="1" {...restProps} />;
   }
 
   return null;
 };
 
-const stylesMode = {
-  primary: styles.modePrimary,
-  secondary: styles.modeSecondary,
-  tertiary: styles.modeTertiary,
+const Subtitle: React.FC<
+  Pick<HeaderProps, 'multiline' | 'subtitleComponent' | 'size'> & { children: React.ReactNode }
+> = ({ subtitleComponent, children, multiline, size }) => {
+  const SubtitleElement = size === 'm' || size === 's' ? Caption : Subhead;
+  return (
+    <SubtitleElement
+      className={classNames(styles.subtitle, multiline && styles.contentMultiline)}
+      Component={subtitleComponent}
+    >
+      {children}
+    </SubtitleElement>
+  );
 };
+
 /**
  * @see https://vkcom.github.io/VKUI/#/Header
  */
 export const Header = ({
-  mode = 'primary',
   size = 'm',
   Component = 'h2',
   children,
@@ -117,10 +110,8 @@ export const Header = ({
       {...restProps}
       baseClassName={classNames(
         styles.host,
-        stylesMode[mode],
-        size === 'l' && styles.large,
+        sizeClassNames[size],
         isPrimitiveReactNode(indicator) && styles.pi,
-        hasReactNode(subtitle) && styles.withSubtitle,
       )}
     >
       {before && (
@@ -129,7 +120,7 @@ export const Header = ({
         </div>
       )}
       <div className={styles.main}>
-        <HeaderContent className={styles.content} Component={Component} mode={mode} size={size}>
+        <HeaderContent className={styles.content} Component={Component} size={size}>
           {beforeTitle && <div className={styles.contentBefore}>{beforeTitle}</div>}
           <span className={classNames(styles.contentIn, multiline && styles.contentMultiline)}>
             {children}
@@ -144,12 +135,9 @@ export const Header = ({
         {hasReactNode(subtitle) && (
           <div className={styles.subtitleWrapper}>
             {beforeSubtitle && <div className={styles.subtitleBefore}>{beforeSubtitle}</div>}
-            <Subhead
-              className={classNames(styles.subtitle, multiline && styles.contentMultiline)}
-              Component={subtitleComponent}
-            >
+            <Subtitle multiline={multiline} subtitleComponent={subtitleComponent} size={size}>
               {subtitle}
-            </Subhead>
+            </Subtitle>
             {afterSubtitle && <div className={styles.subtitleAfter}>{afterSubtitle}</div>}
           </div>
         )}
diff --git a/packages/vkui/src/components/Header/Readme.md b/packages/vkui/src/components/Header/Readme.md
index 6100a43b40..27a978259a 100644
--- a/packages/vkui/src/components/Header/Readme.md
+++ b/packages/vkui/src/components/Header/Readme.md
@@ -8,7 +8,6 @@ const Example = () => {
         <PanelHeader>Header</PanelHeader>
         <Group>
           <Header
-            mode="primary"
             after={
               <Link>
                 Показать все
@@ -19,7 +18,6 @@ const Example = () => {
             Плейлисты
           </Header>
           <Header
-            mode="primary"
             after={
               <Link>
                 Показать все
@@ -32,7 +30,6 @@ const Example = () => {
             Плейлисты
           </Header>
           <Header
-            mode="primary"
             after={
               <Link>
                 Показать все
@@ -44,7 +41,6 @@ const Example = () => {
             Плейлисты
           </Header>
           <Header
-            mode="primary"
             after={
               <Link>
                 Показать все
@@ -62,7 +58,7 @@ const Example = () => {
         </Group>
         <Group>
           <Header
-            mode="secondary"
+            size="s"
             after={
               <Link>
                 Показать все
@@ -73,7 +69,7 @@ const Example = () => {
             Приглашения
           </Header>
           <Header
-            mode="secondary"
+            size="s"
             after={
               <Link>
                 Показать все
@@ -85,7 +81,7 @@ const Example = () => {
             Фотографии
           </Header>
           <Header
-            mode="secondary"
+            size="s"
             after={
               <Link>
                 Показать все
@@ -102,27 +98,20 @@ const Example = () => {
           </Header>
         </Group>
         <Group>
-          <Header mode="tertiary">Важные</Header>
+          <Header>Важные</Header>
         </Group>
         <Group>
-          <Header mode="primary" multiline>
-            Кто может писать мне личные сообщения
-          </Header>
-          <Header mode="tertiary" multiline>
-            Кто может комментировать мои записи
-          </Header>
-          <Header mode="secondary" multiline>
+          <Header multiline>Кто может писать мне личные сообщения</Header>
+          <Header multiline>Кто может комментировать мои записи</Header>
+          <Header size="s" multiline>
             Кто может оставлять записи на моей странице
           </Header>
         </Group>
         <Group>
-          <Header mode="primary" size="l">
-            Большой заголовок
-          </Header>
+          <Header size="xl">Большой заголовок</Header>
         </Group>
         <Group>
           <Header
-            mode="primary"
             before={<Icon28UserCircleFillBlue />}
             beforeTitle={<Icon16LockOutline />}
             afterTitle={<Icon16UnlockOutline />}
@@ -145,7 +134,6 @@ const Example = () => {
             Плейлисты
           </Header>
           <Header
-            mode="primary"
             before={<Icon28UserCircleFillBlue />}
             beforeTitle={<Icon16LockOutline />}
             afterTitle={<Icon16UnlockOutline />}
diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-dark-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-dark-1-snap.png
index 5c660976b0..4932086574 100644
--- a/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7666611c5e1ed49bf707a02f2bf706c9658951b1f4f7ca58049fb011683bd3e6
-size 284775
+oid sha256:13d32950ea5ca621af75e544f4f25e9e943aa672c3eb8870ef5c77e23aa141a6
+size 319983
diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-light-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-light-1-snap.png
index 01ad7d4cf8..f8d8325e42 100644
--- a/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/Header/__image_snapshots__/header-android-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:eb5335a42e781e3a86417aec2d384533f3918743c814dfbb30ab6b26b8d0f836
-size 284521
+oid sha256:74421cd0eff434954ceec9c507994db071feafc477490140640318179e17f90f
+size 314077
diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-dark-1-snap.png
index 77af64cfdb..f048a12fd8 100644
--- a/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e3307493705844b7b913476e68efcc08e6b1f3e61fd1f2414d194d1b445a6bd4
-size 293619
+oid sha256:1be92baaac827f1bf869ba8780c2a9e1e9d55dd813f1ca88a977733ae98c5dfc
+size 332742
diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-light-1-snap.png
index 7948125cc0..0052162e82 100644
--- a/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/Header/__image_snapshots__/header-ios-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9bd28b3b341ccef41702330979df36e95fb9beab2a1f59555906db8ebbf12d8f
-size 289627
+oid sha256:70da983c6191df86528172efc60b1633424da2b995b215bf40be6346cbbb6637
+size 322640
diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-dark-1-snap.png
index 7d05155744..376665bfa7 100644
--- a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:67567d1fe5fe4eb126416104d6c75948b6d1e65a42e40f8e9497494e72924905
-size 284171
+oid sha256:307f15f256f784f9e4c9386f22407def49bc5ffe3c7681132c3175da716ecf28
+size 321398
diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-light-1-snap.png
index 2e5418fd88..a1304ad5cf 100644
--- a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:25cbae3283fd68a7462557fa2094e9e160a73d48403230dd817e119b33e60757
-size 285365
+oid sha256:e71554a82354cafb628d3c04551d2b6213e658a128e770a977f360f8cc610d5a
+size 320580
diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-dark-1-snap.png
index 6e8f3a7365..8a72cec0ab 100644
--- a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-dark-1-snap.png
+++ b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:efa4bd21a6c016bf8a1c3e81047a00d00bef01c07e600416f344a8f2de0d644d
-size 430643
+oid sha256:c206ad95ed6cc3cf059c1aea5bb104bdf465eab9c5c94e3b22025eb6ec147762
+size 490679
diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-light-1-snap.png
index 1ed7b35fc0..b705af33ec 100644
--- a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-light-1-snap.png
+++ b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-firefox-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3004589e0249214126cf18400e889b34d4d45ef728435df0ac91b9820f489393
-size 421708
+oid sha256:c8e9ec1f3828020db11adbe3bc4d86a3dbaa8557627ea24248b94bfc8def4429
+size 472909
diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-dark-1-snap.png
index 6d0358445a..dbaf73e872 100644
--- a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:43c36d15d38833955b9ef890cf045d41c476a20666c8b7c659cb6a3b6821c35a
-size 288625
+oid sha256:e50373cabfd5547fdc93367d56cfbc2ab7306f197e06dd367551131ee9cd80b4
+size 326202
diff --git a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-light-1-snap.png
index 3afb8541de..bd2067b7c7 100644
--- a/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/Header/__image_snapshots__/header-vkcom-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d0661f223011437cf3a7254c5202c23d5fe10a4659ad2f96f2f218d3d2a12bb3
-size 290380
+oid sha256:fd56e6b97e8bef41cbda78ece41c3cbe9f5b20808f40251b566d7fe642e0322d
+size 325764
diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.stories.tsx b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.stories.tsx
index c98caf7159..3b67eaaec7 100644
--- a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.stories.tsx
+++ b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.stories.tsx
@@ -69,7 +69,7 @@ export const Playground: Story = {
   },
   decorators: [
     (Component, context) => (
-      <Group header={<Header mode="secondary">Недавние</Header>}>
+      <Group header={<Header size="s">Недавние</Header>}>
         <Component args={context.args} />
       </Group>
     ),
diff --git a/packages/vkui/src/components/HorizontalScroll/Readme.md b/packages/vkui/src/components/HorizontalScroll/Readme.md
index 5d5f3c3ab6..e9014d102d 100644
--- a/packages/vkui/src/components/HorizontalScroll/Readme.md
+++ b/packages/vkui/src/components/HorizontalScroll/Readme.md
@@ -17,7 +17,7 @@ const HorizontalScrollExample = () => {
     <View activePanel={activePanel}>
       <Panel id="basic-case">
         <PanelHeader>HorizontalScroll</PanelHeader>
-        <Group header={<Header mode="secondary">Недавние</Header>}>
+        <Group header={<Header size="s">Недавние</Header>}>
           <HorizontalScroll
             showArrows
             getScrollToLeft={(i) => i - 120}
@@ -34,7 +34,7 @@ const HorizontalScrollExample = () => {
           </HorizontalScroll>
         </Group>
 
-        <Group header={<Header mode="secondary">Общие друзья</Header>}>
+        <Group header={<Header size="s">Общие друзья</Header>}>
           <HorizontalScroll
             showArrows
             arrowSize="m"
@@ -57,7 +57,7 @@ const HorizontalScrollExample = () => {
           </HorizontalScroll>
         </Group>
 
-        <Group header={<Header mode="secondary">С кнопкой "Показать всё"</Header>}>
+        <Group header={<Header size="s">С кнопкой "Показать всё"</Header>}>
           <CellButton
             before={<Icon16MoreHorizontal aria-hidden />}
             onClick={() => setActivePanel('show-more-case')}
diff --git a/packages/vkui/src/components/Image/Readme.md b/packages/vkui/src/components/Image/Readme.md
index a532a70c5b..9036bea13d 100644
--- a/packages/vkui/src/components/Image/Readme.md
+++ b/packages/vkui/src/components/Image/Readme.md
@@ -3,7 +3,7 @@
 ```jsx
 const Default = () => {
   return (
-    <Group header={<Header mode="secondary">По умолчанию</Header>}>
+    <Group header={<Header size="s">По умолчанию</Header>}>
       <SimpleCell
         before={<Image src={getAvatarUrl('app_shorm_online')} alt="Приложение шторм онлайн" />}
         description="Ролевая"
@@ -19,9 +19,7 @@ const Responsive = () => {
   return (
     <Group
       header={
-        <Header mode="secondary">
-          Изображения без фиксированных размеров с сохранением пропорций
-        </Header>
+        <Header size="s">Изображения без фиксированных размеров с сохранением пропорций</Header>
       }
     >
       <Flex margin="auto" direction="column" gap="m">
@@ -47,7 +45,7 @@ const OthersFeatures = () => {
   const [overlay, setOverlay] = React.useState();
 
   return (
-    <Group header={<Header mode="secondary">Другие возможности</Header>}>
+    <Group header={<Header size="s">Другие возможности</Header>}>
       <ImagePropsForm
         onBorderRadiusChange={setBorderRadius}
         onBadgeChange={setBadge}
diff --git a/packages/vkui/src/components/InfoRow/InfoRow.stories.tsx b/packages/vkui/src/components/InfoRow/InfoRow.stories.tsx
index 7eec4f7092..7052fc57b6 100644
--- a/packages/vkui/src/components/InfoRow/InfoRow.stories.tsx
+++ b/packages/vkui/src/components/InfoRow/InfoRow.stories.tsx
@@ -27,7 +27,7 @@ export const Example: Story = {
   ...Playground,
   decorators: [
     (Component) => (
-      <Group header={<Header mode="secondary">Информация о пользователе</Header>}>
+      <Group header={<Header size="s">Информация о пользователе</Header>}>
         <SimpleCell multiline>
           <Component args={{ header: 'Дата рождения', children: '30 января 1993' }} />
         </SimpleCell>
diff --git a/packages/vkui/src/components/InfoRow/Readme.md b/packages/vkui/src/components/InfoRow/Readme.md
index 2be48761f4..01c762b1ab 100644
--- a/packages/vkui/src/components/InfoRow/Readme.md
+++ b/packages/vkui/src/components/InfoRow/Readme.md
@@ -10,7 +10,7 @@
         <InfoRow header="Общий бюджет">3000 р.</InfoRow>
       </SimpleCell>
     </Group>
-    <Group header={<Header mode="secondary">Информация о пользователе</Header>}>
+    <Group header={<Header size="s">Информация о пользователе</Header>}>
       <SimpleCell multiline>
         <InfoRow header="Дата рождения">30 января 1993</InfoRow>
       </SimpleCell>
diff --git a/packages/vkui/src/components/ModalPage/ModalPage.stories.tsx b/packages/vkui/src/components/ModalPage/ModalPage.stories.tsx
index c0eed6b737..0ba0a98aec 100644
--- a/packages/vkui/src/components/ModalPage/ModalPage.stories.tsx
+++ b/packages/vkui/src/components/ModalPage/ModalPage.stories.tsx
@@ -133,7 +133,7 @@ export const FullscreenModalPage: Story = {
           </Gradient>
           <Group
             header={
-              <Header mode="secondary" indicator="25">
+              <Header size="s" indicator="25">
                 Друзья
               </Header>
             }
diff --git a/packages/vkui/src/components/ModalRoot/Readme.md b/packages/vkui/src/components/ModalRoot/Readme.md
index bf14879ef4..c503f48ab2 100644
--- a/packages/vkui/src/components/ModalRoot/Readme.md
+++ b/packages/vkui/src/components/ModalRoot/Readme.md
@@ -147,7 +147,7 @@ const App = () => {
       </Gradient>
       <Group
         header={
-          <Header mode="secondary" indicator="25">
+          <Header size="s" indicator="25">
             Друзья
           </Header>
         }
diff --git a/packages/vkui/src/components/PanelSpinner/Readme.md b/packages/vkui/src/components/PanelSpinner/Readme.md
index edbcc4117d..532b5e911c 100644
--- a/packages/vkui/src/components/PanelSpinner/Readme.md
+++ b/packages/vkui/src/components/PanelSpinner/Readme.md
@@ -15,7 +15,7 @@ import { PanelSpinner } from '@vkontakte/vkui';
   {loading ? (
     <PanelSpinner>Панель загружается, пожалуйста, подождите...</PanelSpinner>
   ) : (
-    <Group header={<Header mode="secondary">Информация</Header>}>...</Group>
+    <Group header={<Header size="s">Информация</Header>}>...</Group>
   )}
 </Panel>;
 ```
diff --git a/packages/vkui/src/components/Separator/Readme.md b/packages/vkui/src/components/Separator/Readme.md
index 575d352d48..ee8eca2d13 100644
--- a/packages/vkui/src/components/Separator/Readme.md
+++ b/packages/vkui/src/components/Separator/Readme.md
@@ -12,7 +12,7 @@
   <Panel id="separator">
     <PanelHeader>Separator</PanelHeader>
 
-    <Group header={<Header mode="secondary">direction="horizontal"</Header>}>
+    <Group header={<Header size="s">direction="horizontal"</Header>}>
       <Cell before={<Icon28Notifications />}>Уведомления</Cell>
       <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
 
@@ -21,7 +21,7 @@
       <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
       <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
     </Group>
-    <Group header={<Header mode="secondary">direction="vertical"</Header>}>
+    <Group header={<Header size="s">direction="vertical"</Header>}>
       <Flex margin="auto">
         <Link>Новости</Link>
         <Separator direction="vertical" size="xl" />
diff --git a/packages/vkui/src/components/SimpleCell/Readme.md b/packages/vkui/src/components/SimpleCell/Readme.md
index 66ca6726fe..4b10104258 100644
--- a/packages/vkui/src/components/SimpleCell/Readme.md
+++ b/packages/vkui/src/components/SimpleCell/Readme.md
@@ -6,7 +6,7 @@ const Example = () => {
     <View activePanel={activePanel}>
       <Panel id="list">
         <PanelHeader>SimpleCell</PanelHeader>
-        <Group header={<Header mode="secondary">Меню</Header>}>
+        <Group header={<Header size="s">Меню</Header>}>
           <SimpleCell
             onClick={() => setActivePanel('nothing')}
             chevron="auto"
@@ -29,7 +29,7 @@ const Example = () => {
             Основные
           </SimpleCell>
         </Group>
-        <Group header={<Header mode="secondary">Настройки</Header>}>
+        <Group header={<Header size="s">Настройки</Header>}>
           <SimpleCell Component="label" after={<Switch defaultChecked />}>
             Сжимать фотографии
           </SimpleCell>
@@ -37,7 +37,7 @@ const Example = () => {
             Сжимать видео
           </SimpleCell>
         </Group>
-        <Group header={<Header mode="secondary">Настройки системы</Header>}>
+        <Group header={<Header size="s">Настройки системы</Header>}>
           <SimpleCell onClick={() => setActivePanel('nothing')} chevron="auto" indicator="Русский">
             Язык
           </SimpleCell>
@@ -49,7 +49,7 @@ const Example = () => {
             Геолокация
           </SimpleCell>
         </Group>
-        <Group header={<Header mode="secondary">Список диалогов</Header>}>
+        <Group header={<Header size="s">Список диалогов</Header>}>
           <SimpleCell
             before={<Avatar size={40} src={getAvatarUrl('user_xyz')} />}
             after={
@@ -73,7 +73,7 @@ const Example = () => {
             Artur Stambultsian
           </SimpleCell>
         </Group>
-        <Group header={<Header mode="secondary">Список друзей</Header>}>
+        <Group header={<Header size="s">Список друзей</Header>}>
           <SimpleCell
             before={<Avatar size={48} src={getAvatarUrl('user_xyz')} />}
             badgeAfterTitle={<Icon12Verified />}
diff --git a/packages/vkui/src/components/Spacing/Readme.md b/packages/vkui/src/components/Spacing/Readme.md
index 07389081e8..14ee378f8b 100644
--- a/packages/vkui/src/components/Spacing/Readme.md
+++ b/packages/vkui/src/components/Spacing/Readme.md
@@ -14,7 +14,7 @@
   <Panel id="separator">
     <PanelHeader>Spacing</PanelHeader>
 
-    <Group header={<Header mode="secondary">Default Spacing (empty, 8px)</Header>}>
+    <Group header={<Header size="s">Default Spacing (empty, 8px)</Header>}>
       <SimpleCell before={<Icon28Notifications />}>Уведомления</SimpleCell>
       <SimpleCell before={<Icon28BlockOutline />}>Не беспокоить</SimpleCell>
 
@@ -24,7 +24,7 @@
       <SimpleCell before={<Icon28SlidersOutline />}>Основные</SimpleCell>
     </Group>
 
-    <Group header={<Header mode="secondary">Spacing 16px</Header>}>
+    <Group header={<Header size="s">Spacing 16px</Header>}>
       <SimpleCell before={<Icon28Notifications />}>Уведомления</SimpleCell>
       <SimpleCell before={<Icon28BlockOutline />}>Не беспокоить</SimpleCell>
 
diff --git a/packages/vkui/src/components/Touch/Readme.md b/packages/vkui/src/components/Touch/Readme.md
index fa078b445c..8d5607c7d7 100644
--- a/packages/vkui/src/components/Touch/Readme.md
+++ b/packages/vkui/src/components/Touch/Readme.md
@@ -65,7 +65,7 @@ const Example = () => {
     <View activePanel="gallery">
       <Panel id="gallery">
         <PanelHeader>Touch</PanelHeader>
-        <Group header={<Header mode="secondary">Перетащите кружок</Header>}>
+        <Group header={<Header size="s">Перетащите кружок</Header>}>
           <div
             style={{
               ...containerStyle,
diff --git a/packages/vkui/src/components/UsersStack/Readme.md b/packages/vkui/src/components/UsersStack/Readme.md
index 29abef1b74..5d5f122e40 100644
--- a/packages/vkui/src/components/UsersStack/Readme.md
+++ b/packages/vkui/src/components/UsersStack/Readme.md
@@ -62,7 +62,7 @@ const App = () => {
           </Div>
         </Group>
 
-        <Group header={<Header mode="secondary">Вертикальный режим</Header>}>
+        <Group header={<Header size="s">Вертикальный режим</Header>}>
           <Div>
             <UsersStack
               photos={[
@@ -102,7 +102,7 @@ const App = () => {
           </Flex>
         </Group>
 
-        <Group header={<Header mode="secondary">Кликабельные с тултипом</Header>}>
+        <Group header={<Header size="s">Кликабельные с тултипом</Header>}>
           <Div>
             <UsersStack
               photos={[

From ebb46a5feaae5cf4eef30dc00bcf0c284bc2465c Mon Sep 17 00:00:00 2001
From: EldarMuhamethanov <61377022+EldarMuhamethanov@users.noreply.github.com>
Date: Thu, 31 Oct 2024 18:20:20 +0300
Subject: [PATCH 05/19] fix(CustomSelect): refactor logic of empty value
 (#7822)

* fix(CustomSelect): refactor logic of reset value

* fix(CustomSelect): fix types

* feat(Select, CustomSelect, NativeSelect): remove event from onChange callback

* fix(Select, CustomSelect, NativeSelect): add codemods

* fix: fix error

Co-authored-by: Andrey Medvedev <andrey.medvedev@vk.team>

---------

Co-authored-by: Andrey Medvedev <andrey.medvedev@vk.team>
---
 .../v7/common/warnSelectOnChange.ts           |  16 +++
 .../src/transforms/v7/custom-select.ts        |   2 +
 .../src/transforms/v7/native-select.ts        |  21 ++++
 packages/codemods/src/transforms/v7/select.ts |   2 +
 packages/vkui/src/components/Avatar/Readme.md |  10 +-
 packages/vkui/src/components/Button/Readme.md |   8 +-
 .../vkui/src/components/ButtonGroup/Readme.md |   8 +-
 .../vkui/src/components/Calendar/Readme.md    |   4 +-
 .../CalendarHeader/CalendarHeader.tsx         |   8 +-
 .../src/components/CalendarRange/Readme.md    |   2 +-
 .../components/CalendarTime/CalendarTime.tsx  |   8 +-
 .../CustomSelect/CustomSelect.test.tsx        |  68 ++++++-----
 .../components/CustomSelect/CustomSelect.tsx  | 109 +++++++++++-------
 .../src/components/CustomSelect/Readme.md     |  22 ++--
 .../vkui/src/components/DateInput/Readme.md   |   2 +-
 .../src/components/DateRangeInput/Readme.md   |   2 +-
 packages/vkui/src/components/Flex/Readme.md   |  22 +---
 .../vkui/src/components/FormItem/Readme.md    |  21 ++--
 packages/vkui/src/components/Image/Readme.md  |   8 +-
 packages/vkui/src/components/Input/Readme.md  |   6 +-
 .../NativeSelect/NativeSelect.test.tsx        |   6 +-
 .../components/NativeSelect/NativeSelect.tsx  |  59 +++++++++-
 .../src/components/NativeSelect/Readme.md     |  73 ++++++++++--
 .../vkui/src/components/Pagination/Readme.md  |   4 +-
 packages/vkui/src/components/Select/Readme.md |   4 +
 .../vkui/src/components/SimpleGrid/Readme.md  |  20 +---
 packages/vkui/src/components/Slider/Readme.md |   6 +-
 .../components/SubnavigationButton/Readme.md  |   8 +-
 packages/vkui/src/components/Tabs/Readme.md   |   4 +-
 .../vkui/src/components/ToolButton/Readme.md  |   8 +-
 30 files changed, 350 insertions(+), 191 deletions(-)
 create mode 100644 packages/codemods/src/transforms/v7/common/warnSelectOnChange.ts
 create mode 100644 packages/codemods/src/transforms/v7/native-select.ts

diff --git a/packages/codemods/src/transforms/v7/common/warnSelectOnChange.ts b/packages/codemods/src/transforms/v7/common/warnSelectOnChange.ts
new file mode 100644
index 0000000000..3840180ddc
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/common/warnSelectOnChange.ts
@@ -0,0 +1,16 @@
+import { API, Collection } from 'jscodeshift';
+import { report } from '../../../report';
+
+export const warnSelectOnChange = (api: API, source: Collection, componentName: string) => {
+  const j = api.jscodeshift;
+  source
+    .find(j.JSXOpeningElement, { name: { name: componentName } })
+    .find(j.JSXAttribute)
+    .filter((attr) => attr.node.name.name === 'onChange')
+    .forEach(() => {
+      report(
+        api,
+        `Manual changes required for ${componentName}'s "onChange" prop: need to change event argument to select value`,
+      );
+    });
+};
diff --git a/packages/codemods/src/transforms/v7/custom-select.ts b/packages/codemods/src/transforms/v7/custom-select.ts
index 6a34a10823..da8beb446d 100644
--- a/packages/codemods/src/transforms/v7/custom-select.ts
+++ b/packages/codemods/src/transforms/v7/custom-select.ts
@@ -1,6 +1,7 @@
 import { API, FileInfo } from 'jscodeshift';
 import { getImportInfo, removeProps } from '../../codemod-helpers';
 import { JSCodeShiftOptions } from '../../types';
+import { warnSelectOnChange } from './common/warnSelectOnChange';
 
 export const parser = 'tsx';
 
@@ -19,6 +20,7 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi
   removeProps(j, api, source, localName, PROPS_TO_REMOVE, () => {
     return `need to remove props ${PROPS_TO_REMOVE.join(', ')}`;
   });
+  warnSelectOnChange(api, source, localName);
 
   return source.toSource();
 }
diff --git a/packages/codemods/src/transforms/v7/native-select.ts b/packages/codemods/src/transforms/v7/native-select.ts
new file mode 100644
index 0000000000..56ff172599
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/native-select.ts
@@ -0,0 +1,21 @@
+import { API, FileInfo } from 'jscodeshift';
+import { getImportInfo } from '../../codemod-helpers';
+import { JSCodeShiftOptions } from '../../types';
+import { warnSelectOnChange } from './common/warnSelectOnChange';
+
+export const parser = 'tsx';
+
+export default function transformer(file: FileInfo, api: API, options: JSCodeShiftOptions) {
+  const { alias } = options;
+  const j = api.jscodeshift;
+  const source = j(file.source);
+  const { localName } = getImportInfo(j, file, 'NativeSelect', alias);
+
+  if (!localName) {
+    return source.toSource();
+  }
+
+  warnSelectOnChange(api, source, localName);
+
+  return source.toSource();
+}
diff --git a/packages/codemods/src/transforms/v7/select.ts b/packages/codemods/src/transforms/v7/select.ts
index de1d59af25..1fcb3bef5f 100644
--- a/packages/codemods/src/transforms/v7/select.ts
+++ b/packages/codemods/src/transforms/v7/select.ts
@@ -1,6 +1,7 @@
 import { API, FileInfo } from 'jscodeshift';
 import { getImportInfo, removeProps } from '../../codemod-helpers';
 import { JSCodeShiftOptions } from '../../types';
+import { warnSelectOnChange } from './common/warnSelectOnChange';
 
 export const parser = 'tsx';
 
@@ -19,6 +20,7 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi
   removeProps(j, api, source, localName, PROPS_TO_REMOVE, () => {
     return `need to remove props ${PROPS_TO_REMOVE.join(', ')}`;
   });
+  warnSelectOnChange(api, source, localName);
 
   return source.toSource();
 }
diff --git a/packages/vkui/src/components/Avatar/Readme.md b/packages/vkui/src/components/Avatar/Readme.md
index 465ee4f8a8..5185a87150 100644
--- a/packages/vkui/src/components/Avatar/Readme.md
+++ b/packages/vkui/src/components/Avatar/Readme.md
@@ -173,7 +173,7 @@ const AvatarPropsForm = ({
             { label: 'blue', value: 'blue' },
           ]}
           value={gradientColor}
-          onChange={(e) => setGradientColor(e.target.value)}
+          onChange={setGradientColor}
         />
       </FormItem>
 
@@ -196,7 +196,7 @@ const AvatarPropsForm = ({
               { label: 'preset="online-mobile"', value: 'online-mobile' },
             ]}
             value={badge}
-            onChange={(e) => setBadge(e.target.value)}
+            onChange={setBadge}
           />
         </FormItem>
         <FormItem top="Avatar.Badge[background]">
@@ -208,7 +208,7 @@ const AvatarPropsForm = ({
             ]}
             value={badgeBackground}
             disabled={badge !== 'children'}
-            onChange={(e) => setBadgeBackground(e.target.value)}
+            onChange={setBadgeBackground}
           />
         </FormItem>
       </FormLayoutGroup>
@@ -231,7 +231,7 @@ const AvatarPropsForm = ({
             ]}
             value={overlayTheme}
             disabled={!overlay}
-            onChange={(e) => setOverlayTheme(e.target.value)}
+            onChange={setOverlayTheme}
           />
         </FormItem>
         <FormItem top="Avatar.Overlay[visibility]">
@@ -243,7 +243,7 @@ const AvatarPropsForm = ({
             ]}
             value={overlayVisibility}
             disabled={!overlay}
-            onChange={(e) => setOverlayVisibility(e.target.value)}
+            onChange={setOverlayVisibility}
           />
         </FormItem>
       </FormLayoutGroup>
diff --git a/packages/vkui/src/components/Button/Readme.md b/packages/vkui/src/components/Button/Readme.md
index 3188f5d5fc..0c03463f64 100644
--- a/packages/vkui/src/components/Button/Readme.md
+++ b/packages/vkui/src/components/Button/Readme.md
@@ -71,7 +71,7 @@ const Example = () => {
         <FormItem top="appearance">
           <Select
             value={appearance}
-            onChange={(e) => setAppearance(e.target.value)}
+            onChange={setAppearance}
             options={[
               { label: 'accent', value: 'accent' },
               { label: 'positive', value: 'positive' },
@@ -85,7 +85,7 @@ const Example = () => {
         <FormItem top="size">
           <Select
             value={size}
-            onChange={(e) => setSize(e.target.value)}
+            onChange={setSize}
             options={[
               { label: 's', value: 's' },
               { label: 'm', value: 'm' },
@@ -96,7 +96,7 @@ const Example = () => {
         <FormItem top="align">
           <Select
             value={align}
-            onChange={(e) => setAlign(e.target.value)}
+            onChange={setAlign}
             options={[
               { label: 'left', value: 'left' },
               { label: 'center', value: 'center' },
@@ -107,7 +107,7 @@ const Example = () => {
         <FormItem top="sizeY">
           <Select
             value={sizeY}
-            onChange={(e) => setSizeY(e.target.value)}
+            onChange={setSizeY}
             options={[
               { label: 'compact', value: 'compact' },
               {
diff --git a/packages/vkui/src/components/ButtonGroup/Readme.md b/packages/vkui/src/components/ButtonGroup/Readme.md
index 04ef8cd919..619937b0d2 100644
--- a/packages/vkui/src/components/ButtonGroup/Readme.md
+++ b/packages/vkui/src/components/ButtonGroup/Readme.md
@@ -32,7 +32,7 @@ const ButtonGroupPropsForm = ({
         <FormItem top="mode">
           <Select
             value={mode}
-            onChange={(e) => handleChange('mode', e.target.value)}
+            onChange={(newValue) => handleChange('mode', newValue)}
             options={[
               { label: 'vertical', value: 'vertical' },
               { label: 'horizontal', value: 'horizontal' },
@@ -43,7 +43,7 @@ const ButtonGroupPropsForm = ({
       <FormItem top="gap">
         <Select
           value={gap}
-          onChange={(e) => handleChange('gap', e.target.value)}
+          onChange={(newValue) => handleChange('gap', newValue)}
           options={[
             { label: 'none', value: 'none' },
             { label: 'space', value: 'space' },
@@ -55,7 +55,7 @@ const ButtonGroupPropsForm = ({
       <FormItem top="align">
         <Select
           value={align}
-          onChange={(e) => handleChange('align', e.target.value)}
+          onChange={(newValue) => handleChange('align', newValue)}
           options={[
             { label: 'left', value: 'left' },
             { label: 'center', value: 'center' },
@@ -402,7 +402,7 @@ const Example = () => {
         <FormItem top="sizeY">
           <Select
             value={sizeY}
-            onChange={(e) => setSizeY(e.target.value)}
+            onChange={setSizeY}
             options={[
               { label: 'compact', value: 'compact' },
               { label: 'regular', value: 'regular' },
diff --git a/packages/vkui/src/components/Calendar/Readme.md b/packages/vkui/src/components/Calendar/Readme.md
index 423f0e6715..0b0ad69404 100644
--- a/packages/vkui/src/components/Calendar/Readme.md
+++ b/packages/vkui/src/components/Calendar/Readme.md
@@ -60,7 +60,7 @@ const Example = () => {
         <Select
           style={{ width: 100 }}
           value={locale}
-          onChange={(e) => setLocale(e.target.value)}
+          onChange={setLocale}
           options={[
             {
               label: 'ru',
@@ -85,7 +85,7 @@ const Example = () => {
         <Select
           style={{ width: 100 }}
           value={size}
-          onChange={(e) => setSize(e.target.value)}
+          onChange={setSize}
           options={[
             {
               label: 's',
diff --git a/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx b/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx
index 5d26a0dc45..29d0e67426 100644
--- a/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx
+++ b/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx
@@ -12,7 +12,7 @@ import { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, getMonths, getYears } from '../../l
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
-import { CustomSelect } from '../CustomSelect/CustomSelect';
+import { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { Tappable } from '../Tappable/Tappable';
 import { Paragraph } from '../Typography/Paragraph/Paragraph';
@@ -80,13 +80,11 @@ export const CalendarHeader = ({
 }: CalendarHeaderProps): React.ReactNode => {
   const { locale } = useConfigProvider();
   const onMonthsChange = React.useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) =>
-      onChange(setMonth(viewDate, Number(event.target.value))),
+    (newValue: SelectProps['value']) => onChange(setMonth(viewDate, Number(newValue))),
     [onChange, viewDate],
   );
   const onYearChange = React.useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) =>
-      onChange(setYear(viewDate, Number(event.target.value))),
+    (newValue: SelectProps['value']) => onChange(setYear(viewDate, Number(newValue))),
     [onChange, viewDate],
   );
 
diff --git a/packages/vkui/src/components/CalendarRange/Readme.md b/packages/vkui/src/components/CalendarRange/Readme.md
index b4c96ce412..4faf95dad3 100644
--- a/packages/vkui/src/components/CalendarRange/Readme.md
+++ b/packages/vkui/src/components/CalendarRange/Readme.md
@@ -37,7 +37,7 @@ const Example = () => {
         <Select
           style={{ width: 100 }}
           value={locale}
-          onChange={(e) => setLocale(e.target.value)}
+          onChange={setLocale}
           options={[
             {
               label: 'ru',
diff --git a/packages/vkui/src/components/CalendarTime/CalendarTime.tsx b/packages/vkui/src/components/CalendarTime/CalendarTime.tsx
index adf19ee50d..c18cacb12a 100644
--- a/packages/vkui/src/components/CalendarTime/CalendarTime.tsx
+++ b/packages/vkui/src/components/CalendarTime/CalendarTime.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { setHours, setMinutes } from 'date-fns';
 import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
 import { Button } from '../Button/Button';
-import { CustomSelect } from '../CustomSelect/CustomSelect';
+import { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';
 import styles from './CalendarTime.module.css';
 
 export interface CalendarTimeProps {
@@ -55,13 +55,11 @@ export const CalendarTime = ({
     : minutes;
 
   const onHoursChange = React.useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) =>
-      onChange?.(setHours(value, Number(event.target.value))),
+    (newValue: SelectProps['value']) => onChange?.(setHours(value, Number(newValue))),
     [onChange, value],
   );
   const onMinutesChange = React.useCallback(
-    (event: React.ChangeEvent<HTMLSelectElement>) =>
-      onChange?.(setMinutes(value, Number(event.target.value))),
+    (newValue: SelectProps['value']) => onChange?.(setMinutes(value, Number(newValue))),
     [onChange, value],
   );
 
diff --git a/packages/vkui/src/components/CustomSelect/CustomSelect.test.tsx b/packages/vkui/src/components/CustomSelect/CustomSelect.test.tsx
index edc3889d98..761abe77b1 100644
--- a/packages/vkui/src/components/CustomSelect/CustomSelect.test.tsx
+++ b/packages/vkui/src/components/CustomSelect/CustomSelect.test.tsx
@@ -31,16 +31,15 @@ const getCustomSelectValue = () => screen.getByTestId('labelTextTestId').textCon
 const CustomSelectControlled = ({
   options,
   initialValue,
-  onChangeStub,
+  onChange,
   ...restProps
-}: Omit<SelectProps, 'value' | 'onChange'> & {
+}: Omit<SelectProps, 'value'> & {
   initialValue?: string;
-  onChangeStub?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
 }) => {
-  const [value, setValue] = React.useState(initialValue);
-  const handleChange: React.ChangeEventHandler<HTMLSelectElement> = (event) => {
-    setValue(event.target.value);
-    onChangeStub?.(event);
+  const [value, setValue] = React.useState<SelectProps['value']>(initialValue);
+  const handleChange: SelectProps['onChange'] = (newValue) => {
+    setValue(newValue);
+    onChange?.(newValue);
   };
   return <CustomSelect {...restProps} options={options} value={value} onChange={handleChange} />;
 };
@@ -122,7 +121,7 @@ describe('CustomSelect', () => {
 
   it('works correctly as controlled component', () => {
     const SelectController = () => {
-      const [value, setValue] = useState(0);
+      const [value, setValue] = useState<SelectProps['value']>(0);
       const options = [
         { value: 0, label: 'Mike' },
         { value: 1, label: 'Josh' },
@@ -132,7 +131,7 @@ describe('CustomSelect', () => {
           labelTextTestId="labelTextTestId"
           options={options}
           value={value}
-          onChange={(e) => setValue(Number(e.target.value))}
+          onChange={setValue}
         />
       );
     };
@@ -582,7 +581,7 @@ describe('CustomSelect', () => {
     expect(onChange).toHaveBeenCalledTimes(0);
   });
 
-  it('clear value externally with empty string', () => {
+  it('clear value externally with empty value', () => {
     const onChange = jest.fn();
 
     const { rerender } = render(
@@ -607,7 +606,7 @@ describe('CustomSelect', () => {
           { value: 1, label: 'Josh' },
         ]}
         onChange={onChange}
-        value=""
+        value={null}
       />,
     );
 
@@ -679,7 +678,7 @@ describe('CustomSelect', () => {
         ]}
         allowClearButton
         onChange={onChange}
-        value=""
+        value={null}
       />,
     );
 
@@ -691,7 +690,7 @@ describe('CustomSelect', () => {
   });
 
   it('(uncontrolled): calls onChange when click on unselected option and does not call when click on selected ', async () => {
-    const onChange = jest.fn((event: React.ChangeEvent<HTMLSelectElement>) => event.target.value);
+    const onChange = jest.fn();
 
     render(
       <CustomSelect
@@ -716,7 +715,7 @@ describe('CustomSelect', () => {
     fireEvent.click(unselectedOption);
 
     expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveReturnedWith('1');
+    expect(onChange).toHaveBeenCalledWith('1');
 
     fireEvent.click(screen.getByTestId('labelTextTestId'));
 
@@ -725,12 +724,12 @@ describe('CustomSelect', () => {
     fireEvent.click(selectedOption);
 
     expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveReturnedWith('1');
+    expect(onChange).toHaveBeenCalledWith('1');
   });
 
   it('(controlled): calls onChange expected amount of times after clearing component and clicking on option without updating controlled prop value', async () => {
     // мы намеренно проверяем кейсы где при нажатии на опцию или на кнопку очистки value проп не меняется
-    const onChange = jest.fn((event: React.ChangeEvent<HTMLSelectElement>) => event.target.value);
+    const onChange = jest.fn();
 
     const { rerender } = render(
       <CustomSelect
@@ -762,7 +761,7 @@ describe('CustomSelect', () => {
     fireEvent.click(unselectedOptionFirstClick);
 
     expect(onChange).toHaveBeenCalledTimes(2);
-    expect(onChange).toHaveReturnedWith('1');
+    expect(onChange).toHaveBeenCalledWith('1');
 
     // clear input through prop
     rerender(
@@ -774,7 +773,7 @@ describe('CustomSelect', () => {
         ]}
         allowClearButton
         onChange={onChange}
-        value=""
+        value={null}
       />,
     );
 
@@ -800,7 +799,7 @@ describe('CustomSelect', () => {
   });
 
   it('(controlled): calls onChange when click on unselected option without value change', async () => {
-    const onChange = jest.fn((event: React.ChangeEvent<HTMLSelectElement>) => event.target.value);
+    const onChange = jest.fn();
 
     render(
       <CustomSelect
@@ -829,7 +828,7 @@ describe('CustomSelect', () => {
     fireEvent.click(unselectedOptionFirstClick);
 
     expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveReturnedWith('1');
+    expect(onChange).toHaveBeenCalledWith('1');
 
     // второй клик по не выбранной опции без изменения value
     // нужно проверить потому что при первом клике внутреннее value CustomSelect (nativeSelectValue) изменилось
@@ -845,7 +844,7 @@ describe('CustomSelect', () => {
     fireEvent.click(unselectedOptionSecondClick);
 
     expect(onChange).toHaveBeenCalledTimes(2);
-    expect(onChange).toHaveReturnedWith('1');
+    expect(onChange).toHaveBeenCalledWith('1');
 
     // третий клик уже по выбранной опции (соответствующей value переданному в CustomSelect)
     // onChange не должен вызываться.
@@ -858,13 +857,11 @@ describe('CustomSelect', () => {
     fireEvent.click(selectedOptionThirdClick);
 
     expect(onChange).toHaveBeenCalledTimes(2);
-    expect(onChange).toHaveReturnedWith('1');
+    expect(onChange).toHaveBeenCalledWith('1');
   });
 
   it('(controlled): does not call onChange on already selected', async () => {
-    const onChangeStub = jest.fn((event: React.ChangeEvent<HTMLSelectElement>) => {
-      return event.target.value;
-    });
+    const onChangeStub = jest.fn();
 
     render(
       <CustomSelectControlled
@@ -874,7 +871,7 @@ describe('CustomSelect', () => {
           { value: 0, label: 'Mike' },
           { value: 1, label: 'Josh' },
         ]}
-        onChangeStub={onChangeStub}
+        onChange={onChangeStub}
       />,
     );
 
@@ -893,7 +890,7 @@ describe('CustomSelect', () => {
 
     // onChange должен вызываться
     expect(onChangeStub).toHaveBeenCalledTimes(1);
-    expect(onChangeStub).toHaveReturnedWith('1');
+    expect(onChangeStub).toHaveBeenCalledWith('1');
 
     // второй клик по выбранной опции
     fireEvent.click(screen.getByTestId('labelTextTestId'));
@@ -903,7 +900,7 @@ describe('CustomSelect', () => {
 
     // onChange не должен вызываться
     expect(onChangeStub).toHaveBeenCalledTimes(1);
-    expect(onChangeStub).toHaveReturnedWith('1');
+    expect(onChangeStub).toHaveBeenCalledWith('1');
 
     // третий клик по не выбранной опции
     fireEvent.click(screen.getByTestId('labelTextTestId'));
@@ -917,7 +914,7 @@ describe('CustomSelect', () => {
 
     // onChange должен быть вызван
     expect(onChangeStub).toHaveBeenCalledTimes(2);
-    expect(onChangeStub).toHaveReturnedWith('0');
+    expect(onChangeStub).toHaveBeenCalledWith('0');
 
     // четвертый клик по выбранной опции
     fireEvent.click(screen.getByTestId('labelTextTestId'));
@@ -927,11 +924,11 @@ describe('CustomSelect', () => {
 
     // onChange не должен вызываться
     expect(onChangeStub).toHaveBeenCalledTimes(2);
-    expect(onChangeStub).toHaveReturnedWith('0');
+    expect(onChangeStub).toHaveBeenCalledWith('0');
   });
 
   it('(controlled): does call onChange on option click when prop value is empty and value is not changing', async () => {
-    const onChange = jest.fn((event: React.ChangeEvent<HTMLSelectElement>) => event.target.value);
+    const onChange = jest.fn();
 
     render(
       <CustomSelect
@@ -943,7 +940,7 @@ describe('CustomSelect', () => {
         ]}
         allowClearButton
         onChange={onChange}
-        value=""
+        value={null}
       />,
     );
 
@@ -961,7 +958,7 @@ describe('CustomSelect', () => {
 
     // onChange должен быть вызван
     expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveReturnedWith('0');
+    expect(onChange).toHaveBeenCalledWith('0');
 
     // второй клик по другой опции без изменения value
     fireEvent.click(screen.getByTestId('inputTestId'));
@@ -974,7 +971,7 @@ describe('CustomSelect', () => {
 
     // onChange должен быть вызван
     expect(onChange).toHaveBeenCalledTimes(2);
-    expect(onChange).toHaveReturnedWith('1');
+    expect(onChange).toHaveBeenCalledWith('1');
 
     // третий клик по той же опции что и в предыдущий раз
     fireEvent.click(screen.getByTestId('inputTestId'));
@@ -987,7 +984,7 @@ describe('CustomSelect', () => {
 
     // onChange должен быть вызван
     expect(onChange).toHaveBeenCalledTimes(3);
-    expect(onChange).toHaveReturnedWith('0');
+    expect(onChange).toHaveBeenCalledWith('0');
   });
 
   it('accepts options with extended option type and Typescript does not throw', () => {
@@ -1104,6 +1101,7 @@ describe('CustomSelect', () => {
         ]}
         placeholder="Не выбрано"
         allowClearButton
+        value={null}
       />,
     );
 
diff --git a/packages/vkui/src/components/CustomSelect/CustomSelect.tsx b/packages/vkui/src/components/CustomSelect/CustomSelect.tsx
index d41a6bf91b..455194201e 100644
--- a/packages/vkui/src/components/CustomSelect/CustomSelect.tsx
+++ b/packages/vkui/src/components/CustomSelect/CustomSelect.tsx
@@ -20,7 +20,16 @@ import {
 } from '../CustomSelectOption/CustomSelectOption';
 import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
 import type { FormFieldProps } from '../FormField/FormField';
-import type { NativeSelectProps } from '../NativeSelect/NativeSelect';
+import {
+  NOT_SELECTED,
+  remapFromNativeValueToSelectValue,
+  remapFromSelectValueToNativeValue,
+} from '../NativeSelect/NativeSelect';
+import type {
+  NativeSelectProps,
+  NativeSelectValue,
+  SelectValue,
+} from '../NativeSelect/NativeSelect';
 import type { SelectType } from '../Select/Select';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
@@ -76,6 +85,24 @@ const checkOptionsValueType = <T extends CustomSelectOptionInterface>(options: T
   }
 };
 
+const checkMixControlledAndUncontrolledState = (
+  oldIsControlled: boolean,
+  newIsControlled: boolean,
+) => {
+  if (!oldIsControlled && newIsControlled) {
+    warn(
+      `Похоже, что компонент был переведен из состояния Uncontrolled в Controlled. Пожалуйста, не делайте так. Если вам нужно отобразить невыбранное состояние компонента, используйте value=null вместо undefined`,
+      'error',
+    );
+  }
+  if (oldIsControlled && !newIsControlled) {
+    warn(
+      `Похоже, что компонент был переведен из состояния Controlled в Uncontrolled. Пожалуйста, не делайте так. Если вам нужно отобразить невыбранное состояние компонента, используйте value=null вместо undefined`,
+      'error',
+    );
+  }
+};
+
 function defaultRenderOptionFn<T extends CustomSelectOptionInterface>({
   option,
   ...props
@@ -90,9 +117,8 @@ const handleOptionDown: MouseEventHandler = (e: React.MouseEvent<HTMLElement>) =
 function findSelectedIndex<T extends CustomSelectOptionInterface>(
   options: T[] = [],
   value: SelectValue,
-  withClear: boolean,
 ) {
-  if (withClear && value === '') {
+  if (value === NOT_SELECTED.CUSTOM) {
     return -1;
   }
   return (
@@ -113,10 +139,8 @@ const filter = <T extends CustomSelectOptionInterface>(
     : options;
 };
 
-type SelectValue = React.SelectHTMLAttributes<HTMLSelectElement>['value'];
-
 export interface CustomSelectOptionInterface {
-  value: SelectValue;
+  value: Exclude<SelectValue, null>;
   label: React.ReactElement | string;
   disabled?: boolean;
   [index: string]: any;
@@ -283,25 +307,40 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
   const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<number | undefined>(-1);
   const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);
   const [inputValue, setInputValue] = React.useState('');
-  const [nativeSelectValue, setNativeSelectValue] = React.useState(
-    () => props.value ?? defaultValue ?? (allowClearButton ? '' : undefined),
-  );
+  const [nativeSelectValue, setNativeSelectValue] = React.useState<NativeSelectValue>(() => {
+    if (props.value !== undefined) {
+      return remapFromSelectValueToNativeValue(props.value);
+    }
+    if (defaultValue !== undefined) {
+      return remapFromSelectValueToNativeValue(defaultValue);
+    }
+    return NOT_SELECTED.NATIVE;
+  });
 
   const [popperPlacement, setPopperPlacement] = React.useState<Placement>(popupDirection);
   const [options, setOptions] = React.useState(optionsProp);
   const [selectedOptionIndex, setSelectedOptionIndex] = React.useState<number | undefined>(
-    findSelectedIndex(optionsProp, props.value ?? defaultValue, allowClearButton),
+    findSelectedIndex(optionsProp, props.value ?? defaultValue ?? null),
   );
 
   React.useEffect(() => {
-    setIsControlledOutside(props.value !== undefined);
-    setNativeSelectValue((nativeSelectValue) => props.value ?? nativeSelectValue);
+    setIsControlledOutside((oldIsControlled) => {
+      const newIsControlled = props.value !== undefined;
+      checkMixControlledAndUncontrolledState(oldIsControlled, newIsControlled);
+      return newIsControlled;
+    });
+    setNativeSelectValue((nativeSelectValue) => {
+      if (props.value !== undefined) {
+        return remapFromSelectValueToNativeValue(props.value);
+      }
+      return nativeSelectValue;
+    });
   }, [props.value]);
 
   useIsomorphicLayoutEffect(() => {
     if (
       options.some(({ value }) => nativeSelectValue === value) ||
-      (allowClearButton && nativeSelectValue === '')
+      (allowClearButton && nativeSelectValue === NOT_SELECTED.NATIVE)
     ) {
       const event = new Event('change', { bubbles: true });
 
@@ -432,8 +471,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
   const selectOption = React.useCallback(
     (index: number) => {
       const item = options[index];
-
-      setNativeSelectValue(item?.value);
+      setNativeSelectValue(item?.value ?? NOT_SELECTED.NATIVE);
       close();
 
       const shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync =
@@ -506,7 +544,10 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
 
   React.useEffect(
     function updateOptionsAndSelectedOptionIndex() {
-      const value = props.value ?? nativeSelectValue ?? defaultValue;
+      const value =
+        props.value !== undefined
+          ? props.value
+          : remapFromNativeValueToSelectValue(nativeSelectValue);
 
       const options =
         searchable && inputValue !== undefined
@@ -514,32 +555,20 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
           : optionsProp;
 
       setOptions(options);
-      setSelectedOptionIndex(findSelectedIndex(options, value, allowClearButton));
+      setSelectedOptionIndex(findSelectedIndex(options, value));
     },
-    [
-      filterFn,
-      inputValue,
-      nativeSelectValue,
-      optionsProp,
-      defaultValue,
-      props.value,
-      searchable,
-      allowClearButton,
-    ],
+    [filterFn, inputValue, nativeSelectValue, optionsProp, defaultValue, props.value, searchable],
   );
 
   const onNativeSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
-    const newSelectedOptionIndex = findSelectedIndex(
-      options,
-      e.currentTarget.value,
-      allowClearButton,
-    );
+    const remappedNativeValue = remapFromNativeValueToSelectValue(e.currentTarget.value);
+    const newSelectedOptionIndex = findSelectedIndex(options, remappedNativeValue);
 
     if (selectedOptionIndex !== newSelectedOptionIndex) {
       if (!isControlledOutside) {
         setSelectedOptionIndex(newSelectedOptionIndex);
       }
-      onChange?.(e);
+      onChange?.(remappedNativeValue);
     }
   };
 
@@ -549,11 +578,11 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
 
       const options = filter(optionsProp, e.target.value, filterFn);
       setOptions(options);
-      setSelectedOptionIndex(findSelectedIndex(options, nativeSelectValue, allowClearButton));
+      setSelectedOptionIndex(findSelectedIndex(options, nativeSelectValue));
 
       setInputValue(e.target.value);
     },
-    [filterFn, nativeSelectValue, onInputChangeProp, optionsProp, allowClearButton],
+    [filterFn, nativeSelectValue, onInputChangeProp, optionsProp],
   );
 
   const areOptionsShown = React.useCallback(() => {
@@ -711,8 +740,8 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
 
   const selectInputRef = useExternRef(getSelectInputRef);
 
-  const controlledValueSet = isControlledOutside && props.value !== '';
-  const uncontrolledValueSet = !isControlledOutside && nativeSelectValue !== '';
+  const controlledValueSet = isControlledOutside && props.value !== NOT_SELECTED.CUSTOM;
+  const uncontrolledValueSet = !isControlledOutside && nativeSelectValue !== NOT_SELECTED.NATIVE;
   const clearButtonShown =
     allowClearButton && !opened && (controlledValueSet || uncontrolledValueSet);
 
@@ -725,7 +754,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
       <ClearButton
         className={iconProp === undefined ? styles.clearIcon : undefined}
         onClick={function clearSelectState() {
-          setNativeSelectValue('');
+          setNativeSelectValue(NOT_SELECTED.NATIVE);
           setInputValue('');
           selectInputRef.current && selectInputRef.current.focus();
         }}
@@ -872,7 +901,9 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
         data-testid={nativeSelectTestId}
         required={required}
       >
-        {allowClearButton && <option key="" value="" />}
+        {(allowClearButton || nativeSelectValue === NOT_SELECTED.NATIVE) && (
+          <option key={NOT_SELECTED.NATIVE} value={NOT_SELECTED.NATIVE} />
+        )}
         {optionsProp.map((item) => (
           <option key={`${item.value}`} value={item.value} />
         ))}
diff --git a/packages/vkui/src/components/CustomSelect/Readme.md b/packages/vkui/src/components/CustomSelect/Readme.md
index bf34e5aecb..2170d6cac6 100644
--- a/packages/vkui/src/components/CustomSelect/Readme.md
+++ b/packages/vkui/src/components/CustomSelect/Readme.md
@@ -1,5 +1,9 @@
 Кастомизируемое поле выбора значения из раскрывающегося списка. Используется внутри [Select](#!/Select).
 
+> Важно: для отображения невыбранного состояния нужно использовать `value=null` вместо `undefined`.
+>
+> `undefined` ипользуется только для неконтролируемого компонента.
+
 ## Цифровая доступность (a11y)
 
 Следуйте рекомендациям из раздела "Цифровая доступность" компонента [Select](#!/Select).
@@ -30,6 +34,8 @@ const getUsers = (usersArray) =>
     description: user.screen_name,
   }));
 
+const users = [...getUsers(getRandomUsers(10))];
+
 const Example = () => {
   const selectTypes = [
     {
@@ -46,9 +52,7 @@ const Example = () => {
     },
   ];
 
-  const [selectType, setSelectType] = React.useState(undefined);
-
-  const users = [...getUsers(getRandomUsers(10))];
+  const [selectType, setSelectType] = React.useState(null);
 
   return (
     <Div>
@@ -64,7 +68,7 @@ const Example = () => {
             id="administrator-select-id"
             placeholder="Не выбран"
             options={users}
-            selectType={selectType}
+            selectType={selectType || 'default'}
             allowClearButton
           />
         </FormItem>
@@ -79,7 +83,7 @@ const Example = () => {
             value={selectType}
             placeholder="Не задан"
             options={selectTypes}
-            onChange={(e) => setSelectType(e.target.value)}
+            onChange={(newType) => setSelectType(newType)}
             renderOption={({ option, ...restProps }) => (
               <CustomSelectOption {...restProps} description={`"${option.value}"`} />
             )}
@@ -115,7 +119,7 @@ const Example = () => {
           id="administrator-select-id-3"
           placeholder="Не выбран"
           options={users}
-          selectType={selectType}
+          selectType={selectType || 'default'}
         />
       </FormItem>
 
@@ -176,12 +180,12 @@ const CustomSearchLogicSelect = ({ id }) => {
     return options;
   };
 
-  const onCustomSearchChange = (e) => {
-    if (e.target.value === '0') {
+  const onCustomSearchChange = (newValue) => {
+    if (newValue === '0') {
       setNewUsers([...newUsers, { label: query, value: query }]);
       setValue(query);
     } else {
-      setValue(e.target.value);
+      setValue(newValue);
     }
     setQuery('');
   };
diff --git a/packages/vkui/src/components/DateInput/Readme.md b/packages/vkui/src/components/DateInput/Readme.md
index 79eefe7ab8..e4789f2992 100644
--- a/packages/vkui/src/components/DateInput/Readme.md
+++ b/packages/vkui/src/components/DateInput/Readme.md
@@ -61,7 +61,7 @@ const Example = () => {
         <Select
           style={{ width: 100 }}
           value={locale}
-          onChange={(e) => setLocale(e.target.value)}
+          onChange={setLocale}
           options={[
             {
               label: 'ru',
diff --git a/packages/vkui/src/components/DateRangeInput/Readme.md b/packages/vkui/src/components/DateRangeInput/Readme.md
index 6d21ab56af..fc7d9438f1 100644
--- a/packages/vkui/src/components/DateRangeInput/Readme.md
+++ b/packages/vkui/src/components/DateRangeInput/Readme.md
@@ -48,7 +48,7 @@ const Example = () => {
         <Select
           style={{ width: 100 }}
           value={locale}
-          onChange={(e) => setLocale(e.target.value)}
+          onChange={setLocale}
           options={[
             {
               label: 'ru',
diff --git a/packages/vkui/src/components/Flex/Readme.md b/packages/vkui/src/components/Flex/Readme.md
index 3ab825bfe5..99cf680d56 100644
--- a/packages/vkui/src/components/Flex/Readme.md
+++ b/packages/vkui/src/components/Flex/Readme.md
@@ -142,35 +142,23 @@ const Example = () => {
         </Checkbox>
         {!complexGap && (
           <FormItem top="gap">
-            <Select
-              value={gap}
-              onChange={(e) => setGap(e.target.value)}
-              options={GapSelectValues}
-            />
+            <Select value={gap} onChange={setGap} options={GapSelectValues} />
           </FormItem>
         )}
         {complexGap && (
           <FormItem top="row gap">
-            <Select
-              value={rowGap}
-              onChange={(e) => setRowGap(e.target.value)}
-              options={GapSelectValues}
-            />
+            <Select value={rowGap} onChange={setRowGap} options={GapSelectValues} />
           </FormItem>
         )}
         {complexGap && (
           <FormItem top="column gap">
-            <Select
-              value={columnGap}
-              onChange={(e) => setColumnGap(e.target.value)}
-              options={GapSelectValues}
-            />
+            <Select value={columnGap} onChange={setColumnGap} options={GapSelectValues} />
           </FormItem>
         )}
         <FormItem top="align">
           <Select
             value={align}
-            onChange={(e) => setAlign(e.target.value)}
+            onChange={setAlign}
             placeholder="Не выбрано"
             options={[
               { label: 'start', value: 'start' },
@@ -185,7 +173,7 @@ const Example = () => {
         <FormItem top="justify">
           <Select
             value={justify}
-            onChange={(e) => setJustify(e.target.value)}
+            onChange={setJustify}
             placeholder="Не выбрано"
             options={[
               { label: 'start', value: 'start' },
diff --git a/packages/vkui/src/components/FormItem/Readme.md b/packages/vkui/src/components/FormItem/Readme.md
index d181e0dca9..91472ac797 100644
--- a/packages/vkui/src/components/FormItem/Readme.md
+++ b/packages/vkui/src/components/FormItem/Readme.md
@@ -94,18 +94,23 @@ const Example = () => {
     }
   };
 
+  const setStateActionsMap = {
+    email: updateEmail,
+    purpose: setPurpose,
+    about: setAbout,
+  };
+
   const onChange = (e) => {
     const { name, value } = e.currentTarget;
-
-    const setStateAction = {
-      email: updateEmail,
-      purpose: setPurpose,
-      about: setAbout,
-    }[name];
-
+    const setStateAction = setStateActionsMap[name];
     setStateAction && setStateAction(value);
   };
 
+  const onSelectChange = (name, newValue) => {
+    const setStateAction = setStateActionsMap[name];
+    setStateAction && setStateAction(newValue);
+  };
+
   const onShowPatronymic = () => setShowPatronymic(true);
 
   const onRemove = () => setShowPatronymic(false);
@@ -223,7 +228,7 @@ const Example = () => {
               <Select
                 id="purpose-of-the-trip-select-id"
                 placeholder="Выберите цель поездки"
-                onChange={onChange}
+                onChange={(newValue) => onSelectChange('purpose', newValue)}
                 value={purpose}
                 name="purpose"
                 required
diff --git a/packages/vkui/src/components/Image/Readme.md b/packages/vkui/src/components/Image/Readme.md
index 9036bea13d..df3765bd25 100644
--- a/packages/vkui/src/components/Image/Readme.md
+++ b/packages/vkui/src/components/Image/Readme.md
@@ -141,7 +141,7 @@ const ImagePropsForm = ({ onBorderRadiusChange, onBadgeChange, onOverlayChange }
             { label: 'l', value: 'l' },
           ]}
           value={borderRadius}
-          onChange={(e) => setBorderRadius(e.target.value)}
+          onChange={setBorderRadius}
         />
       </FormItem>
 
@@ -160,7 +160,7 @@ const ImagePropsForm = ({ onBorderRadiusChange, onBadgeChange, onOverlayChange }
             ]}
             value={badgeBackground}
             disabled={!badge}
-            onChange={(e) => setBadgeBackground(e.target.value)}
+            onChange={setBadgeBackground}
           />
         </FormItem>
       </FormLayoutGroup>
@@ -183,7 +183,7 @@ const ImagePropsForm = ({ onBorderRadiusChange, onBadgeChange, onOverlayChange }
             ]}
             value={overlayTheme}
             disabled={!overlay}
-            onChange={(e) => setOverlayTheme(e.target.value)}
+            onChange={setOverlayTheme}
           />
         </FormItem>
         <FormItem top="Image.Overlay[visibility]">
@@ -195,7 +195,7 @@ const ImagePropsForm = ({ onBorderRadiusChange, onBadgeChange, onOverlayChange }
             ]}
             value={overlayVisibility}
             disabled={!overlay}
-            onChange={(e) => setOverlayVisibility(e.target.value)}
+            onChange={setOverlayVisibility}
           />
         </FormItem>
       </FormLayoutGroup>
diff --git a/packages/vkui/src/components/Input/Readme.md b/packages/vkui/src/components/Input/Readme.md
index ed946911dc..7db9295b5a 100644
--- a/packages/vkui/src/components/Input/Readme.md
+++ b/packages/vkui/src/components/Input/Readme.md
@@ -12,7 +12,7 @@ const ExampleBase = ({ formItemStatus }) => {
       <FormItem top="align">
         <Select
           value={align}
-          onChange={(e) => setAlign(e.target.value)}
+          onChange={setAlign}
           options={[
             { label: 'left', value: 'left' },
             { label: 'center', value: 'center' },
@@ -106,7 +106,7 @@ const Example = () => {
           <FormItem top="AdaptivityProvider[sizeY]">
             <Select
               value={sizeY}
-              onChange={(e) => setSizeY(e.target.value)}
+              onChange={setSizeY}
               options={[
                 { label: 'compact', value: 'compact' },
                 { label: 'regular', value: 'regular' },
@@ -116,7 +116,7 @@ const Example = () => {
           <FormItem top="FormItem[status]">
             <Select
               value={formItemStatus}
-              onChange={(e) => setFormItemStatus(e.target.value)}
+              onChange={setFormItemStatus}
               options={[
                 { label: 'default', value: 'default' },
                 { label: 'error', value: 'error' },
diff --git a/packages/vkui/src/components/NativeSelect/NativeSelect.test.tsx b/packages/vkui/src/components/NativeSelect/NativeSelect.test.tsx
index 11488b711d..c24a7fc2e7 100644
--- a/packages/vkui/src/components/NativeSelect/NativeSelect.test.tsx
+++ b/packages/vkui/src/components/NativeSelect/NativeSelect.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { baselineComponent, userEvent } from '../../testing/utils';
-import { NativeSelect } from './NativeSelect';
+import { NativeSelect, type NativeSelectProps } from './NativeSelect';
 
 const getTarget = () => screen.getByTestId<HTMLSelectElement>('target');
 
@@ -18,9 +18,9 @@ describe('NativeSelect', () => {
 
   it('works correctly with value and onChange', async () => {
     const SelectController = () => {
-      const [value, setValue] = React.useState('0');
+      const [value, setValue] = React.useState<NativeSelectProps['value']>('0');
       return (
-        <NativeSelect data-testid="target" value={value} onChange={(e) => setValue(e.target.value)}>
+        <NativeSelect data-testid="target" value={value} onChange={setValue}>
           <option value="0">Mike</option>
           <option value="1">Josh</option>
         </NativeSelect>
diff --git a/packages/vkui/src/components/NativeSelect/NativeSelect.tsx b/packages/vkui/src/components/NativeSelect/NativeSelect.tsx
index e9386d4c1d..aaac37fc25 100644
--- a/packages/vkui/src/components/NativeSelect/NativeSelect.tsx
+++ b/packages/vkui/src/components/NativeSelect/NativeSelect.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { type ChangeEventHandler } from 'react';
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
@@ -19,12 +20,49 @@ const sizeYClassNames = {
   compact: styles.sizeYCompact,
 };
 
+export type SelectValue = Exclude<
+  React.SelectHTMLAttributes<HTMLSelectElement>['value'],
+  undefined
+> | null;
+
+export type NativeSelectValue = Exclude<SelectValue, null>;
+
+export const NOT_SELECTED = {
+  NATIVE: '__vkui_internal_Select_not_selected__',
+  CUSTOM: null,
+};
+
+export const remapFromSelectValueToNativeValue = (value: SelectValue): NativeSelectValue =>
+  value === NOT_SELECTED.CUSTOM ? NOT_SELECTED.NATIVE : value;
+
+export const remapFromNativeValueToSelectValue = (value: NativeSelectValue): SelectValue =>
+  value === NOT_SELECTED.NATIVE ? NOT_SELECTED.CUSTOM : value;
+
 export interface NativeSelectProps
-  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'multiple'>,
+  extends Omit<
+      React.SelectHTMLAttributes<HTMLSelectElement>,
+      'multiple' | 'value' | 'defaultValue' | 'onChange'
+    >,
     HasRef<HTMLSelectElement>,
     HasRootRef<HTMLDivElement>,
     HasAlign,
     Pick<FormFieldProps, 'before' | 'status'> {
+  /**
+   * Выбранное значение.
+   *
+   * > ⚠️  Важно: При прокидывании `undefined` компонент будет считаться `Uncontrolled`.
+   * >
+   * > Не используйте `undefined`, чтобы показать невыбранное состояние. Вместо этого используйте `null`
+   */
+  value?: SelectValue;
+  /**
+   * см. `value`
+   */
+  defaultValue?: SelectValue;
+  /**
+   * Коллбэк срабатывающий при изменении выбранного значения.
+   */
+  onChange?: (newValue: SelectValue) => void;
   placeholder?: string;
   multiline?: boolean;
   selectType?: SelectType;
@@ -58,6 +96,8 @@ const NativeSelect = ({
   icon = <DropdownIcon />,
   before,
   onChange,
+  value,
+  defaultValue,
   ...restProps
 }: NativeSelectProps): React.ReactNode => {
   const [title, setTitle] = React.useState('');
@@ -69,9 +109,14 @@ const NativeSelect = ({
     const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];
     if (selectedOption) {
       setTitle(selectedOption.text);
-      setEmpty(selectedOption.value === '' && placeholder != null);
+      setEmpty(selectedOption.value === NOT_SELECTED.NATIVE && placeholder != null);
     }
   };
+
+  const _onChange: ChangeEventHandler<HTMLSelectElement> = (e) => {
+    const newValue = remapFromNativeValueToSelectValue(e.target.value);
+    onChange?.(newValue);
+  };
   useIsomorphicLayoutEffect(checkSelectedOption, [children]);
 
   return (
@@ -98,12 +143,18 @@ const NativeSelect = ({
     >
       <select
         {...restProps}
+        value={value !== undefined ? remapFromSelectValueToNativeValue(value) : value}
+        defaultValue={
+          defaultValue !== undefined
+            ? remapFromSelectValueToNativeValue(defaultValue)
+            : defaultValue
+        }
         disabled={disabled}
         className={styles.el}
-        onChange={callMultiple(onChange, checkSelectedOption)}
+        onChange={callMultiple(_onChange, checkSelectedOption)}
         ref={selectRef}
       >
-        {placeholder && <option value="">{placeholder}</option>}
+        {placeholder && <option value={NOT_SELECTED.NATIVE}>{placeholder}</option>}
         {children}
       </select>
       <div className={styles.container} aria-hidden>
diff --git a/packages/vkui/src/components/NativeSelect/Readme.md b/packages/vkui/src/components/NativeSelect/Readme.md
index 3a66c1260b..1f0c3424c5 100644
--- a/packages/vkui/src/components/NativeSelect/Readme.md
+++ b/packages/vkui/src/components/NativeSelect/Readme.md
@@ -1,21 +1,78 @@
 Надстройка над `<select />`. Компонент принимает все валидные для этого элемента свойства.
 
+> Важно: для отображения невыбранного состояния нужно использовать `value=null` вместо `undefined`.
+>
+> `undefined` ипользуется только для неконтролируемого компонента.
+>
+> Также, чтобы отобразить невыбранное состояние необходимо задать `placeholder`
+
 ```jsx
-<View activePanel="native-select">
-  <Panel id="native-select">
-    <PanelHeader>NativeSelect</PanelHeader>
-    <Group>
+const ControlledSelect = () => {
+  const [selectedOption, setSelectedOption] = useState(null);
+
+  return (
+    <Group header={<Header>Controlled</Header>}>
       <FormItem
         top="Выберите пол"
-        htmlFor="select-id"
+        htmlFor="gender-select-id"
         bottom="Пример селекта с возможностью выбрать пол пользователя"
       >
-        <NativeSelect id="select-id">
+        <NativeSelect
+          id="gender-select-id"
+          placeholder="Не выбрано"
+          value={selectedOption}
+          onChange={setSelectedOption}
+        >
           <option value="m">Мужской</option>
           <option value="f">Женский</option>
         </NativeSelect>
       </FormItem>
     </Group>
-  </Panel>
-</View>
+  );
+};
+
+const UncontrolledSelect = () => {
+  const cityValueToName = {
+    'Moscow': 'Москва',
+    'Saint-Petersburg': 'Caнкт-Петербург',
+  };
+  const cities = ['Moscow', 'Saint-Petersburg'];
+
+  const onChange = (newValue) =>
+    newValue
+      ? console.log('Выбран город', cityValueToName[newValue])
+      : console.log('Выбор сброшен');
+
+  return (
+    <Group header={<Header>Uncontrolled</Header>}>
+      <FormItem
+        top="Выберите город"
+        htmlFor="city-select-id"
+        bottom="Пример селекта с возможностью выбрать город"
+      >
+        <NativeSelect id="city-select-id" placeholder="Не выбрано" onChange={onChange}>
+          {cities.map((city) => (
+            <option key={city} value={city}>
+              {cityValueToName[city]}
+            </option>
+          ))}
+        </NativeSelect>
+      </FormItem>
+    </Group>
+  );
+};
+
+const Example = () => {
+  return (
+    <View activePanel="native-select">
+      <Panel id="native-select">
+        <PanelHeader>Native Select</PanelHeader>
+        <ControlledSelect />
+        <UncontrolledSelect />
+      </Panel>
+    </View>
+  );
+};
+
+<Example />;
 ```
diff --git a/packages/vkui/src/components/Pagination/Readme.md b/packages/vkui/src/components/Pagination/Readme.md
index e2f955e348..207b8eb9d0 100644
--- a/packages/vkui/src/components/Pagination/Readme.md
+++ b/packages/vkui/src/components/Pagination/Readme.md
@@ -89,7 +89,7 @@ const Example = () => {
         <FormItem top="sizeY">
           <Select
             value={sizeY}
-            onChange={(e) => setSizeY(e.target.value)}
+            onChange={setSizeY}
             options={[
               { label: 'compact', value: 'compact' },
               { label: 'regular', value: 'regular' },
@@ -99,7 +99,7 @@ const Example = () => {
         <FormItem top="prop[navigationButtonsStyle]">
           <Select
             value={navigationButtonsStyle}
-            onChange={(e) => setNavigationButtonsStyle(e.target.value)}
+            onChange={setNavigationButtonsStyle}
             options={[
               { label: 'icon', value: 'icon' },
               { label: 'caption', value: 'caption' },
diff --git a/packages/vkui/src/components/Select/Readme.md b/packages/vkui/src/components/Select/Readme.md
index 97c49e28c1..0c1ca1f3ad 100644
--- a/packages/vkui/src/components/Select/Readme.md
+++ b/packages/vkui/src/components/Select/Readme.md
@@ -1,5 +1,9 @@
 Отрисовывает [CustomSelect](#!/CustomSelect), если есть мышка, либо [NativeSelect](#!/NativeSelect)
 
+> Важно: для отображения невыбранного состояния нужно использовать `value=null` вместо `undefined`.
+>
+> `undefined` ипользуется только для неконтролируемого компонента.
+
 ## Цифровая доступность (a11y)
 
 Старайтесь сопровождать элемент текстовым описанием, для корректной работы скринридеров.
diff --git a/packages/vkui/src/components/SimpleGrid/Readme.md b/packages/vkui/src/components/SimpleGrid/Readme.md
index ae11a8d27e..0b5f890a46 100644
--- a/packages/vkui/src/components/SimpleGrid/Readme.md
+++ b/packages/vkui/src/components/SimpleGrid/Readme.md
@@ -139,7 +139,7 @@ const Example = () => {
         <FormItem top="align">
           <Select
             value={align}
-            onChange={(e) => setAlign(e.target.value || 'stretch')}
+            onChange={(newValue) => setAlign(newValue || 'stretch')}
             placeholder="Не выбрано"
             options={[
               { label: 'start', value: 'start' },
@@ -156,29 +156,17 @@ const Example = () => {
         </Checkbox>
         {!complexGap && (
           <FormItem top="gap">
-            <Select
-              value={gap}
-              onChange={(e) => setGap(e.target.value)}
-              options={GapSelectValues}
-            />
+            <Select value={gap} onChange={setGap} options={GapSelectValues} />
           </FormItem>
         )}
         {complexGap && (
           <FormItem top="row gap">
-            <Select
-              value={rowGap}
-              onChange={(e) => setRowGap(e.target.value)}
-              options={GapSelectValues}
-            />
+            <Select value={rowGap} onChange={setRowGap} options={GapSelectValues} />
           </FormItem>
         )}
         {complexGap && (
           <FormItem top="column gap">
-            <Select
-              value={columnGap}
-              onChange={(e) => setColumnGap(e.target.value)}
-              options={GapSelectValues}
-            />
+            <Select value={columnGap} onChange={setColumnGap} options={GapSelectValues} />
           </FormItem>
         )}
       </div>
diff --git a/packages/vkui/src/components/Slider/Readme.md b/packages/vkui/src/components/Slider/Readme.md
index fce3f87348..2e39a2e946 100644
--- a/packages/vkui/src/components/Slider/Readme.md
+++ b/packages/vkui/src/components/Slider/Readme.md
@@ -63,11 +63,7 @@ const Example = () => {
             />
           </FormItem>
           <FormItem>
-            <Select
-              value={String(valueStep)}
-              options={options()}
-              onChange={(e) => setValueStep(e.target.value)}
-            />
+            <Select value={String(valueStep)} options={options()} onChange={setValueStep} />
           </FormItem>
           <FormItem top={<span id="uncontrolled">Uncontrolled</span>}>
             <Slider defaultValue={20} aria-labelledby="uncontrolled" />
diff --git a/packages/vkui/src/components/SubnavigationButton/Readme.md b/packages/vkui/src/components/SubnavigationButton/Readme.md
index 61f3a6bfb8..96af7f93b2 100644
--- a/packages/vkui/src/components/SubnavigationButton/Readme.md
+++ b/packages/vkui/src/components/SubnavigationButton/Readme.md
@@ -46,7 +46,7 @@ const SubnavigationButtonExample = () => {
         <FormItem top="appearance">
           <Select
             value={appearance}
-            onChange={(e) => setAppearance(e.target.value)}
+            onChange={setAppearance}
             options={[
               { label: 'accent', value: 'accent' },
               { label: 'neutral', value: 'neutral' },
@@ -56,7 +56,7 @@ const SubnavigationButtonExample = () => {
         <FormItem top="text level">
           <Select
             value={textLevel}
-            onChange={(e) => setTextLevel(e.target.value)}
+            onChange={setTextLevel}
             options={[
               { label: '1', value: '1' },
               { label: '2', value: '2' },
@@ -67,7 +67,7 @@ const SubnavigationButtonExample = () => {
         <FormItem top="size">
           <Select
             value={size}
-            onChange={(e) => setSize(e.target.value)}
+            onChange={setSize}
             options={[
               { label: 's', value: 's' },
               { label: 'm', value: 'm' },
@@ -78,7 +78,7 @@ const SubnavigationButtonExample = () => {
         <FormItem top="sizeY">
           <Select
             value={sizeY}
-            onChange={(e) => setSizeY(e.target.value)}
+            onChange={setSizeY}
             options={[
               { label: 'compact', value: 'compact' },
               {
diff --git a/packages/vkui/src/components/Tabs/Readme.md b/packages/vkui/src/components/Tabs/Readme.md
index 0254ab3247..47117f6ce2 100644
--- a/packages/vkui/src/components/Tabs/Readme.md
+++ b/packages/vkui/src/components/Tabs/Readme.md
@@ -213,7 +213,7 @@ const Scrollable = () => {
               value: 'secondary',
             },
           ]}
-          onChange={(event) => setMode(event.target.value)}
+          onChange={setMode}
         />
       </FormItem>
       <FormItem top="layoutFillMode">
@@ -233,7 +233,7 @@ const Scrollable = () => {
               value: 'shrinked',
             },
           ]}
-          onChange={(event) => setLayoutFillMode(event.target.value)}
+          onChange={setLayoutFillMode}
         />
       </FormItem>
       <Checkbox onChange={() => setDisabled((prev) => !prev)}>disabled</Checkbox>
diff --git a/packages/vkui/src/components/ToolButton/Readme.md b/packages/vkui/src/components/ToolButton/Readme.md
index d6d62cca45..06f7744177 100644
--- a/packages/vkui/src/components/ToolButton/Readme.md
+++ b/packages/vkui/src/components/ToolButton/Readme.md
@@ -44,7 +44,7 @@ const Example = () => {
         <FormItem top="direction">
           <Select
             value={direction}
-            onChange={(e) => setDirection(e.target.value)}
+            onChange={setDirection}
             options={[
               { label: 'row', value: 'row' },
               { label: 'column', value: 'column' },
@@ -54,7 +54,7 @@ const Example = () => {
         <FormItem top="mode">
           <Select
             value={mode}
-            onChange={(e) => setMode(e.target.value)}
+            onChange={setMode}
             options={[
               { label: 'primary', value: 'primary' },
               { label: 'secondary', value: 'secondary' },
@@ -66,7 +66,7 @@ const Example = () => {
         <FormItem top="appearance">
           <Select
             value={appearance}
-            onChange={(e) => setAppearance(e.target.value)}
+            onChange={setAppearance}
             options={[
               { label: 'accent', value: 'accent' },
               { label: 'neutral', value: 'neutral' },
@@ -76,7 +76,7 @@ const Example = () => {
         <FormItem top="sizeY">
           <Select
             value={sizeY}
-            onChange={(e) => setSizeY(e.target.value)}
+            onChange={setSizeY}
             options={[
               { label: 'compact', value: 'compact' },
               {

From 77eeaa00408650f73fb88f0c895170263b538327 Mon Sep 17 00:00:00 2001
From: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>
Date: Fri, 1 Nov 2024 22:02:06 +0300
Subject: [PATCH 06/19] docs: update MAINTAINERS.md (#7875)

---
 docs/MAINTAINERS.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/docs/MAINTAINERS.md b/docs/MAINTAINERS.md
index 4fdc52507a..936f741557 100644
--- a/docs/MAINTAINERS.md
+++ b/docs/MAINTAINERS.md
@@ -101,9 +101,8 @@
 > ⚠️ Обратите внимание
 >
 > Несмотря на то, что черновой список изменений создаётся и обновляется автоматически при слиянии `Pull Request`, бывают случае,
-> когда нужно вручную добавить или отредактировать изменение. Тогда нужно учитывать, что ссылка на черновик меняется после каждого
-> его сохранения. Поэтому если вносить изменения одновременно с кем-то, то последний сохранивший документ получит ошибку, что он уже
-> неактуален. В этом случае, нужно будет открыть черновик по новой ссылке и снова внести свои изменения.
+> когда нужно вручную добавить или отредактировать изменение. Тогда нужно учитывать, что кто-то параллельно тоже может начать
+> редактировать черновик и тот, кто последний сохранит, затрёт изменение другого.
 >
 > Чтобы избежать таких неудобств, лучше всего сообщить коллегам в чате, что вы собираетесь вносить изменения, а после отписаться,
 > что вы закончили работы.

From 667b25db83ade8957daadd15d84e9d7c907e7283 Mon Sep 17 00:00:00 2001
From: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>
Date: Sat, 2 Nov 2024 17:34:46 +0300
Subject: [PATCH 07/19] feat(AppRoot): set overscrollBehavior to <html> (#7881)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

h2. Описание

`GlobalScrollController` теперь установливает `overscroll-behavior: none` на `<html>`, чтобы избегать **pull-to-refresh**.

h2. Release notes
h2. Улучшения
- useScrollLock: теперь при `<AppRoot scroll="global" />` в `<html>` добавляется `overscroll-behavior: none`, чтобы избегать **pull-to-refresh**.
---
 .../components/AppRoot/ScrollContext.test.tsx | 284 ++++++++++++++++++
 .../src/components/AppRoot/ScrollContext.tsx  |   4 +
 2 files changed, 288 insertions(+)
 create mode 100644 packages/vkui/src/components/AppRoot/ScrollContext.test.tsx

diff --git a/packages/vkui/src/components/AppRoot/ScrollContext.test.tsx b/packages/vkui/src/components/AppRoot/ScrollContext.test.tsx
new file mode 100644
index 0000000000..2d8bef5309
--- /dev/null
+++ b/packages/vkui/src/components/AppRoot/ScrollContext.test.tsx
@@ -0,0 +1,284 @@
+import { createRef, type RefObject, useContext, useEffect } from 'react';
+import { render, renderHook } from '@testing-library/react';
+import { noop } from '@vkontakte/vkjs';
+import { setRef } from '../../lib/utils';
+import {
+  ElementScrollController,
+  GlobalScrollController,
+  ScrollContext,
+  type ScrollContextInterface,
+  useScrollLock,
+} from './ScrollContext';
+
+type ChildWithContextProps = {
+  contextRef?: RefObject<ScrollContextInterface>;
+  beforeScrollLockFn?: VoidFunction;
+};
+const ChildWithContext = ({ contextRef, beforeScrollLockFn }: ChildWithContextProps) => {
+  const context = useContext(ScrollContext);
+  useEffect(() => {
+    if (context.beforeScrollLockFnSetRef?.current && beforeScrollLockFn) {
+      context.beforeScrollLockFnSetRef?.current.add(beforeScrollLockFn);
+    }
+    setRef(context, contextRef);
+  }, [beforeScrollLockFn, context, contextRef]);
+  return <div />;
+};
+
+describe(useScrollLock, () => {
+  describe('ScrollContext', () => {
+    test('default', () => {
+      const h = renderHook(() => useContext(ScrollContext));
+      expect(h.result.current.getScroll()).toEqual({ x: 0, y: 0 });
+    });
+  });
+
+  describe(GlobalScrollController, () => {
+    test.each([true, false])('default behavior (width scroll: %s)', (withScroll) => {
+      const clearWindowMeasuresMock = withScroll ? noop : mockWindowMeasures(-1, -1);
+
+      const beforeScrollLockFn = jest.fn();
+      const h = renderHook(useScrollLock, {
+        wrapper: ({ children }) => (
+          <GlobalScrollController elRef={createRef<HTMLElement>()}>
+            {children}
+            <ChildWithContext beforeScrollLockFn={beforeScrollLockFn} />
+          </GlobalScrollController>
+        ),
+      });
+      expect(beforeScrollLockFn).toHaveBeenCalled();
+
+      expect(getStyleAttributeObject(document.body)).toEqual({
+        position: 'fixed',
+        top: `-${0}px`,
+        left: `-${0}px`,
+        right: '0px',
+        ...(withScroll
+          ? {
+              'overflow-x': 'scroll',
+              'overflow-y': 'scroll',
+            }
+          : {}),
+      });
+      expect(jestWorkaroundGetOverscrollBehaviorPropertyValue(document.body)).toBe('none');
+      expect(jestWorkaroundGetOverscrollBehaviorPropertyValue(document.documentElement)).toBe('none'); // prettier-ignore
+
+      h.rerender(false);
+      expect(getStyleAttributeObject(document.body)).toEqual({});
+      expect(jestWorkaroundGetOverscrollBehaviorPropertyValue(document.body)).toBe('');
+      expect(jestWorkaroundGetOverscrollBehaviorPropertyValue(document.documentElement)).toBe('');
+
+      clearWindowMeasuresMock();
+    });
+
+    test('context api', () => {
+      const contextRef = createRef<ScrollContextInterface>();
+      render(
+        <GlobalScrollController elRef={createRef<HTMLElement>()}>
+          <ChildWithContext contextRef={contextRef} />
+        </GlobalScrollController>,
+      );
+
+      const clearWindowMeasuresMock = mockWindowMeasures(50, 50);
+      const clearElementScrollMock = mockElementScroll(document.body, 100, 100);
+      const clearMockWindowScrollToMock = mockWindowScrollTo();
+
+      expect(contextRef.current?.getScroll()).toEqual({ x: 0, y: 50 });
+      expect(contextRef.current?.getScroll({ compensateKeyboardHeight: false })).toEqual({
+        x: 0,
+        y: 0,
+      });
+      contextRef.current?.scrollTo(10, 10);
+      expect(contextRef.current?.getScroll()).toEqual({ x: 10, y: 60 });
+      contextRef.current?.scrollTo();
+      expect(contextRef.current?.getScroll()).toEqual({ x: 0, y: 50 });
+
+      clearWindowMeasuresMock();
+      clearElementScrollMock();
+      clearMockWindowScrollToMock();
+    });
+  });
+
+  describe(ElementScrollController, () => {
+    test.each([true, false])('default behavior (width scroll: %s)', (withScroll) => {
+      const elRef = createRef<HTMLElement>();
+      setRef(document.createElement('div'), elRef);
+
+      const clearElementMeasuresMock = withScroll
+        ? mockElementMeasures(elRef.current!, -1, -1)
+        : mockElementMeasures(elRef.current!, 1, 1);
+
+      const beforeScrollLockFn = jest.fn();
+      const h = renderHook(useScrollLock, {
+        wrapper: ({ children }) => (
+          <ElementScrollController elRef={elRef}>
+            {children}
+            <ChildWithContext beforeScrollLockFn={beforeScrollLockFn} />
+          </ElementScrollController>
+        ),
+      });
+      expect(beforeScrollLockFn).toHaveBeenCalled();
+
+      expect(getStyleAttributeObject(elRef.current)).toEqual({
+        position: 'absolute',
+        top: `-${0}px`,
+        left: `-${0}px`,
+        right: '0px',
+        ...(withScroll
+          ? {
+              'overflow-x': 'scroll',
+              'overflow-y': 'scroll',
+            }
+          : {}),
+      });
+
+      h.rerender(false);
+      expect(getStyleAttributeObject(elRef.current)).toEqual({});
+
+      clearElementMeasuresMock();
+    });
+
+    test('el is null', () => {
+      const elRef = createRef<HTMLElement>();
+      const h = renderHook(useScrollLock, {
+        wrapper: ({ children }) => (
+          <ElementScrollController elRef={elRef}>{children}</ElementScrollController>
+        ),
+      });
+      expect(getStyleAttributeObject(elRef.current)).toBeNull();
+
+      h.rerender(false);
+      expect(getStyleAttributeObject(elRef.current)).toBeNull();
+    });
+
+    test('context api', () => {
+      const contextRef = createRef<ScrollContextInterface>();
+      const elRef = createRef<HTMLElement>();
+      setRef(document.createElement('div'), elRef);
+      render(
+        <ElementScrollController elRef={elRef}>
+          <ChildWithContext contextRef={contextRef} />
+        </ElementScrollController>,
+      );
+
+      const clearElementMeasuresMock = mockElementMeasures(elRef.current!, 50, 50);
+      const clearElementScrollMock = mockElementScroll(elRef.current!, 100, 100);
+      const clearElementScrollToMock = mockElementScrollTo(elRef.current!);
+
+      expect(contextRef.current?.getScroll()).toEqual({ x: 0, y: 0 });
+      contextRef.current?.scrollTo(10, 10);
+      expect(contextRef.current?.getScroll()).toEqual({ x: 10, y: 10 });
+      contextRef.current?.scrollTo();
+      expect(contextRef.current?.getScroll()).toEqual({ x: 0, y: 0 });
+
+      clearElementMeasuresMock();
+      clearElementScrollMock();
+      clearElementScrollToMock();
+    });
+
+    test('context api when el is null', () => {
+      const contextRef = createRef<ScrollContextInterface>();
+      const elRef = createRef<HTMLElement>();
+      render(
+        <ElementScrollController elRef={elRef}>
+          <ChildWithContext contextRef={contextRef} />
+        </ElementScrollController>,
+      );
+
+      expect(contextRef.current?.getScroll()).toEqual({ x: 0, y: 0 });
+      contextRef.current?.scrollTo(10, 10);
+      expect(contextRef.current?.getScroll()).toEqual({ x: 0, y: 0 });
+      contextRef.current?.scrollTo();
+      expect(contextRef.current?.getScroll()).toEqual({ x: 0, y: 0 });
+    });
+  });
+});
+
+/**
+ * В Jest через `el.getAttribute('style')` не получается получить свойство.
+ */
+function jestWorkaroundGetOverscrollBehaviorPropertyValue(el: HTMLElement) {
+  return el.style.overscrollBehavior;
+}
+
+function getStyleAttributeObject(el: HTMLElement | null) {
+  const style = el ? el.getAttribute('style') : null;
+
+  if (style === null) {
+    return null;
+  }
+
+  return Object.fromEntries(
+    style
+      .split(';')
+      .map((style) =>
+        style
+          .trim()
+          .split(':')
+          .map((part) => part && part.trim()),
+      )
+      .filter(([key, value]) => key && value)
+      .map(([key, value]) => [key, value]),
+  );
+}
+
+function mockWindowMeasures(width: number, height: number) {
+  const originalW = window.innerWidth;
+  const originalH = window.innerHeight;
+  Object.defineProperty(window, 'innerWidth', { configurable: true, value: width });
+  Object.defineProperty(window, 'innerHeight', { configurable: true, value: height });
+  return function clearMock() {
+    Object.defineProperty(window, 'innerWidth', { configurable: true, value: originalW });
+    Object.defineProperty(window, 'innerHeight', { configurable: true, value: originalH });
+  };
+}
+
+function mockWindowScrollTo() {
+  const original = window.scrollTo;
+  Object.defineProperty(window, 'scrollTo', {
+    configurable: true,
+    value: (x: number, y: number) => {
+      Object.defineProperty(window, 'pageXOffset', { configurable: true, value: x });
+      Object.defineProperty(window, 'pageYOffset', { configurable: true, value: y });
+    },
+  });
+  return function clearMock() {
+    Object.defineProperty(window, 'scrollTo', { configurable: true, value: original });
+  };
+}
+
+function mockElementMeasures(el: HTMLElement, width: number, height: number) {
+  const originalW = el.clientWidth;
+  const originalH = el.clientHeight;
+  Object.defineProperty(el, 'clientWidth', { configurable: true, value: width });
+  Object.defineProperty(el, 'clientHeight', { configurable: true, value: height });
+  return function clearMock() {
+    Object.defineProperty(el, 'clientWidth', { configurable: true, value: originalW });
+    Object.defineProperty(el, 'clientHeight', { configurable: true, value: originalH });
+  };
+}
+
+function mockElementScroll(el: HTMLElement, width: number, height: number) {
+  const originalW = el.scrollWidth;
+  const originalH = el.scrollHeight;
+  Object.defineProperty(el, 'scrollWidth', { configurable: true, value: width });
+  Object.defineProperty(el, 'scrollHeight', { configurable: true, value: height });
+  return function clearMock() {
+    Object.defineProperty(el, 'scrollWidth', { configurable: true, value: originalW });
+    Object.defineProperty(el, 'scrollHeight', { configurable: true, value: originalH });
+  };
+}
+
+function mockElementScrollTo(el: HTMLElement) {
+  const original = el.scrollTo.bind(el);
+  Object.defineProperty(el, 'scrollTo', {
+    configurable: true,
+    value: (x: number, y: number) => {
+      Object.defineProperty(el, 'scrollLeft', { configurable: true, value: x });
+      Object.defineProperty(el, 'scrollTop', { configurable: true, value: y });
+    },
+  });
+  return function clearMock() {
+    Object.defineProperty(el, 'scrollTo', { configurable: true, value: original });
+  };
+}
diff --git a/packages/vkui/src/components/AppRoot/ScrollContext.tsx b/packages/vkui/src/components/AppRoot/ScrollContext.tsx
index 48e9c10345..93c80091de 100644
--- a/packages/vkui/src/components/AppRoot/ScrollContext.tsx
+++ b/packages/vkui/src/components/AppRoot/ScrollContext.tsx
@@ -13,6 +13,7 @@ const clearDisableScrollStyle = (node: HTMLElement) => {
     top: '',
     left: '',
     right: '',
+    overscrollBehavior: '',
     overflowY: '',
     overflowX: '',
   });
@@ -117,11 +118,13 @@ export const GlobalScrollController = ({ children }: ScrollControllerProps): Rea
     const overflowY = window!.innerWidth > document!.documentElement.clientWidth ? 'scroll' : '';
     const overflowX = window!.innerHeight > document!.documentElement.clientHeight ? 'scroll' : '';
 
+    Object.assign(document!.documentElement.style, { overscrollBehavior: 'none' });
     Object.assign(document!.body.style, {
       position: 'fixed',
       top: `-${scrollY}px`,
       left: `-${scrollX}px`,
       right: '0',
+      overscrollBehavior: 'none',
       overflowY,
       overflowX,
     });
@@ -131,6 +134,7 @@ export const GlobalScrollController = ({ children }: ScrollControllerProps): Rea
     const scrollY = document!.body.style.top;
     const scrollX = document!.body.style.left;
 
+    Object.assign(document!.documentElement.style, { overscrollBehavior: '' });
     clearDisableScrollStyle(document!.body);
     window!.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));
   }, [document, window]);

From 5af25803a049adc89ff31fb41df9ec980366a8e8 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 4 Nov 2024 11:55:04 +0300
Subject: [PATCH 08/19] build(deps): Bump mini-css-extract-plugin from 2.9.1 to
 2.9.2 (#7891)

Bumps [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) from 2.9.1 to 2.9.2.
- [Release notes](https://github.com/webpack-contrib/mini-css-extract-plugin/releases)
- [Changelog](https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/CHANGELOG.md)
- [Commits](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v2.9.1...v2.9.2)

---
updated-dependencies:
- dependency-name: mini-css-extract-plugin
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 benchmark/package.json |  2 +-
 package.json           |  2 +-
 yarn.lock              | 12 ++++++------
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/benchmark/package.json b/benchmark/package.json
index dd4a0cba19..30567ba083 100644
--- a/benchmark/package.json
+++ b/benchmark/package.json
@@ -18,7 +18,7 @@
     "dotenv": "^16.4.5",
     "finalhandler": "1.3.1",
     "html-webpack-plugin": "^5.6.3",
-    "mini-css-extract-plugin": "^2.9.1",
+    "mini-css-extract-plugin": "^2.9.2",
     "playwright": "1.48.2",
     "postcss": "^8.4.47",
     "postcss-modules": "^6.0.0",
diff --git a/package.json b/package.json
index 4121d39b88..1da53972ca 100644
--- a/package.json
+++ b/package.json
@@ -64,7 +64,7 @@
     "jest-environment-node": "^29.7.0",
     "jest-preset-stylelint": "^7.1.0",
     "lint-staged": "^15.2.10",
-    "mini-css-extract-plugin": "^2.9.1",
+    "mini-css-extract-plugin": "^2.9.2",
     "postcss": "^8.4.47",
     "postcss-cli": "^11.0.0",
     "postcss-custom-media": "^11.0.4",
diff --git a/yarn.lock b/yarn.lock
index ce3c0b8dbe..a785c566b0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4077,7 +4077,7 @@ __metadata:
     jest-environment-node: "npm:^29.7.0"
     jest-preset-stylelint: "npm:^7.1.0"
     lint-staged: "npm:^15.2.10"
-    mini-css-extract-plugin: "npm:^2.9.1"
+    mini-css-extract-plugin: "npm:^2.9.2"
     postcss: "npm:^8.4.47"
     postcss-cli: "npm:^11.0.0"
     postcss-custom-media: "npm:^11.0.4"
@@ -5064,7 +5064,7 @@ __metadata:
     dotenv: "npm:^16.4.5"
     finalhandler: "npm:1.3.1"
     html-webpack-plugin: "npm:^5.6.3"
-    mini-css-extract-plugin: "npm:^2.9.1"
+    mini-css-extract-plugin: "npm:^2.9.2"
     playwright: "npm:1.48.2"
     postcss: "npm:^8.4.47"
     postcss-modules: "npm:^6.0.0"
@@ -11676,15 +11676,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mini-css-extract-plugin@npm:^2.9.1":
-  version: 2.9.1
-  resolution: "mini-css-extract-plugin@npm:2.9.1"
+"mini-css-extract-plugin@npm:^2.9.2":
+  version: 2.9.2
+  resolution: "mini-css-extract-plugin@npm:2.9.2"
   dependencies:
     schema-utils: "npm:^4.0.0"
     tapable: "npm:^2.2.1"
   peerDependencies:
     webpack: ^5.0.0
-  checksum: 10/a4a0c73a054254784b9d39a3a4f117691600355125242dfc46ced0912b4937050823478bdbf403b5392c21e2fb2203902b41677d67c7d668f77b985b594e94c6
+  checksum: 10/db6ddb8ba56affa1a295b57857d66bad435d36e48e1f95c75d16fadd6c70e3ba33e8c4141c3fb0e22b4d875315b41c4f58550c6ac73b50bdbe429f768297e3ff
   languageName: node
   linkType: hard
 

From 70f23cf33a7605f9798987c3525fe3e433a2c824 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 4 Nov 2024 11:55:07 +0300
Subject: [PATCH 09/19] build(deps): Bump @types/node from 22.8.1 to 22.8.7
 (#7889)

Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 22.8.1 to 22.8.7.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node)

---
updated-dependencies:
- dependency-name: "@types/node"
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package.json                           |  2 +-
 packages/codemods/package.json         |  2 +-
 packages/token-translator/package.json |  2 +-
 yarn.lock                              | 17 +++++++++++++----
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 1da53972ca..3f3e4dd52a 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.14",
     "@types/jest-axe": "^3.5.9",
-    "@types/node": "^22.8.1",
+    "@types/node": "^22.8.7",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/webpack": "^5.28.5",
diff --git a/packages/codemods/package.json b/packages/codemods/package.json
index aba54c2ff9..5e939926c2 100644
--- a/packages/codemods/package.json
+++ b/packages/codemods/package.json
@@ -27,7 +27,7 @@
     "@types/cross-spawn": "^6.0.6",
     "@types/jest": "^29.5.14",
     "@types/jscodeshift": "^0.12.0",
-    "@types/node": "^22.8.1",
+    "@types/node": "^22.8.7",
     "@types/prompts": "^2.4.9",
     "jest": "^29.7.0",
     "ts-node": "^10.9.2"
diff --git a/packages/token-translator/package.json b/packages/token-translator/package.json
index 53b85b9179..bf141a7a2a 100644
--- a/packages/token-translator/package.json
+++ b/packages/token-translator/package.json
@@ -14,7 +14,7 @@
     "node": ">12.0.0"
   },
   "dependencies": {
-    "@types/node": "^22.8.1",
+    "@types/node": "^22.8.7",
     "postcss": "^8.4.47",
     "postcss-less": "^6.0.0",
     "postcss-scss": "^4.0.9",
diff --git a/yarn.lock b/yarn.lock
index a785c566b0..6399eb962b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3424,7 +3424,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:*, @types/node@npm:^22.0.0, @types/node@npm:^22.8.1":
+"@types/node@npm:*, @types/node@npm:^22.0.0":
   version: 22.8.1
   resolution: "@types/node@npm:22.8.1"
   dependencies:
@@ -3433,6 +3433,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^22.8.7":
+  version: 22.8.7
+  resolution: "@types/node@npm:22.8.7"
+  dependencies:
+    undici-types: "npm:~6.19.8"
+  checksum: 10/9c73d4cbcbf9773a5986421025c26d6139d8ab960317b3062fbb449c00dbe8197230334be550ffcdb6059bd25f4cb903546bace905155628537283a80c2075d5
+  languageName: node
+  linkType: hard
+
 "@types/normalize-package-data@npm:^2.4.0":
   version: 2.4.4
   resolution: "@types/normalize-package-data@npm:2.4.4"
@@ -3968,7 +3977,7 @@ __metadata:
     "@types/cross-spawn": "npm:^6.0.6"
     "@types/jest": "npm:^29.5.14"
     "@types/jscodeshift": "npm:^0.12.0"
-    "@types/node": "npm:^22.8.1"
+    "@types/node": "npm:^22.8.7"
     "@types/prompts": "npm:^2.4.9"
     chalk: "npm:^4.1.2"
     commander: "npm:^12.1.0"
@@ -4040,7 +4049,7 @@ __metadata:
     "@testing-library/user-event": "npm:^14.5.2"
     "@types/jest": "npm:^29.5.14"
     "@types/jest-axe": "npm:^3.5.9"
-    "@types/node": "npm:^22.8.1"
+    "@types/node": "npm:^22.8.7"
     "@types/react": "npm:^18.3.12"
     "@types/react-dom": "npm:^18.3.1"
     "@types/webpack": "npm:^5.28.5"
@@ -4121,7 +4130,7 @@ __metadata:
     "@swc/core": "npm:1.7.40"
     "@swc/jest": "npm:^0.2.36"
     "@types/jest": "npm:^29.5.14"
-    "@types/node": "npm:^22.8.1"
+    "@types/node": "npm:^22.8.7"
     "@types/postcss-less": "npm:^4.0.6"
     jest: "npm:^29.7.0"
     postcss: "npm:^8.4.47"

From 677232f05ac5f05661b787ad616319c038825d5c Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 4 Nov 2024 11:55:09 +0300
Subject: [PATCH 10/19] build(deps): Bump the swc group with 3 updates (#7888)

Bumps the swc group with 3 updates: [@swc/cli](https://github.com/swc-project/pkgs), [@swc/core](https://github.com/swc-project/swc) and [@swc/jest](https://github.com/swc-project/pkgs).


Updates `@swc/cli` from 0.4.0 to 0.5.0
- [Commits](https://github.com/swc-project/pkgs/commits)

Updates `@swc/core` from 1.7.40 to 1.8.0
- [Release notes](https://github.com/swc-project/swc/releases)
- [Changelog](https://github.com/swc-project/swc/blob/main/CHANGELOG.md)
- [Commits](https://github.com/swc-project/swc/compare/v1.7.40...v1.8.0)

Updates `@swc/jest` from 0.2.36 to 0.2.37
- [Commits](https://github.com/swc-project/pkgs/commits)

---
updated-dependencies:
- dependency-name: "@swc/cli"
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: swc
- dependency-name: "@swc/core"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: swc
- dependency-name: "@swc/jest"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: swc
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 benchmark/package.json                 |   2 +-
 package.json                           |   6 +-
 packages/codemods/package.json         |   4 +-
 packages/token-translator/package.json |   4 +-
 packages/vkui-floating-ui/package.json |   4 +-
 yarn.lock                              | 163 ++++++++++++++++++++++---
 6 files changed, 154 insertions(+), 29 deletions(-)

diff --git a/benchmark/package.json b/benchmark/package.json
index 30567ba083..e6e60ab62e 100644
--- a/benchmark/package.json
+++ b/benchmark/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@playwright/test": "1.48.2",
-    "@swc/core": "^1.7.40",
+    "@swc/core": "^1.8.0",
     "@vkontakte/vkui": "workspace:packages/vkui",
     "cli-table3": "^0.6.1",
     "css-loader": "^6.10.0",
diff --git a/package.json b/package.json
index 3f3e4dd52a..54cf480e6a 100644
--- a/package.json
+++ b/package.json
@@ -18,9 +18,9 @@
     "@size-limit/file": "^11.1.6",
     "@size-limit/webpack": "^11.1.6",
     "@size-limit/webpack-css": "^11.1.6",
-    "@swc/cli": "^0.4.0",
-    "@swc/core": "1.7.40",
-    "@swc/jest": "^0.2.36",
+    "@swc/cli": "^0.5.0",
+    "@swc/core": "1.8.0",
+    "@swc/jest": "^0.2.37",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/react": "^16.0.1",
diff --git a/packages/codemods/package.json b/packages/codemods/package.json
index 5e939926c2..67f7b9bf22 100644
--- a/packages/codemods/package.json
+++ b/packages/codemods/package.json
@@ -22,8 +22,8 @@
     "typescript": "^5.6.3"
   },
   "devDependencies": {
-    "@swc/core": "^1.7.40",
-    "@swc/jest": "^0.2.36",
+    "@swc/core": "^1.8.0",
+    "@swc/jest": "^0.2.37",
     "@types/cross-spawn": "^6.0.6",
     "@types/jest": "^29.5.14",
     "@types/jscodeshift": "^0.12.0",
diff --git a/packages/token-translator/package.json b/packages/token-translator/package.json
index bf141a7a2a..8d91d6d4a3 100644
--- a/packages/token-translator/package.json
+++ b/packages/token-translator/package.json
@@ -22,8 +22,8 @@
     "typescript": "^5.6.3"
   },
   "devDependencies": {
-    "@swc/core": "1.7.40",
-    "@swc/jest": "^0.2.36",
+    "@swc/core": "1.8.0",
+    "@swc/jest": "^0.2.37",
     "@types/jest": "^29.5.14",
     "@types/postcss-less": "^4.0.6",
     "jest": "^29.7.0",
diff --git a/packages/vkui-floating-ui/package.json b/packages/vkui-floating-ui/package.json
index 0c7e93e803..df30fc69b8 100644
--- a/packages/vkui-floating-ui/package.json
+++ b/packages/vkui-floating-ui/package.json
@@ -83,8 +83,8 @@
     "@swc/helpers": "^0.5.13"
   },
   "devDependencies": {
-    "@swc/core": "^1.7.40",
-    "@swc/jest": "^0.2.36",
+    "@swc/core": "^1.8.0",
+    "@swc/jest": "^0.2.37",
     "@types/jest": "^29.5.14",
     "jest": "^29.7.0",
     "react": "^18.3.1",
diff --git a/yarn.lock b/yarn.lock
index 6399eb962b..53a67ef7f4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2736,9 +2736,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swc/cli@npm:^0.4.0":
-  version: 0.4.0
-  resolution: "@swc/cli@npm:0.4.0"
+"@swc/cli@npm:^0.5.0":
+  version: 0.5.0
+  resolution: "@swc/cli@npm:0.5.0"
   dependencies:
     "@mole-inc/bin-wrapper": "npm:^8.0.1"
     "@swc/counter": "npm:^0.1.3"
@@ -2759,7 +2759,7 @@ __metadata:
     spack: bin/spack.js
     swc: bin/swc.js
     swcx: bin/swcx.js
-  checksum: 10/d1e319f5579eb3b889e86e5db1db25673bbbaa9091e0e1f93ec4ae33c9ef8b6a6607bbaae693f7c2fefe5d1faf9eec48bdd79a15f170b70e6bc0aa58e6550dee
+  checksum: 10/033b682f1c25c8fae731414d2a463a0e455452bf9349c025cd88ea63ee1e5a589032eb206063fd925daf12065c9f1e5b4680cef50cc24674681c4d2583b7dca0
   languageName: node
   linkType: hard
 
@@ -2770,6 +2770,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swc/core-darwin-arm64@npm:1.8.0":
+  version: 1.8.0
+  resolution: "@swc/core-darwin-arm64@npm:1.8.0"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@swc/core-darwin-x64@npm:1.7.40":
   version: 1.7.40
   resolution: "@swc/core-darwin-x64@npm:1.7.40"
@@ -2777,6 +2784,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swc/core-darwin-x64@npm:1.8.0":
+  version: 1.8.0
+  resolution: "@swc/core-darwin-x64@npm:1.8.0"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@swc/core-linux-arm-gnueabihf@npm:1.7.40":
   version: 1.7.40
   resolution: "@swc/core-linux-arm-gnueabihf@npm:1.7.40"
@@ -2784,6 +2798,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swc/core-linux-arm-gnueabihf@npm:1.8.0":
+  version: 1.8.0
+  resolution: "@swc/core-linux-arm-gnueabihf@npm:1.8.0"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@swc/core-linux-arm64-gnu@npm:1.7.40":
   version: 1.7.40
   resolution: "@swc/core-linux-arm64-gnu@npm:1.7.40"
@@ -2791,6 +2812,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swc/core-linux-arm64-gnu@npm:1.8.0":
+  version: 1.8.0
+  resolution: "@swc/core-linux-arm64-gnu@npm:1.8.0"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@swc/core-linux-arm64-musl@npm:1.7.40":
   version: 1.7.40
   resolution: "@swc/core-linux-arm64-musl@npm:1.7.40"
@@ -2798,6 +2826,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swc/core-linux-arm64-musl@npm:1.8.0":
+  version: 1.8.0
+  resolution: "@swc/core-linux-arm64-musl@npm:1.8.0"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
 "@swc/core-linux-x64-gnu@npm:1.7.40":
   version: 1.7.40
   resolution: "@swc/core-linux-x64-gnu@npm:1.7.40"
@@ -2805,6 +2840,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swc/core-linux-x64-gnu@npm:1.8.0":
+  version: 1.8.0
+  resolution: "@swc/core-linux-x64-gnu@npm:1.8.0"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "@swc/core-linux-x64-musl@npm:1.7.40":
   version: 1.7.40
   resolution: "@swc/core-linux-x64-musl@npm:1.7.40"
@@ -2812,6 +2854,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swc/core-linux-x64-musl@npm:1.8.0":
+  version: 1.8.0
+  resolution: "@swc/core-linux-x64-musl@npm:1.8.0"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
 "@swc/core-win32-arm64-msvc@npm:1.7.40":
   version: 1.7.40
   resolution: "@swc/core-win32-arm64-msvc@npm:1.7.40"
@@ -2819,6 +2868,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swc/core-win32-arm64-msvc@npm:1.8.0":
+  version: 1.8.0
+  resolution: "@swc/core-win32-arm64-msvc@npm:1.8.0"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@swc/core-win32-ia32-msvc@npm:1.7.40":
   version: 1.7.40
   resolution: "@swc/core-win32-ia32-msvc@npm:1.7.40"
@@ -2826,6 +2882,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swc/core-win32-ia32-msvc@npm:1.8.0":
+  version: 1.8.0
+  resolution: "@swc/core-win32-ia32-msvc@npm:1.8.0"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@swc/core-win32-x64-msvc@npm:1.7.40":
   version: 1.7.40
   resolution: "@swc/core-win32-x64-msvc@npm:1.7.40"
@@ -2833,7 +2896,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swc/core@npm:*, @swc/core@npm:1.7.40, @swc/core@npm:^1.7.3, @swc/core@npm:^1.7.40":
+"@swc/core-win32-x64-msvc@npm:1.8.0":
+  version: 1.8.0
+  resolution: "@swc/core-win32-x64-msvc@npm:1.8.0"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@swc/core@npm:*, @swc/core@npm:^1.7.3":
   version: 1.7.40
   resolution: "@swc/core@npm:1.7.40"
   dependencies:
@@ -2879,6 +2949,52 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swc/core@npm:1.8.0, @swc/core@npm:^1.8.0":
+  version: 1.8.0
+  resolution: "@swc/core@npm:1.8.0"
+  dependencies:
+    "@swc/core-darwin-arm64": "npm:1.8.0"
+    "@swc/core-darwin-x64": "npm:1.8.0"
+    "@swc/core-linux-arm-gnueabihf": "npm:1.8.0"
+    "@swc/core-linux-arm64-gnu": "npm:1.8.0"
+    "@swc/core-linux-arm64-musl": "npm:1.8.0"
+    "@swc/core-linux-x64-gnu": "npm:1.8.0"
+    "@swc/core-linux-x64-musl": "npm:1.8.0"
+    "@swc/core-win32-arm64-msvc": "npm:1.8.0"
+    "@swc/core-win32-ia32-msvc": "npm:1.8.0"
+    "@swc/core-win32-x64-msvc": "npm:1.8.0"
+    "@swc/counter": "npm:^0.1.3"
+    "@swc/types": "npm:^0.1.14"
+  peerDependencies:
+    "@swc/helpers": "*"
+  dependenciesMeta:
+    "@swc/core-darwin-arm64":
+      optional: true
+    "@swc/core-darwin-x64":
+      optional: true
+    "@swc/core-linux-arm-gnueabihf":
+      optional: true
+    "@swc/core-linux-arm64-gnu":
+      optional: true
+    "@swc/core-linux-arm64-musl":
+      optional: true
+    "@swc/core-linux-x64-gnu":
+      optional: true
+    "@swc/core-linux-x64-musl":
+      optional: true
+    "@swc/core-win32-arm64-msvc":
+      optional: true
+    "@swc/core-win32-ia32-msvc":
+      optional: true
+    "@swc/core-win32-x64-msvc":
+      optional: true
+  peerDependenciesMeta:
+    "@swc/helpers":
+      optional: true
+  checksum: 10/2e7fb49286545b2b712b8220dbaf0d342636bd4c31763f760dc9822975d8e538e0080f1eb8ae7e74bf9b2eed8200a9525fd210ead573843dabd6f3e388bfb336
+  languageName: node
+  linkType: hard
+
 "@swc/counter@npm:^0.1.3":
   version: 0.1.3
   resolution: "@swc/counter@npm:0.1.3"
@@ -2895,16 +3011,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swc/jest@npm:^0.2.36":
-  version: 0.2.36
-  resolution: "@swc/jest@npm:0.2.36"
+"@swc/jest@npm:^0.2.37":
+  version: 0.2.37
+  resolution: "@swc/jest@npm:0.2.37"
   dependencies:
     "@jest/create-cache-key-function": "npm:^29.7.0"
     "@swc/counter": "npm:^0.1.3"
     jsonc-parser: "npm:^3.2.0"
   peerDependencies:
     "@swc/core": "*"
-  checksum: 10/39c5699646f0e90400af106156e5604069e8a7d8216f2421e171837b086839176c16f69925ce6a5c4c48182005eed649bdf9664023708e169aa48814feecc0d8
+  checksum: 10/bbec37079b4f5c1ff1c95aeec07d08277c646a0c5e16e057ea3a8fe5c6e2bd59bbfc4312e53ddd05d25fa4de20a03607be274f560f28bb5e229dd08124780e16
   languageName: node
   linkType: hard
 
@@ -2917,6 +3033,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swc/types@npm:^0.1.14":
+  version: 0.1.14
+  resolution: "@swc/types@npm:0.1.14"
+  dependencies:
+    "@swc/counter": "npm:^0.1.3"
+  checksum: 10/1ee6cd759f7dd52ea64cbcacc912e2111624a8db0dcfae443604bd9d42b671d9b9570f1eca945dfc21b8850a15d2c0db2aa0e0b85f4bb9782f4acd1eb66dccd1
+  languageName: node
+  linkType: hard
+
 "@szmarczak/http-timer@npm:^4.0.5":
   version: 4.0.6
   resolution: "@szmarczak/http-timer@npm:4.0.6"
@@ -3972,8 +4097,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@vkontakte/vkui-codemods@workspace:packages/codemods"
   dependencies:
-    "@swc/core": "npm:^1.7.40"
-    "@swc/jest": "npm:^0.2.36"
+    "@swc/core": "npm:^1.8.0"
+    "@swc/jest": "npm:^0.2.37"
     "@types/cross-spawn": "npm:^6.0.6"
     "@types/jest": "npm:^29.5.14"
     "@types/jscodeshift": "npm:^0.12.0"
@@ -4010,9 +4135,9 @@ __metadata:
   resolution: "@vkontakte/vkui-floating-ui@workspace:packages/vkui-floating-ui"
   dependencies:
     "@floating-ui/react-dom": "npm:^2.1.2"
-    "@swc/core": "npm:^1.7.40"
+    "@swc/core": "npm:^1.8.0"
     "@swc/helpers": "npm:^0.5.13"
-    "@swc/jest": "npm:^0.2.36"
+    "@swc/jest": "npm:^0.2.37"
     "@types/jest": "npm:^29.5.14"
     jest: "npm:^29.7.0"
     react: "npm:^18.3.1"
@@ -4040,9 +4165,9 @@ __metadata:
     "@size-limit/file": "npm:^11.1.6"
     "@size-limit/webpack": "npm:^11.1.6"
     "@size-limit/webpack-css": "npm:^11.1.6"
-    "@swc/cli": "npm:^0.4.0"
-    "@swc/core": "npm:1.7.40"
-    "@swc/jest": "npm:^0.2.36"
+    "@swc/cli": "npm:^0.5.0"
+    "@swc/core": "npm:1.8.0"
+    "@swc/jest": "npm:^0.2.37"
     "@testing-library/dom": "npm:^10.4.0"
     "@testing-library/jest-dom": "npm:^6.6.2"
     "@testing-library/react": "npm:^16.0.1"
@@ -4127,8 +4252,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@vkontakte/vkui-token-translator@workspace:packages/token-translator"
   dependencies:
-    "@swc/core": "npm:1.7.40"
-    "@swc/jest": "npm:^0.2.36"
+    "@swc/core": "npm:1.8.0"
+    "@swc/jest": "npm:^0.2.37"
     "@types/jest": "npm:^29.5.14"
     "@types/node": "npm:^22.8.7"
     "@types/postcss-less": "npm:^4.0.6"
@@ -5065,7 +5190,7 @@ __metadata:
   resolution: "benchmark@workspace:benchmark"
   dependencies:
     "@playwright/test": "npm:1.48.2"
-    "@swc/core": "npm:^1.7.40"
+    "@swc/core": "npm:^1.8.0"
     "@vkontakte/vkui": "workspace:packages/vkui"
     cli-table3: "npm:^0.6.1"
     css-loader: "npm:^6.10.0"

From 2b83c45bb847454ef32056fb41b025708f7fd17e Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 4 Nov 2024 11:55:12 +0300
Subject: [PATCH 11/19] build(deps-dev): Bump @testing-library/jest-dom (#7887)

Bumps the testing-library group with 1 update: [@testing-library/jest-dom](https://github.com/testing-library/jest-dom).


Updates `@testing-library/jest-dom` from 6.6.2 to 6.6.3
- [Release notes](https://github.com/testing-library/jest-dom/releases)
- [Changelog](https://github.com/testing-library/jest-dom/blob/main/CHANGELOG.md)
- [Commits](https://github.com/testing-library/jest-dom/compare/v6.6.2...v6.6.3)

---
updated-dependencies:
- dependency-name: "@testing-library/jest-dom"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: testing-library
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package.json |  2 +-
 yarn.lock    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 54cf480e6a..f543030563 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "@swc/core": "1.8.0",
     "@swc/jest": "^0.2.37",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.14",
diff --git a/yarn.lock b/yarn.lock
index 53a67ef7f4..81ebce456e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3082,9 +3082,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/jest-dom@npm:^6.6.2":
-  version: 6.6.2
-  resolution: "@testing-library/jest-dom@npm:6.6.2"
+"@testing-library/jest-dom@npm:^6.6.3":
+  version: 6.6.3
+  resolution: "@testing-library/jest-dom@npm:6.6.3"
   dependencies:
     "@adobe/css-tools": "npm:^4.4.0"
     aria-query: "npm:^5.0.0"
@@ -3093,7 +3093,7 @@ __metadata:
     dom-accessibility-api: "npm:^0.6.3"
     lodash: "npm:^4.17.21"
     redent: "npm:^3.0.0"
-  checksum: 10/c5f1ac369e685ea7c17eff190f2e9996e6e54615a3048c3c00cbbbec48f94c557d348ba935a7e8170efbbb109c035785952f6e46d0c03edb18e9a8cc55f8f118
+  checksum: 10/1f3427e45870eab9dcc59d6504b780d4a595062fe1687762ae6e67d06a70bf439b40ab64cf58cbace6293a99e3764d4647fdc8300a633b721764f5ce39dade18
   languageName: node
   linkType: hard
 
@@ -4169,7 +4169,7 @@ __metadata:
     "@swc/core": "npm:1.8.0"
     "@swc/jest": "npm:^0.2.37"
     "@testing-library/dom": "npm:^10.4.0"
-    "@testing-library/jest-dom": "npm:^6.6.2"
+    "@testing-library/jest-dom": "npm:^6.6.3"
     "@testing-library/react": "npm:^16.0.1"
     "@testing-library/user-event": "npm:^14.5.2"
     "@types/jest": "npm:^29.5.14"

From 9ca421e72a0a91f0a2b07f3a9f30a3dc1d51d992 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 4 Nov 2024 11:55:16 +0300
Subject: [PATCH 12/19] build(deps): Bump webpack from 5.95.0 to 5.96.1 in the
 webpack group (#7885)

Bumps the webpack group with 1 update: [webpack](https://github.com/webpack/webpack).


Updates `webpack` from 5.95.0 to 5.96.1
- [Release notes](https://github.com/webpack/webpack/releases)
- [Commits](https://github.com/webpack/webpack/compare/v5.95.0...v5.96.1)

---
updated-dependencies:
- dependency-name: webpack
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: webpack
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 benchmark/package.json |  2 +-
 package.json           |  2 +-
 yarn.lock              | 78 ++++++++++++++++++++++++++++++++++++++++--
 3 files changed, 77 insertions(+), 5 deletions(-)

diff --git a/benchmark/package.json b/benchmark/package.json
index e6e60ab62e..9df4cbd518 100644
--- a/benchmark/package.json
+++ b/benchmark/package.json
@@ -27,6 +27,6 @@
     "serve-static": "1.16.2",
     "swc-loader": "^0.2.6",
     "terser-webpack-plugin": "^5.3.10",
-    "webpack": "^5.95.0"
+    "webpack": "^5.96.1"
   }
 }
diff --git a/package.json b/package.json
index f543030563..c9bb8d1f9e 100644
--- a/package.json
+++ b/package.json
@@ -94,7 +94,7 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.6.3",
     "typescript-plugin-css-modules": "^5.1.0",
-    "webpack": "^5.95.0",
+    "webpack": "^5.96.1",
     "webpack-cli": "^5.1.4",
     "webpack-merge": "^6.0.1",
     "yargs": "^17.7.2"
diff --git a/yarn.lock b/yarn.lock
index 81ebce456e..68768929ba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3308,6 +3308,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/eslint-scope@npm:^3.7.7":
+  version: 3.7.7
+  resolution: "@types/eslint-scope@npm:3.7.7"
+  dependencies:
+    "@types/eslint": "npm:*"
+    "@types/estree": "npm:*"
+  checksum: 10/e2889a124aaab0b89af1bab5959847c5bec09809209255de0e63b9f54c629a94781daa04adb66bffcdd742f5e25a17614fb933965093c0eea64aacda4309380e
+  languageName: node
+  linkType: hard
+
+"@types/eslint@npm:*":
+  version: 9.6.1
+  resolution: "@types/eslint@npm:9.6.1"
+  dependencies:
+    "@types/estree": "npm:*"
+    "@types/json-schema": "npm:*"
+  checksum: 10/719fcd255760168a43d0e306ef87548e1e15bffe361d5f4022b0f266575637acc0ecb85604ac97879ee8ae83c6a6d0613b0ed31d0209ddf22a0fe6d608fc56fe
+  languageName: node
+  linkType: hard
+
+"@types/estree@npm:*, @types/estree@npm:^1.0.6":
+  version: 1.0.6
+  resolution: "@types/estree@npm:1.0.6"
+  checksum: 10/9d35d475095199c23e05b431bcdd1f6fec7380612aed068b14b2a08aa70494de8a9026765a5a91b1073f636fb0368f6d8973f518a31391d519e20c59388ed88d
+  languageName: node
+  linkType: hard
+
 "@types/estree@npm:1.0.5, @types/estree@npm:^1.0.0, @types/estree@npm:^1.0.5":
   version: 1.0.5
   resolution: "@types/estree@npm:1.0.5"
@@ -3480,7 +3507,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/json-schema@npm:^7.0.4, @types/json-schema@npm:^7.0.5, @types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9":
+"@types/json-schema@npm:*, @types/json-schema@npm:^7.0.4, @types/json-schema@npm:^7.0.5, @types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9":
   version: 7.0.15
   resolution: "@types/json-schema@npm:7.0.15"
   checksum: 10/1a3c3e06236e4c4aab89499c428d585527ce50c24fe8259e8b3926d3df4cfbbbcf306cfc73ddfb66cbafc973116efd15967020b0f738f63e09e64c7d260519e7
@@ -4241,7 +4268,7 @@ __metadata:
     ts-node: "npm:^10.9.2"
     typescript: "npm:^5.6.3"
     typescript-plugin-css-modules: "npm:^5.1.0"
-    webpack: "npm:^5.95.0"
+    webpack: "npm:^5.96.1"
     webpack-cli: "npm:^5.1.4"
     webpack-merge: "npm:^6.0.1"
     yargs: "npm:^17.7.2"
@@ -4611,6 +4638,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"acorn@npm:^8.14.0":
+  version: 8.14.0
+  resolution: "acorn@npm:8.14.0"
+  bin:
+    acorn: bin/acorn
+  checksum: 10/6df29c35556782ca9e632db461a7f97947772c6c1d5438a81f0c873a3da3a792487e83e404d1c6c25f70513e91aa18745f6eafb1fcc3a43ecd1920b21dd173d2
+  languageName: node
+  linkType: hard
+
 "address@npm:^1.0.1, address@npm:^1.1.2":
   version: 1.2.2
   resolution: "address@npm:1.2.2"
@@ -5207,7 +5243,7 @@ __metadata:
     serve-static: "npm:1.16.2"
     swc-loader: "npm:^0.2.6"
     terser-webpack-plugin: "npm:^5.3.10"
-    webpack: "npm:^5.95.0"
+    webpack: "npm:^5.96.1"
   languageName: unknown
   linkType: soft
 
@@ -17271,6 +17307,42 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webpack@npm:^5.96.1":
+  version: 5.96.1
+  resolution: "webpack@npm:5.96.1"
+  dependencies:
+    "@types/eslint-scope": "npm:^3.7.7"
+    "@types/estree": "npm:^1.0.6"
+    "@webassemblyjs/ast": "npm:^1.12.1"
+    "@webassemblyjs/wasm-edit": "npm:^1.12.1"
+    "@webassemblyjs/wasm-parser": "npm:^1.12.1"
+    acorn: "npm:^8.14.0"
+    browserslist: "npm:^4.24.0"
+    chrome-trace-event: "npm:^1.0.2"
+    enhanced-resolve: "npm:^5.17.1"
+    es-module-lexer: "npm:^1.2.1"
+    eslint-scope: "npm:5.1.1"
+    events: "npm:^3.2.0"
+    glob-to-regexp: "npm:^0.4.1"
+    graceful-fs: "npm:^4.2.11"
+    json-parse-even-better-errors: "npm:^2.3.1"
+    loader-runner: "npm:^4.2.0"
+    mime-types: "npm:^2.1.27"
+    neo-async: "npm:^2.6.2"
+    schema-utils: "npm:^3.2.0"
+    tapable: "npm:^2.1.1"
+    terser-webpack-plugin: "npm:^5.3.10"
+    watchpack: "npm:^2.4.1"
+    webpack-sources: "npm:^3.2.3"
+  peerDependenciesMeta:
+    webpack-cli:
+      optional: true
+  bin:
+    webpack: bin/webpack.js
+  checksum: 10/d3419ffd198252e1d0301bd0c072cee93172f3e47937c745aa8202691d2f5d529d4ba4a1965d1450ad89a1bcd3c1f70ae09e57232b0d01dd38d69c1060e964d5
+  languageName: node
+  linkType: hard
+
 "websocket-driver@npm:>=0.5.1, websocket-driver@npm:^0.7.4":
   version: 0.7.4
   resolution: "websocket-driver@npm:0.7.4"

From 0ed5c73c0136d8edb363dc0f85c56aec0e446e48 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 4 Nov 2024 11:55:19 +0300
Subject: [PATCH 13/19] build(deps-dev): Bump postcss-custom-media in the
 postcss group (#7884)

Bumps the postcss group with 1 update: [postcss-custom-media](https://github.com/csstools/postcss-plugins/tree/HEAD/plugins/postcss-custom-media).


Updates `postcss-custom-media` from 11.0.4 to 11.0.5
- [Changelog](https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-custom-media/CHANGELOG.md)
- [Commits](https://github.com/csstools/postcss-plugins/commits/HEAD/plugins/postcss-custom-media)

---
updated-dependencies:
- dependency-name: postcss-custom-media
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: postcss
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package.json |  2 +-
 yarn.lock    | 62 +++++++++++++++++++++++++++++++++-------------------
 2 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index c9bb8d1f9e..fa6a6c7922 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "mini-css-extract-plugin": "^2.9.2",
     "postcss": "^8.4.47",
     "postcss-cli": "^11.0.0",
-    "postcss-custom-media": "^11.0.4",
+    "postcss-custom-media": "^11.0.5",
     "postcss-gap-properties": "^6.0.0",
     "postcss-import": "^16.1.0",
     "postcss-loader": "^8.1.1",
diff --git a/yarn.lock b/yarn.lock
index 68768929ba..8ce798fade 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -695,17 +695,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@csstools/cascade-layer-name-parser@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "@csstools/cascade-layer-name-parser@npm:2.0.3"
+"@csstools/cascade-layer-name-parser@npm:^2.0.4":
+  version: 2.0.4
+  resolution: "@csstools/cascade-layer-name-parser@npm:2.0.4"
   peerDependencies:
-    "@csstools/css-parser-algorithms": ^3.0.3
-    "@csstools/css-tokenizer": ^3.0.2
-  checksum: 10/c9a3f36094f15d5e8d68c7350d0d41cccb5a620177981c0fa8b42ad0d2bcd3c06bb053a0c736857b087af93d28ce9361ae844c2ea63a4a01c695d3113d6cc759
+    "@csstools/css-parser-algorithms": ^3.0.4
+    "@csstools/css-tokenizer": ^3.0.3
+  checksum: 10/8c1d92f7840ecb402bce9b5770c9eb8ae000f42cb317a069cb10172a4e63d4dcbe1961f8bcf35f5106f8d162066f2bac3923e151d7cb5380b10fc265a62db5ea
   languageName: node
   linkType: hard
 
-"@csstools/css-parser-algorithms@npm:^3.0.1, @csstools/css-parser-algorithms@npm:^3.0.3":
+"@csstools/css-parser-algorithms@npm:^3.0.1":
   version: 3.0.3
   resolution: "@csstools/css-parser-algorithms@npm:3.0.3"
   peerDependencies:
@@ -714,13 +714,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@csstools/css-tokenizer@npm:^3.0.1, @csstools/css-tokenizer@npm:^3.0.2":
+"@csstools/css-parser-algorithms@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "@csstools/css-parser-algorithms@npm:3.0.4"
+  peerDependencies:
+    "@csstools/css-tokenizer": ^3.0.3
+  checksum: 10/dfb6926218d9f8ba25d8b43ea46c03863c819481f8c55e4de4925780eaab9e6bcd6bead1d56b4ef82d09fcd9d69a7db2750fa9db08eece9470fd499dc76d0edb
+  languageName: node
+  linkType: hard
+
+"@csstools/css-tokenizer@npm:^3.0.1":
   version: 3.0.2
   resolution: "@csstools/css-tokenizer@npm:3.0.2"
   checksum: 10/6453982ede998dbd8c222cdc5efa11375c1e7c9ad66c55b077ec23f2ecec1080aa0631818cdea191c36f0b8e1fd607408d13664a898299c2a594d93ef6fa62e9
   languageName: node
   linkType: hard
 
+"@csstools/css-tokenizer@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "@csstools/css-tokenizer@npm:3.0.3"
+  checksum: 10/6baa3160e426e1f177b8f10d54ec7a4a596090f65a05f16d7e9e4da049962a404eabc5f885f4867093702c259cd4080ac92a438326e22dea015201b3e71f5bbb
+  languageName: node
+  linkType: hard
+
 "@csstools/media-query-list-parser@npm:^3.0.1":
   version: 3.0.1
   resolution: "@csstools/media-query-list-parser@npm:3.0.1"
@@ -731,13 +747,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@csstools/media-query-list-parser@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "@csstools/media-query-list-parser@npm:4.0.1"
+"@csstools/media-query-list-parser@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "@csstools/media-query-list-parser@npm:4.0.2"
   peerDependencies:
-    "@csstools/css-parser-algorithms": ^3.0.3
-    "@csstools/css-tokenizer": ^3.0.2
-  checksum: 10/95b9e27a5ead3ee91e75859492fe3e68571bc7776e118739192126ef5278c5a59d4c264dfdf221bd694673d07a2b2878b766c70dd6d99c7b714aa6052b8b90f9
+    "@csstools/css-parser-algorithms": ^3.0.4
+    "@csstools/css-tokenizer": ^3.0.3
+  checksum: 10/8aae6337d21255d34e4f6dc6df213566e35bb769fe131006ea4200b643773f3213f8ed0ab011cd85dbe3426766c408d0fe1d04d18e821add9ae7f29cda0a8b26
   languageName: node
   linkType: hard
 
@@ -4241,7 +4257,7 @@ __metadata:
     mini-css-extract-plugin: "npm:^2.9.2"
     postcss: "npm:^8.4.47"
     postcss-cli: "npm:^11.0.0"
-    postcss-custom-media: "npm:^11.0.4"
+    postcss-custom-media: "npm:^11.0.5"
     postcss-gap-properties: "npm:^6.0.0"
     postcss-import: "npm:^16.1.0"
     postcss-loader: "npm:^8.1.1"
@@ -13037,17 +13053,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-custom-media@npm:^11.0.4":
-  version: 11.0.4
-  resolution: "postcss-custom-media@npm:11.0.4"
+"postcss-custom-media@npm:^11.0.5":
+  version: 11.0.5
+  resolution: "postcss-custom-media@npm:11.0.5"
   dependencies:
-    "@csstools/cascade-layer-name-parser": "npm:^2.0.3"
-    "@csstools/css-parser-algorithms": "npm:^3.0.3"
-    "@csstools/css-tokenizer": "npm:^3.0.2"
-    "@csstools/media-query-list-parser": "npm:^4.0.1"
+    "@csstools/cascade-layer-name-parser": "npm:^2.0.4"
+    "@csstools/css-parser-algorithms": "npm:^3.0.4"
+    "@csstools/css-tokenizer": "npm:^3.0.3"
+    "@csstools/media-query-list-parser": "npm:^4.0.2"
   peerDependencies:
     postcss: ^8.4
-  checksum: 10/097f4ef29bea599c95078de10e1d9d3df31760d77228f496a406d0efca0027ba1692b167c40d472e21e8f4d09d933ee4e4442b88056c269c059309b2ed128105
+  checksum: 10/4899ee7ba6fa8db8c639ee82074ad1941f73df53ec9afc6146820638ab0dc260f7a9692dead8872ad7497442bffba97f867d7615356e87e9d4b4b1a8168b837c
   languageName: node
   linkType: hard
 

From d59908b09bdbada781c783ae9030a2379d7c853e Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 5 Nov 2024 09:11:19 +0300
Subject: [PATCH 14/19] build(deps): Bump jscodeshift from 17.0.0 to 17.1.1
 (#7890)

Bumps [jscodeshift](https://github.com/facebook/jscodeshift) from 17.0.0 to 17.1.1.
- [Release notes](https://github.com/facebook/jscodeshift/releases)
- [Changelog](https://github.com/facebook/jscodeshift/blob/main/CHANGELOG.md)
- [Commits](https://github.com/facebook/jscodeshift/compare/v17.0.0...v17.1.1)

---
updated-dependencies:
- dependency-name: jscodeshift
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 packages/codemods/package.json |  2 +-
 yarn.lock                      | 51 +++++++++-------------------------
 2 files changed, 14 insertions(+), 39 deletions(-)

diff --git a/packages/codemods/package.json b/packages/codemods/package.json
index 67f7b9bf22..da8a45d1d1 100644
--- a/packages/codemods/package.json
+++ b/packages/codemods/package.json
@@ -17,7 +17,7 @@
     "chalk": "^4.1.2",
     "commander": "^12.1.0",
     "cross-spawn": "^7.0.3",
-    "jscodeshift": "^17.0.0",
+    "jscodeshift": "^17.1.1",
     "prompts": "^2.4.2",
     "typescript": "^5.6.3"
   },
diff --git a/yarn.lock b/yarn.lock
index 8ce798fade..145452633f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4151,7 +4151,7 @@ __metadata:
     commander: "npm:^12.1.0"
     cross-spawn: "npm:^7.0.3"
     jest: "npm:^29.7.0"
-    jscodeshift: "npm:^17.0.0"
+    jscodeshift: "npm:^17.1.1"
     prompts: "npm:^2.4.2"
     ts-node: "npm:^10.9.2"
     typescript: "npm:^5.6.3"
@@ -10928,9 +10928,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jscodeshift@npm:^17.0.0":
-  version: 17.0.0
-  resolution: "jscodeshift@npm:17.0.0"
+"jscodeshift@npm:^17.1.1":
+  version: 17.1.1
+  resolution: "jscodeshift@npm:17.1.1"
   dependencies:
     "@babel/core": "npm:^7.24.7"
     "@babel/parser": "npm:^7.24.7"
@@ -10948,7 +10948,7 @@ __metadata:
     neo-async: "npm:^2.5.0"
     picocolors: "npm:^1.0.1"
     recast: "npm:^0.23.9"
-    temp: "npm:^0.9.4"
+    tmp: "npm:^0.2.3"
     write-file-atomic: "npm:^5.0.1"
   peerDependencies:
     "@babel/preset-env": ^7.1.6
@@ -10957,7 +10957,7 @@ __metadata:
       optional: true
   bin:
     jscodeshift: bin/jscodeshift.js
-  checksum: 10/d47000c33775336332e1ee431354881ce25a42354a82c712e109f598eac90be747d412c85428e1fa0302136823e44e4f42487746d62752120cd6879665bcef0a
+  checksum: 10/89a92203e2653c68ae2f12332332ca014aeec8c6cd5ab6947ba53334abd97005b94c0c670c47f2878880d01b89775490ca8efe58494d71137c1f6abae630a53d
   languageName: node
   linkType: hard
 
@@ -12001,17 +12001,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mkdirp@npm:^0.5.1":
-  version: 0.5.6
-  resolution: "mkdirp@npm:0.5.6"
-  dependencies:
-    minimist: "npm:^1.2.6"
-  bin:
-    mkdirp: bin/cmd.js
-  checksum: 10/0c91b721bb12c3f9af4b77ebf73604baf350e64d80df91754dc509491ae93bf238581e59c7188360cec7cb62fc4100959245a42cfe01834efedc5e9d068376c2
-  languageName: node
-  linkType: hard
-
 "mkdirp@npm:^1.0.3":
   version: 1.0.4
   resolution: "mkdirp@npm:1.0.4"
@@ -14708,17 +14697,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rimraf@npm:~2.6.2":
-  version: 2.6.3
-  resolution: "rimraf@npm:2.6.3"
-  dependencies:
-    glob: "npm:^7.1.3"
-  bin:
-    rimraf: ./bin.js
-  checksum: 10/756419f2fa99aa119c46a9fc03e09d84ecf5421a80a72d1944c5088c9e4671e77128527a900a313ed9d3fdbdd37e2ae05486cd7e9116d5812d8c31f2399d7c86
-  languageName: node
-  linkType: hard
-
 "rollup@npm:^4.20.0":
   version: 4.22.4
   resolution: "rollup@npm:4.22.4"
@@ -16087,16 +16065,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"temp@npm:^0.9.4":
-  version: 0.9.4
-  resolution: "temp@npm:0.9.4"
-  dependencies:
-    mkdirp: "npm:^0.5.1"
-    rimraf: "npm:~2.6.2"
-  checksum: 10/38d40564656c6e8e3caee41c592b3cc076d257ab4746ae4a6a179c44eb4a6d3e8a19a08c7716c8e88756bb898d6e56dd0a9e0408249bbcb3c990a178c34d0571
-  languageName: node
-  linkType: hard
-
 "terser-webpack-plugin@npm:^5.3.1, terser-webpack-plugin@npm:^5.3.10, terser-webpack-plugin@npm:^5.3.3":
   version: 5.3.10
   resolution: "terser-webpack-plugin@npm:5.3.10"
@@ -16221,6 +16189,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tmp@npm:^0.2.3":
+  version: 0.2.3
+  resolution: "tmp@npm:0.2.3"
+  checksum: 10/7b13696787f159c9754793a83aa79a24f1522d47b87462ddb57c18ee93ff26c74cbb2b8d9138f571d2e0e765c728fb2739863a672b280528512c6d83d511c6fa
+  languageName: node
+  linkType: hard
+
 "tmpl@npm:1.0.5":
   version: 1.0.5
   resolution: "tmpl@npm:1.0.5"

From 47187e87003d5b1798c898d81d2a9f9a7f47a97c Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 5 Nov 2024 10:19:08 +0300
Subject: [PATCH 15/19] build(deps): Bump the storybook group across 1
 directory with 17 updates (#7893)

Bumps the storybook group with 17 updates in the / directory:

| Package | From | To |
| --- | --- | --- |
| [@storybook/react](https://github.com/storybookjs/storybook/tree/HEAD/code/renderers/react) | `8.3.6` | `8.4.2` |
| [@storybook/react-webpack5](https://github.com/storybookjs/storybook/tree/HEAD/code/frameworks/react-webpack5) | `8.3.6` | `8.4.2` |
| [storybook](https://github.com/storybookjs/storybook/tree/HEAD/code/lib/cli) | `8.3.6` | `8.4.2` |
| [@storybook/addon-a11y](https://github.com/storybookjs/storybook/tree/HEAD/code/addons/a11y) | `8.3.6` | `8.4.2` |
| [@storybook/addon-actions](https://github.com/storybookjs/storybook/tree/HEAD/code/addons/actions) | `8.3.6` | `8.4.2` |
| [@storybook/addon-essentials](https://github.com/storybookjs/storybook/tree/HEAD/code/addons/essentials) | `8.3.6` | `8.4.2` |
| [@storybook/addon-interactions](https://github.com/storybookjs/storybook/tree/HEAD/code/addons/interactions) | `8.3.6` | `8.4.2` |
| [@storybook/addon-links](https://github.com/storybookjs/storybook/tree/HEAD/code/addons/links) | `8.3.6` | `8.4.2` |
| [@storybook/blocks](https://github.com/storybookjs/storybook/tree/HEAD/code/lib/blocks) | `8.3.6` | `8.4.2` |
| [@storybook/components](https://github.com/storybookjs/storybook/tree/HEAD/code/deprecated/components) | `8.3.6` | `8.4.2` |
| [@storybook/core-events](https://github.com/storybookjs/storybook/tree/HEAD/code/lib/core-events) | `8.3.6` | `8.4.2` |
| [@storybook/docs-tools](https://github.com/storybookjs/storybook/tree/HEAD/code/lib/docs-tools) | `8.3.6` | `8.4.2` |
| [@storybook/manager-api](https://github.com/storybookjs/storybook/tree/HEAD/code/lib/manager-api) | `8.3.6` | `8.4.2` |
| [@storybook/preview-api](https://github.com/storybookjs/storybook/tree/HEAD/code/lib/preview-api) | `8.3.6` | `8.4.2` |
| [@storybook/test](https://github.com/storybookjs/storybook/tree/HEAD/code/lib/test) | `8.3.6` | `8.4.2` |
| [@storybook/theming](https://github.com/storybookjs/storybook/tree/HEAD/code/lib/theming) | `8.3.6` | `8.4.2` |
| [@storybook/types](https://github.com/storybookjs/storybook/tree/HEAD/code/lib/types) | `8.3.6` | `8.4.2` |



Updates `@storybook/react` from 8.3.6 to 8.4.2
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v8.4.2/code/renderers/react)

Updates `@storybook/react-webpack5` from 8.3.6 to 8.4.2
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v8.4.2/code/frameworks/react-webpack5)

Updates `storybook` from 8.3.6 to 8.4.2
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v8.4.2/code/lib/cli)

Updates `@storybook/addon-a11y` from 8.3.6 to 8.4.2
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v8.4.2/code/addons/a11y)

Updates `@storybook/addon-actions` from 8.3.6 to 8.4.2
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v8.4.2/code/addons/actions)

Updates `@storybook/addon-essentials` from 8.3.6 to 8.4.2
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v8.4.2/code/addons/essentials)

Updates `@storybook/addon-interactions` from 8.3.6 to 8.4.2
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v8.4.2/code/addons/interactions)

Updates `@storybook/addon-links` from 8.3.6 to 8.4.2
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v8.4.2/code/addons/links)

Updates `@storybook/blocks` from 8.3.6 to 8.4.2
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v8.4.2/code/lib/blocks)

Updates `@storybook/components` from 8.3.6 to 8.4.2
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v8.4.2/code/deprecated/components)

Updates `@storybook/core-events` from 8.3.6 to 8.4.2
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Commits](https://github.com/storybookjs/storybook/commits/v8.4.2/code/lib/core-events)

Updates `@storybook/docs-tools` from 8.3.6 to 8.4.2
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Commits](https://github.com/storybookjs/storybook/commits/v8.4.2/code/lib/docs-tools)

Updates `@storybook/manager-api` from 8.3.6 to 8.4.2
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Commits](https://github.com/storybookjs/storybook/commits/v8.4.2/code/lib/manager-api)

Updates `@storybook/preview-api` from 8.3.6 to 8.4.2
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Commits](https://github.com/storybookjs/storybook/commits/v8.4.2/code/lib/preview-api)

Updates `@storybook/test` from 8.3.6 to 8.4.2
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v8.4.2/code/lib/test)

Updates `@storybook/theming` from 8.3.6 to 8.4.2
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Commits](https://github.com/storybookjs/storybook/commits/v8.4.2/code/lib/theming)

Updates `@storybook/types` from 8.3.6 to 8.4.2
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Commits](https://github.com/storybookjs/storybook/commits/v8.4.2/code/lib/types)

---
updated-dependencies:
- dependency-name: "@storybook/react"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: storybook
- dependency-name: "@storybook/react-webpack5"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: storybook
- dependency-name: storybook
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: storybook
- dependency-name: "@storybook/addon-a11y"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: storybook
- dependency-name: "@storybook/addon-actions"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: storybook
- dependency-name: "@storybook/addon-essentials"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: storybook
- dependency-name: "@storybook/addon-interactions"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: storybook
- dependency-name: "@storybook/addon-links"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: storybook
- dependency-name: "@storybook/blocks"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: storybook
- dependency-name: "@storybook/components"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: storybook
- dependency-name: "@storybook/core-events"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: storybook
- dependency-name: "@storybook/docs-tools"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: storybook
- dependency-name: "@storybook/manager-api"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: storybook
- dependency-name: "@storybook/preview-api"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: storybook
- dependency-name: "@storybook/test"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: storybook
- dependency-name: "@storybook/theming"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: storybook
- dependency-name: "@storybook/types"
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: storybook
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 packages/vkui/package.json                   |   6 +-
 tools/storybook-addon-cartesian/package.json |  34 +-
 yarn.lock                                    | 942 +++++++------------
 3 files changed, 378 insertions(+), 604 deletions(-)

diff --git a/packages/vkui/package.json b/packages/vkui/package.json
index 739ff70f3b..e5bebc3f64 100644
--- a/packages/vkui/package.json
+++ b/packages/vkui/package.json
@@ -83,12 +83,12 @@
     "date-fns": "^4.1.0"
   },
   "devDependencies": {
-    "@storybook/react": "8.3.6",
-    "@storybook/react-webpack5": "8.3.6",
+    "@storybook/react": "8.4.2",
+    "@storybook/react-webpack5": "8.4.2",
     "@types/node": "*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "storybook": "8.3.6",
+    "storybook": "8.4.2",
     "ts-node": "*"
   },
   "size-limit": [
diff --git a/tools/storybook-addon-cartesian/package.json b/tools/storybook-addon-cartesian/package.json
index b96144f197..4275869dfe 100644
--- a/tools/storybook-addon-cartesian/package.json
+++ b/tools/storybook-addon-cartesian/package.json
@@ -10,27 +10,27 @@
   },
   "dependencies": {
     "@babel/core": "^7.26.0",
-    "@storybook/addon-a11y": "8.3.6",
-    "@storybook/addon-actions": "8.3.6",
-    "@storybook/addon-essentials": "8.3.6",
-    "@storybook/addon-interactions": "8.3.6",
-    "@storybook/addon-links": "8.3.6",
+    "@storybook/addon-a11y": "8.4.2",
+    "@storybook/addon-actions": "8.4.2",
+    "@storybook/addon-essentials": "8.4.2",
+    "@storybook/addon-interactions": "8.4.2",
+    "@storybook/addon-links": "8.4.2",
     "@storybook/addon-webpack5-compiler-swc": "1.0.5",
-    "@storybook/blocks": "8.3.6",
-    "@storybook/components": "8.3.6",
-    "@storybook/core-events": "^8.3.6",
-    "@storybook/docs-tools": "^8.3.6",
-    "@storybook/manager-api": "8.3.6",
-    "@storybook/preview-api": "8.3.6",
-    "@storybook/react": "8.3.6",
-    "@storybook/react-webpack5": "8.3.6",
-    "@storybook/test": "^8.3.6",
-    "@storybook/theming": "8.3.6",
-    "@storybook/types": "8.3.6",
+    "@storybook/blocks": "8.4.2",
+    "@storybook/components": "8.4.2",
+    "@storybook/core-events": "^8.4.2",
+    "@storybook/docs-tools": "^8.4.2",
+    "@storybook/manager-api": "8.4.2",
+    "@storybook/preview-api": "8.4.2",
+    "@storybook/react": "8.4.2",
+    "@storybook/react-webpack5": "8.4.2",
+    "@storybook/test": "^8.4.2",
+    "@storybook/theming": "8.4.2",
+    "@storybook/types": "8.4.2",
     "@swc/core": "*",
     "react": "*",
     "react-dom": "*",
-    "storybook": "8.3.6",
+    "storybook": "8.4.2",
     "typescript": "*"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 145452633f..15b84cabf1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -665,13 +665,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@base2/pretty-print-object@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@base2/pretty-print-object@npm:1.0.1"
-  checksum: 10/c1b78a521ac712baa076589f3bc81318d07c34a5747e9177b6af37043592252587d98f9b7b59ec174968c6bea31a99fe4d7884121173a449b75fe602b7eb2839
-  languageName: node
-  linkType: hard
-
 "@bcoe/v8-coverage@npm:^0.2.3":
   version: 0.2.3
   resolution: "@bcoe/v8-coverage@npm:0.2.3"
@@ -796,9 +789,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/aix-ppc64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/aix-ppc64@npm:0.23.1"
+"@esbuild/aix-ppc64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/aix-ppc64@npm:0.24.0"
   conditions: os=aix & cpu=ppc64
   languageName: node
   linkType: hard
@@ -810,9 +803,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/android-arm64@npm:0.23.1"
+"@esbuild/android-arm64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/android-arm64@npm:0.24.0"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
@@ -824,9 +817,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/android-arm@npm:0.23.1"
+"@esbuild/android-arm@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/android-arm@npm:0.24.0"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
@@ -838,9 +831,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/android-x64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/android-x64@npm:0.23.1"
+"@esbuild/android-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/android-x64@npm:0.24.0"
   conditions: os=android & cpu=x64
   languageName: node
   linkType: hard
@@ -852,9 +845,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/darwin-arm64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/darwin-arm64@npm:0.23.1"
+"@esbuild/darwin-arm64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/darwin-arm64@npm:0.24.0"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
@@ -866,9 +859,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/darwin-x64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/darwin-x64@npm:0.23.1"
+"@esbuild/darwin-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/darwin-x64@npm:0.24.0"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
@@ -880,9 +873,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/freebsd-arm64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/freebsd-arm64@npm:0.23.1"
+"@esbuild/freebsd-arm64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/freebsd-arm64@npm:0.24.0"
   conditions: os=freebsd & cpu=arm64
   languageName: node
   linkType: hard
@@ -894,9 +887,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/freebsd-x64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/freebsd-x64@npm:0.23.1"
+"@esbuild/freebsd-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/freebsd-x64@npm:0.24.0"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
@@ -908,9 +901,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-arm64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/linux-arm64@npm:0.23.1"
+"@esbuild/linux-arm64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-arm64@npm:0.24.0"
   conditions: os=linux & cpu=arm64
   languageName: node
   linkType: hard
@@ -922,9 +915,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-arm@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/linux-arm@npm:0.23.1"
+"@esbuild/linux-arm@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-arm@npm:0.24.0"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
@@ -936,9 +929,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-ia32@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/linux-ia32@npm:0.23.1"
+"@esbuild/linux-ia32@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-ia32@npm:0.24.0"
   conditions: os=linux & cpu=ia32
   languageName: node
   linkType: hard
@@ -950,9 +943,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-loong64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/linux-loong64@npm:0.23.1"
+"@esbuild/linux-loong64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-loong64@npm:0.24.0"
   conditions: os=linux & cpu=loong64
   languageName: node
   linkType: hard
@@ -964,9 +957,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-mips64el@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/linux-mips64el@npm:0.23.1"
+"@esbuild/linux-mips64el@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-mips64el@npm:0.24.0"
   conditions: os=linux & cpu=mips64el
   languageName: node
   linkType: hard
@@ -978,9 +971,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-ppc64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/linux-ppc64@npm:0.23.1"
+"@esbuild/linux-ppc64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-ppc64@npm:0.24.0"
   conditions: os=linux & cpu=ppc64
   languageName: node
   linkType: hard
@@ -992,9 +985,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-riscv64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/linux-riscv64@npm:0.23.1"
+"@esbuild/linux-riscv64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-riscv64@npm:0.24.0"
   conditions: os=linux & cpu=riscv64
   languageName: node
   linkType: hard
@@ -1006,9 +999,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-s390x@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/linux-s390x@npm:0.23.1"
+"@esbuild/linux-s390x@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-s390x@npm:0.24.0"
   conditions: os=linux & cpu=s390x
   languageName: node
   linkType: hard
@@ -1020,9 +1013,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-x64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/linux-x64@npm:0.23.1"
+"@esbuild/linux-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-x64@npm:0.24.0"
   conditions: os=linux & cpu=x64
   languageName: node
   linkType: hard
@@ -1034,16 +1027,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/netbsd-x64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/netbsd-x64@npm:0.23.1"
+"@esbuild/netbsd-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/netbsd-x64@npm:0.24.0"
   conditions: os=netbsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/openbsd-arm64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/openbsd-arm64@npm:0.23.1"
+"@esbuild/openbsd-arm64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/openbsd-arm64@npm:0.24.0"
   conditions: os=openbsd & cpu=arm64
   languageName: node
   linkType: hard
@@ -1055,9 +1048,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/openbsd-x64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/openbsd-x64@npm:0.23.1"
+"@esbuild/openbsd-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/openbsd-x64@npm:0.24.0"
   conditions: os=openbsd & cpu=x64
   languageName: node
   linkType: hard
@@ -1069,9 +1062,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/sunos-x64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/sunos-x64@npm:0.23.1"
+"@esbuild/sunos-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/sunos-x64@npm:0.24.0"
   conditions: os=sunos & cpu=x64
   languageName: node
   linkType: hard
@@ -1083,9 +1076,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/win32-arm64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/win32-arm64@npm:0.23.1"
+"@esbuild/win32-arm64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/win32-arm64@npm:0.24.0"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
@@ -1097,9 +1090,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/win32-ia32@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/win32-ia32@npm:0.23.1"
+"@esbuild/win32-ia32@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/win32-ia32@npm:0.24.0"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
@@ -1111,9 +1104,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/win32-x64@npm:0.23.1":
-  version: 0.23.1
-  resolution: "@esbuild/win32-x64@npm:0.23.1"
+"@esbuild/win32-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/win32-x64@npm:0.24.0"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -1821,27 +1814,27 @@ __metadata:
   resolution: "@project-tools/storybook-addon-cartesian@workspace:tools/storybook-addon-cartesian"
   dependencies:
     "@babel/core": "npm:^7.26.0"
-    "@storybook/addon-a11y": "npm:8.3.6"
-    "@storybook/addon-actions": "npm:8.3.6"
-    "@storybook/addon-essentials": "npm:8.3.6"
-    "@storybook/addon-interactions": "npm:8.3.6"
-    "@storybook/addon-links": "npm:8.3.6"
+    "@storybook/addon-a11y": "npm:8.4.2"
+    "@storybook/addon-actions": "npm:8.4.2"
+    "@storybook/addon-essentials": "npm:8.4.2"
+    "@storybook/addon-interactions": "npm:8.4.2"
+    "@storybook/addon-links": "npm:8.4.2"
     "@storybook/addon-webpack5-compiler-swc": "npm:1.0.5"
-    "@storybook/blocks": "npm:8.3.6"
-    "@storybook/components": "npm:8.3.6"
-    "@storybook/core-events": "npm:^8.3.6"
-    "@storybook/docs-tools": "npm:^8.3.6"
-    "@storybook/manager-api": "npm:8.3.6"
-    "@storybook/preview-api": "npm:8.3.6"
-    "@storybook/react": "npm:8.3.6"
-    "@storybook/react-webpack5": "npm:8.3.6"
-    "@storybook/test": "npm:^8.3.6"
-    "@storybook/theming": "npm:8.3.6"
-    "@storybook/types": "npm:8.3.6"
+    "@storybook/blocks": "npm:8.4.2"
+    "@storybook/components": "npm:8.4.2"
+    "@storybook/core-events": "npm:^8.4.2"
+    "@storybook/docs-tools": "npm:^8.4.2"
+    "@storybook/manager-api": "npm:8.4.2"
+    "@storybook/preview-api": "npm:8.4.2"
+    "@storybook/react": "npm:8.4.2"
+    "@storybook/react-webpack5": "npm:8.4.2"
+    "@storybook/test": "npm:^8.4.2"
+    "@storybook/theming": "npm:8.4.2"
+    "@storybook/types": "npm:8.4.2"
     "@swc/core": "npm:*"
     react: "npm:*"
     react-dom: "npm:*"
-    storybook: "npm:8.3.6"
+    storybook: "npm:8.4.2"
     typescript: "npm:*"
   languageName: unknown
   linkType: soft
@@ -2207,21 +2200,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-a11y@npm:8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/addon-a11y@npm:8.3.6"
+"@storybook/addon-a11y@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/addon-a11y@npm:8.4.2"
   dependencies:
-    "@storybook/addon-highlight": "npm:8.3.6"
+    "@storybook/addon-highlight": "npm:8.4.2"
     axe-core: "npm:^4.2.0"
   peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10/ea7dfc57319e69824297291f87b32f1389c27554b69016178a9224db9cb0e055b0873d5a21ca4b944e947309575ad891cc3044e93d91633ce472ccb16678b48e
+    storybook: ^8.4.2
+  checksum: 10/df093c431e579cec6f353f300ccfc9ae33535508b9b4340a0f5a0bbf2449dd1a4483b5214b3904b71e996ebde0c8e9b73e17d5fd692ced49b285b5e749a3f61a
   languageName: node
   linkType: hard
 
-"@storybook/addon-actions@npm:8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/addon-actions@npm:8.3.6"
+"@storybook/addon-actions@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/addon-actions@npm:8.4.2"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     "@types/uuid": "npm:^9.0.1"
@@ -2229,164 +2222,158 @@ __metadata:
     polished: "npm:^4.2.2"
     uuid: "npm:^9.0.0"
   peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10/94b5832dfab5494570ee06b39ccf4d0ae119332c8db479b0ef73aa9e06c853808aca642e14aca26c713ddfbaccccfcc56b8d38429d4d54d9d96fb4223474e406
+    storybook: ^8.4.2
+  checksum: 10/c00b213e42ea085a19162448b5c35d2439be7aa18425fc4c535e50b2cb187c3c93d6603e7c7727258e1b8abdb04d20d60eacf3bd0e2bec86a1a5df2c043bf3d7
   languageName: node
   linkType: hard
 
-"@storybook/addon-backgrounds@npm:8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/addon-backgrounds@npm:8.3.6"
+"@storybook/addon-backgrounds@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/addon-backgrounds@npm:8.4.2"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     memoizerific: "npm:^1.11.3"
     ts-dedent: "npm:^2.0.0"
   peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10/a8eaf489d7a6accbc838e7949b17540a0377526a45ca1babba44128c3a6d5a7e691b39ce41885ac2e191662bb7db9c912b833832a035dffe8a251ded0431a792
+    storybook: ^8.4.2
+  checksum: 10/56f2c8bcd5c32fd071baf14764b1f78dacfc25d12549686451043c8864c3e8ef56dc064ff91308dc4f37c842feb7a2993f0e29185e19194b6063bbadaafbd044
   languageName: node
   linkType: hard
 
-"@storybook/addon-controls@npm:8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/addon-controls@npm:8.3.6"
+"@storybook/addon-controls@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/addon-controls@npm:8.4.2"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     dequal: "npm:^2.0.2"
-    lodash: "npm:^4.17.21"
     ts-dedent: "npm:^2.0.0"
   peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10/0ea4df71f2a12252c559d8b9beeefad17358dea5cc675e03a76a9effba9e48b3fa42d2f194c62e9accd8bb86bbf64078bd9d03f134d5bfa903adfdacbcd638ea
+    storybook: ^8.4.2
+  checksum: 10/ee23a051be689ac6d7b4d4a5e2cc5429dadfe556a4daa9d347f55bef0a6110dce4a5d68f7afe18c04817d4960f048b041eeb6cc9555031f620d78a52a19e4229
   languageName: node
   linkType: hard
 
-"@storybook/addon-docs@npm:8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/addon-docs@npm:8.3.6"
+"@storybook/addon-docs@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/addon-docs@npm:8.4.2"
   dependencies:
     "@mdx-js/react": "npm:^3.0.0"
-    "@storybook/blocks": "npm:8.3.6"
-    "@storybook/csf-plugin": "npm:8.3.6"
-    "@storybook/global": "npm:^5.0.0"
-    "@storybook/react-dom-shim": "npm:8.3.6"
-    "@types/react": "npm:^16.8.0 || ^17.0.0 || ^18.0.0"
-    fs-extra: "npm:^11.1.0"
+    "@storybook/blocks": "npm:8.4.2"
+    "@storybook/csf-plugin": "npm:8.4.2"
+    "@storybook/react-dom-shim": "npm:8.4.2"
     react: "npm:^16.8.0 || ^17.0.0 || ^18.0.0"
     react-dom: "npm:^16.8.0 || ^17.0.0 || ^18.0.0"
-    rehype-external-links: "npm:^3.0.0"
-    rehype-slug: "npm:^6.0.0"
     ts-dedent: "npm:^2.0.0"
   peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10/8c8ae44903ddd8e100c0da3952d7c83dace3b1fd7a87531263b487dca378122d2273a57afd8b18006ddf3ae1c3473f5a197c44742843e92dd724734b9c5adeb3
+    storybook: ^8.4.2
+  checksum: 10/06510b9894ac6b4d9324dec037e22b1fd882be8962fce4213a10746a2d23660a231373d70aa56f8763a5b65f2eb1a3e7e64f3228a687e36818768665e5f8e01e
   languageName: node
   linkType: hard
 
-"@storybook/addon-essentials@npm:8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/addon-essentials@npm:8.3.6"
-  dependencies:
-    "@storybook/addon-actions": "npm:8.3.6"
-    "@storybook/addon-backgrounds": "npm:8.3.6"
-    "@storybook/addon-controls": "npm:8.3.6"
-    "@storybook/addon-docs": "npm:8.3.6"
-    "@storybook/addon-highlight": "npm:8.3.6"
-    "@storybook/addon-measure": "npm:8.3.6"
-    "@storybook/addon-outline": "npm:8.3.6"
-    "@storybook/addon-toolbars": "npm:8.3.6"
-    "@storybook/addon-viewport": "npm:8.3.6"
+"@storybook/addon-essentials@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/addon-essentials@npm:8.4.2"
+  dependencies:
+    "@storybook/addon-actions": "npm:8.4.2"
+    "@storybook/addon-backgrounds": "npm:8.4.2"
+    "@storybook/addon-controls": "npm:8.4.2"
+    "@storybook/addon-docs": "npm:8.4.2"
+    "@storybook/addon-highlight": "npm:8.4.2"
+    "@storybook/addon-measure": "npm:8.4.2"
+    "@storybook/addon-outline": "npm:8.4.2"
+    "@storybook/addon-toolbars": "npm:8.4.2"
+    "@storybook/addon-viewport": "npm:8.4.2"
     ts-dedent: "npm:^2.0.0"
   peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10/4b15ece66548adfefe41bcfed67aa60526253a47b36245fa63b523986e106f7399b6a1720f59a260ae89a7629b4ebefafca3a19853c5ccecd0b2f259f8dd0c3a
+    storybook: ^8.4.2
+  checksum: 10/951da2192a63d985e9af2e1e803bbe8bd6d64a87f50644034a55eb8bdc2ad0844e87836437d5c494eff3e94c8eae894d5f28bbef4b9cb99ef7e5fad573e1980d
   languageName: node
   linkType: hard
 
-"@storybook/addon-highlight@npm:8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/addon-highlight@npm:8.3.6"
+"@storybook/addon-highlight@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/addon-highlight@npm:8.4.2"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
   peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10/948f295e0196d7a4669095859286dbfce463be220d1d8adcca578ba40c888f1879816ba3343db1a286cfe52bc79ae554314def76d6ec11e12493192c13eea2e5
+    storybook: ^8.4.2
+  checksum: 10/81bdd9d758aa2b2faaa19ae6e27b6367e8522db3e8f6f2c72a452079ab35abf220472ff7ee6f7ed105dcfa7c23a2300df4753f8b5b5850a706a4c60492567735
   languageName: node
   linkType: hard
 
-"@storybook/addon-interactions@npm:8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/addon-interactions@npm:8.3.6"
+"@storybook/addon-interactions@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/addon-interactions@npm:8.4.2"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/instrumenter": "npm:8.3.6"
-    "@storybook/test": "npm:8.3.6"
+    "@storybook/instrumenter": "npm:8.4.2"
+    "@storybook/test": "npm:8.4.2"
     polished: "npm:^4.2.2"
     ts-dedent: "npm:^2.2.0"
   peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10/ddf4b0e534cc2b03001a76410475abf45c46f2900f016e682569d294640ffcda2ac0c8df3252225a48cc9641048936e1e62d26ffd7da2fabe650b774cba44992
+    storybook: ^8.4.2
+  checksum: 10/a0ac4c473d5ce8a0cc2c56897faf3845ab3fa51c0d6ff217d009de9850033549ffe9653d7821284c7e1947efb9a38beb34bd4cf4788d009f3edc027a6f5b37eb
   languageName: node
   linkType: hard
 
-"@storybook/addon-links@npm:8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/addon-links@npm:8.3.6"
+"@storybook/addon-links@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/addon-links@npm:8.4.2"
   dependencies:
     "@storybook/csf": "npm:^0.1.11"
     "@storybook/global": "npm:^5.0.0"
     ts-dedent: "npm:^2.0.0"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-    storybook: ^8.3.6
+    storybook: ^8.4.2
   peerDependenciesMeta:
     react:
       optional: true
-  checksum: 10/1c6a1483098e5f1292824cb038d7a0efae78a8aee86e940092200b646501a6e4713a24e422fd3dd25781f17e08276dc5156cf3f4838b92a029fff2b4f3eb4e84
+  checksum: 10/f23a29ffe9c7d8eb16032c4abba6b325dfea010840f9f3aa8cf27ea6699631a64aa065a796bd685bd35c39dcfdee9a3db51a38bc0bed452ce2c5818b523820b5
   languageName: node
   linkType: hard
 
-"@storybook/addon-measure@npm:8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/addon-measure@npm:8.3.6"
+"@storybook/addon-measure@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/addon-measure@npm:8.4.2"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     tiny-invariant: "npm:^1.3.1"
   peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10/cec0d3517ccdbe61e09906154929381cdd9ded1ac50391bf5530144e4ef40e8f46f1c0f8cadf41c382a98209df1c9c9c156c0b1acf3038526f24a92cc9082260
+    storybook: ^8.4.2
+  checksum: 10/48a2f3eccee2504777ac9c0fe267d3f91785674bb9a106c2610fa57912f65b2c2d32de76d3c62fe88a9d95985099283f0e55ac17b7593dece6ab3fb1657085c1
   languageName: node
   linkType: hard
 
-"@storybook/addon-outline@npm:8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/addon-outline@npm:8.3.6"
+"@storybook/addon-outline@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/addon-outline@npm:8.4.2"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     ts-dedent: "npm:^2.0.0"
   peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10/8b63ca2a5a6c5cd30fc4359f05f911825ff54946508a458aa8803b46cbde8badf470ffd9521480eb0be52eb00c064ccb1181170dcd0b621db091f52b04177b40
+    storybook: ^8.4.2
+  checksum: 10/b43804fbbca21ee8790c82cd32559de551e14bd010507d9c6d8eac2afe0849372a44701d91d2c4baba524bef9519193ee9cf87b1e9cfaa4d868bcce82b7d57b3
   languageName: node
   linkType: hard
 
-"@storybook/addon-toolbars@npm:8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/addon-toolbars@npm:8.3.6"
+"@storybook/addon-toolbars@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/addon-toolbars@npm:8.4.2"
   peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10/09ae00f53e92735735eee645b35fca80e3dce29d39a0821f675e0f0bf6aae1ffe94b6545eb132da4026a86a77b352b2709956f742b5906d8caccabc1f72f948a
+    storybook: ^8.4.2
+  checksum: 10/294019d0081874ff15fc846768f3743e11278f6a1d211f413bfcdbc5ca9415a80ac478523cae51fcfe1c77277a32bad9745362c8a0a1bd053570e07df615af95
   languageName: node
   linkType: hard
 
-"@storybook/addon-viewport@npm:8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/addon-viewport@npm:8.3.6"
+"@storybook/addon-viewport@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/addon-viewport@npm:8.4.2"
   dependencies:
     memoizerific: "npm:^1.11.3"
   peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10/b9e09004b742dabbd115cec74a75656b01aef44c3476508cdfbdee24efbcb50b90470e66bd6bd735e804139e36aa65fea4d96c8c8f92b08153e6dde764f55943
+    storybook: ^8.4.2
+  checksum: 10/7d2c0fa6ed73030cf718a306dd0c327006f54747801e13a7037416ca746ff92f3d341820744de08e651ed746e0f5bb50104a2c57b17b6f4de3ef0f8987861020
   languageName: node
   linkType: hard
 
@@ -2400,42 +2387,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/blocks@npm:8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/blocks@npm:8.3.6"
+"@storybook/blocks@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/blocks@npm:8.4.2"
   dependencies:
     "@storybook/csf": "npm:^0.1.11"
-    "@storybook/global": "npm:^5.0.0"
-    "@storybook/icons": "npm:^1.2.10"
-    "@types/lodash": "npm:^4.14.167"
-    color-convert: "npm:^2.0.1"
-    dequal: "npm:^2.0.2"
-    lodash: "npm:^4.17.21"
-    markdown-to-jsx: "npm:^7.4.5"
-    memoizerific: "npm:^1.11.3"
-    polished: "npm:^4.2.2"
-    react-colorful: "npm:^5.1.2"
-    telejson: "npm:^7.2.0"
+    "@storybook/icons": "npm:^1.2.12"
     ts-dedent: "npm:^2.0.0"
-    util-deprecate: "npm:^1.0.2"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-    storybook: ^8.3.6
+    storybook: ^8.4.2
   peerDependenciesMeta:
     react:
       optional: true
     react-dom:
       optional: true
-  checksum: 10/db3b4676602c52af32de06032ed15a7b7723138675be0f27d6ac0f806806dab58b8ba0d97a69ff33e01c169e47bccb6b2f25df3e8b472287c76ae9da40be5a6b
+  checksum: 10/88880e7c13752fe1323cd8eeb93005ab4493c4f024ef3119462dc160e57a985979756a64e0d6e9f374c0f510adcd0e7141d5b7f52bbe255e1c3fbf4ce0cbb896
   languageName: node
   linkType: hard
 
-"@storybook/builder-webpack5@npm:8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/builder-webpack5@npm:8.3.6"
+"@storybook/builder-webpack5@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/builder-webpack5@npm:8.4.2"
   dependencies:
-    "@storybook/core-webpack": "npm:8.3.6"
+    "@storybook/core-webpack": "npm:8.4.2"
     "@types/node": "npm:^22.0.0"
     "@types/semver": "npm:^7.3.4"
     browser-assert: "npm:^1.2.1"
@@ -2444,9 +2420,7 @@ __metadata:
     constants-browserify: "npm:^1.0.0"
     css-loader: "npm:^6.7.1"
     es-module-lexer: "npm:^1.5.0"
-    express: "npm:^4.19.2"
     fork-ts-checker-webpack-plugin: "npm:^8.0.0"
-    fs-extra: "npm:^11.1.0"
     html-webpack-plugin: "npm:^5.5.0"
     magic-string: "npm:^0.30.5"
     path-browserify: "npm:^1.0.1"
@@ -2463,73 +2437,76 @@ __metadata:
     webpack-hot-middleware: "npm:^2.25.1"
     webpack-virtual-modules: "npm:^0.6.0"
   peerDependencies:
-    storybook: ^8.3.6
+    storybook: ^8.4.2
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10/f1752dacf2efdf4291039601f9509fd516c1adcb4b06d4545bca202144f81baa6a04d8839ba5e0ff07f4307bc448104aa9965f251a5a409e126acd9e8e19b9db
+  checksum: 10/d67458e1337c8e403f6b4914d5f00d99d3dbd0ec2d1e3bdd7f2eb7a9f0c5acc4d78db45e30c6be1fea48b502d37bda46be41508ed258152f97e7008249c95aed
   languageName: node
   linkType: hard
 
-"@storybook/components@npm:8.3.6, @storybook/components@npm:^8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/components@npm:8.3.6"
+"@storybook/components@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/components@npm:8.4.2"
   peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10/778a114ddba6bd71ce18a8659c4c8b9b4cbcfa5665a68e3bae9467c492a218c2d95ded0825cc920984a6017f12ce811f48517812eb0de2183623cd06be677d7a
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: 10/52c7885763f3154215b8f9fda57fe4af62e5194722bca90f35769a74aee411bf552d96455d1c2101404e30b2b0a4ed2c57c21a365ecbf18124a252538e15e83e
   languageName: node
   linkType: hard
 
-"@storybook/core-events@npm:^8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/core-events@npm:8.3.6"
+"@storybook/core-events@npm:^8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/core-events@npm:8.4.2"
   peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10/bcf7a0f86cfaace4394eae8c7b747f5265e59304f5a4adc7fab266f09166e77896729d556319fcfcb5a6b6608ef1e6451f2c0a1e27832c7d870f0e298c40f6f5
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: 10/16c13267d0795050c769419f5f69a3e20e8487d8019ddf6b56df154c7ea5d99f5ec4b59a284d3b197c97a9b303b6b6f3026612f75d6cca968a9ac109b5c04e89
   languageName: node
   linkType: hard
 
-"@storybook/core-webpack@npm:8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/core-webpack@npm:8.3.6"
+"@storybook/core-webpack@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/core-webpack@npm:8.4.2"
   dependencies:
     "@types/node": "npm:^22.0.0"
     ts-dedent: "npm:^2.0.0"
   peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10/d842582b494712bf96e5a6346e7dc5f9af2589425acc7fe6a593137f6a203b4a43d522a1c5ba92b1d6ef67c19cc5ce23c23f97a5b3a2a70e26b37b2a72e4aaaa
+    storybook: ^8.4.2
+  checksum: 10/8e6d75e70720743bd299855277cbd5a7bb00c286e715050fa8c1c7369d2e4fce7b69cee1a2cd56475760ad3ea3931e4a76c4eb61d8d70a447310414057a6bfb9
   languageName: node
   linkType: hard
 
-"@storybook/core@npm:8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/core@npm:8.3.6"
+"@storybook/core@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/core@npm:8.4.2"
   dependencies:
     "@storybook/csf": "npm:^0.1.11"
-    "@types/express": "npm:^4.17.21"
     better-opn: "npm:^3.0.2"
     browser-assert: "npm:^1.2.1"
-    esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0"
+    esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0"
     esbuild-register: "npm:^3.5.0"
-    express: "npm:^4.19.2"
     jsdoc-type-pratt-parser: "npm:^4.0.0"
     process: "npm:^0.11.10"
     recast: "npm:^0.23.5"
     semver: "npm:^7.6.2"
     util: "npm:^0.12.5"
     ws: "npm:^8.2.3"
-  checksum: 10/7163a919c6a1bb65acdfe28f7e8f3f481c982867f04bbf8bf8e98ef96e06da116d7ac1ca2442b6584e2b3a94521d8084082186f4632c44f50529ed7447956e5b
+  peerDependencies:
+    prettier: ^2 || ^3
+  peerDependenciesMeta:
+    prettier:
+      optional: true
+  checksum: 10/f7e1b1b50fbe038c5553695086775eca34de4ebee3dabc28b9163f37e348565a50a937231d0eed45291f9d52478c63bdf2065a99ad4826816fcd81e1652c3382
   languageName: node
   linkType: hard
 
-"@storybook/csf-plugin@npm:8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/csf-plugin@npm:8.3.6"
+"@storybook/csf-plugin@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/csf-plugin@npm:8.4.2"
   dependencies:
     unplugin: "npm:^1.3.1"
   peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10/08cd3f8563808889877484f112bca7bca496f3ea195e18660941f11644422282062135a40e0f5f732fee9b5d7a214baddf2a9e58eb10d5ff54bd30b61ee0923d
+    storybook: ^8.4.2
+  checksum: 10/ec787be0a4fe2928a2675fe6bca5799f0bff8c66e50cea7bed198a188b19ee57257266b0255c5226a7da97928758b86c978afecc3ee0e2bb1f21fe0e7fdaf0c5
   languageName: node
   linkType: hard
 
@@ -2542,12 +2519,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/docs-tools@npm:^8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/docs-tools@npm:8.3.6"
+"@storybook/docs-tools@npm:^8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/docs-tools@npm:8.4.2"
   peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10/70f4eb2b6a25ceadf3168cffd7964f33b6bde9f99e0d9fbf7da3e21c8d526f30ab42a0e2b50ba06948f84f4adecd88a089ea77a5a28c7e3de72813184308afed
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: 10/fa2de0e0eddf2ec5ed3b8ebb7d742729ee12e1475b0df28d6189839450d12158d7edd8da78c1d6390b8df76305af7cc2bdc340d8083694f607611b9ba8e9fb85
   languageName: node
   linkType: hard
 
@@ -2558,49 +2535,47 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/icons@npm:^1.2.10":
-  version: 1.2.10
-  resolution: "@storybook/icons@npm:1.2.10"
+"@storybook/icons@npm:^1.2.12":
+  version: 1.2.12
+  resolution: "@storybook/icons@npm:1.2.12"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10/fad929a7e3c7a1a0fbf6b924b0be73f557b1bba9519faa15422482f89513ceb4b649444c224ee3d1dfbdce3616e684063cff23da08f6b1dd96f1aff4381388a6
+  checksum: 10/5df56f0856764ed7e4bb24ef7a08a8a9c93f8eedcb16dac062f1dfd3bd1fe6cb4a0aa5a0794083d95e31c04960d126a4d2028cfb4c53681bf05513bb38eae9d2
   languageName: node
   linkType: hard
 
-"@storybook/instrumenter@npm:8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/instrumenter@npm:8.3.6"
+"@storybook/instrumenter@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/instrumenter@npm:8.4.2"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
-    "@vitest/utils": "npm:^2.0.5"
-    util: "npm:^0.12.4"
+    "@vitest/utils": "npm:^2.1.1"
   peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10/bc911ea2338e726fe18fc0d1391021840c7a8c00d2a2d69a20c67c6f4a57be23bf08d38a71fee0fc36bd41a6c79ba5fa581a56e7702ff7e01baef11c982cd00e
+    storybook: ^8.4.2
+  checksum: 10/b6d48ffe6a1ad1fca0d296438e2114df6631667ccda803595d54c71732d0bb7dad086d5465254ba914f4666363018bf1df48cdc8304ad6b6c7a24b87164f7d95
   languageName: node
   linkType: hard
 
-"@storybook/manager-api@npm:8.3.6, @storybook/manager-api@npm:^8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/manager-api@npm:8.3.6"
+"@storybook/manager-api@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/manager-api@npm:8.4.2"
   peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10/94faf62726b948c2f8e52e15ac99f4ca2f5884a874fbecda6a81e58a03ff316d17ed36c8c146bd388bb58dad2a2bd09cd61c6d7fc1ff2cddfc774c2aed34e37c
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: 10/61b8f845f3271c2dd84597a94c2905a785949a2467582663165e476f455f1942b9c3be77a08f5101848d8a75ca23aa9f7db620d81f202d19093af7695d6ca8a0
   languageName: node
   linkType: hard
 
-"@storybook/preset-react-webpack@npm:8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/preset-react-webpack@npm:8.3.6"
+"@storybook/preset-react-webpack@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/preset-react-webpack@npm:8.4.2"
   dependencies:
-    "@storybook/core-webpack": "npm:8.3.6"
-    "@storybook/react": "npm:8.3.6"
+    "@storybook/core-webpack": "npm:8.4.2"
+    "@storybook/react": "npm:8.4.2"
     "@storybook/react-docgen-typescript-plugin": "npm:1.0.6--canary.9.0c3f3b7.0"
     "@types/node": "npm:^22.0.0"
     "@types/semver": "npm:^7.3.4"
     find-up: "npm:^5.0.0"
-    fs-extra: "npm:^11.1.0"
     magic-string: "npm:^0.30.5"
     react-docgen: "npm:^7.0.0"
     resolve: "npm:^1.22.8"
@@ -2610,20 +2585,20 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-    storybook: ^8.3.6
+    storybook: ^8.4.2
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10/1d413e3b6b9ff4d613f26943131e53baccdc874b2120bd08375c23cbb7ef6b767798afbd38086f0a4efd4a229932f7bb3e37b339442aa9cda776cbf2e3e153e6
+  checksum: 10/5c08b8c8d59262fa390ad35214179f17b3ddddd7b0956efd0d73542b6c82771b8e6814ab45c57b7099bd4026b49594106222cd620b34a2871427d59050a13e0b
   languageName: node
   linkType: hard
 
-"@storybook/preview-api@npm:8.3.6, @storybook/preview-api@npm:^8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/preview-api@npm:8.3.6"
+"@storybook/preview-api@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/preview-api@npm:8.4.2"
   peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10/5a645dc19308b69020da2ee282860666c6f7ebe45525802cb4da3d4e496f410a30915e570ae4a07b23d429a5d7f0c7254d9f76e6bc236ff2a85b0cc0e56b0ad0
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: 10/5e57c276bc30afd106dbe89b88dd8b4265d538bc4c55d011b6277d24d0210a7b1b9921f7f2403f06ad824fc50b5846d9037803c613a6f437239a667a52841eea
   languageName: node
   linkType: hard
 
@@ -2645,110 +2620,95 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/react-dom-shim@npm:8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/react-dom-shim@npm:8.3.6"
+"@storybook/react-dom-shim@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/react-dom-shim@npm:8.4.2"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-    storybook: ^8.3.6
-  checksum: 10/229001fd8138821d71c7c53ececc152858e92a49cdc50ddb401fecbbe5e4ca3b92082a15b15e1d074ebbb22f294aa5310f54356c7a372479439e985af62cd262
+    storybook: ^8.4.2
+  checksum: 10/76c058e1a2397dfc4fcd5a5fe74bc3e389754b1d7149c0ecc53afb5f706926d1ca2a76e7da04990cd500b378e3e09ffaead827808c12d1da73ea73a1973b630f
   languageName: node
   linkType: hard
 
-"@storybook/react-webpack5@npm:8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/react-webpack5@npm:8.3.6"
+"@storybook/react-webpack5@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/react-webpack5@npm:8.4.2"
   dependencies:
-    "@storybook/builder-webpack5": "npm:8.3.6"
-    "@storybook/preset-react-webpack": "npm:8.3.6"
-    "@storybook/react": "npm:8.3.6"
+    "@storybook/builder-webpack5": "npm:8.4.2"
+    "@storybook/preset-react-webpack": "npm:8.4.2"
+    "@storybook/react": "npm:8.4.2"
     "@types/node": "npm:^22.0.0"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-    storybook: ^8.3.6
+    storybook: ^8.4.2
     typescript: ">= 4.2.x"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10/15d21da721b639eedd965b17d149b37fd2ee0c84673671fea9841a5491923e1e929c34367e0fe02b63f774edf66f34ec65698f77345a812adac5236c5f05fe44
+  checksum: 10/a4f98edcc918e1f0e0f03baf3846fe6f8dcb744873218a9f4ed9c0f4fb813e659b1782060f823c12da4ab66ff7b717be5f51d056650d144d243532f849a7742a
   languageName: node
   linkType: hard
 
-"@storybook/react@npm:8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/react@npm:8.3.6"
+"@storybook/react@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/react@npm:8.4.2"
   dependencies:
-    "@storybook/components": "npm:^8.3.6"
+    "@storybook/components": "npm:8.4.2"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/manager-api": "npm:^8.3.6"
-    "@storybook/preview-api": "npm:^8.3.6"
-    "@storybook/react-dom-shim": "npm:8.3.6"
-    "@storybook/theming": "npm:^8.3.6"
-    "@types/escodegen": "npm:^0.0.6"
-    "@types/estree": "npm:^0.0.51"
-    "@types/node": "npm:^22.0.0"
-    acorn: "npm:^7.4.1"
-    acorn-jsx: "npm:^5.3.1"
-    acorn-walk: "npm:^7.2.0"
-    escodegen: "npm:^2.1.0"
-    html-tags: "npm:^3.1.0"
-    prop-types: "npm:^15.7.2"
-    react-element-to-jsx-string: "npm:^15.0.0"
-    semver: "npm:^7.3.7"
-    ts-dedent: "npm:^2.0.0"
-    type-fest: "npm:~2.19"
-    util-deprecate: "npm:^1.0.2"
+    "@storybook/manager-api": "npm:8.4.2"
+    "@storybook/preview-api": "npm:8.4.2"
+    "@storybook/react-dom-shim": "npm:8.4.2"
+    "@storybook/theming": "npm:8.4.2"
   peerDependencies:
-    "@storybook/test": 8.3.6
+    "@storybook/test": 8.4.2
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-    storybook: ^8.3.6
+    storybook: ^8.4.2
     typescript: ">= 4.2.x"
   peerDependenciesMeta:
     "@storybook/test":
       optional: true
     typescript:
       optional: true
-  checksum: 10/412e9052d20485350d987776daf0709bae8595bf4f3e10b12ae1aa85a32ae46369ceb0da623b651dd568d2124ed9ca7adc2dc1930353e41be2881bb253240e3c
+  checksum: 10/df7dd512d2e4604b7af859f594c058be959495dc0c25467f571f1e6b4e5058c2ee0d3caaed47742e3a602eef871143b1d48aa164646d61923885ebc7eec87b56
   languageName: node
   linkType: hard
 
-"@storybook/test@npm:8.3.6, @storybook/test@npm:^8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/test@npm:8.3.6"
+"@storybook/test@npm:8.4.2, @storybook/test@npm:^8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/test@npm:8.4.2"
   dependencies:
     "@storybook/csf": "npm:^0.1.11"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/instrumenter": "npm:8.3.6"
+    "@storybook/instrumenter": "npm:8.4.2"
     "@testing-library/dom": "npm:10.4.0"
     "@testing-library/jest-dom": "npm:6.5.0"
     "@testing-library/user-event": "npm:14.5.2"
     "@vitest/expect": "npm:2.0.5"
     "@vitest/spy": "npm:2.0.5"
-    util: "npm:^0.12.4"
   peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10/2115e96dbe61e68dcb2da9086ea81501b1763f2a5e68e61cb13d2fcc37dc00ab2178737e0cfff3ed515e86a0cfada09538044ab26c03cd4418eb8ef07dbdfcbf
+    storybook: ^8.4.2
+  checksum: 10/934518e629d2798df10bb892184e18dca0f3ea7b426636cef3f29a12302a3c471b59d808024ea90c58b9e183ce1b3477a0c8827824f7e74111ceaf4518f0212e
   languageName: node
   linkType: hard
 
-"@storybook/theming@npm:8.3.6, @storybook/theming@npm:^8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/theming@npm:8.3.6"
+"@storybook/theming@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/theming@npm:8.4.2"
   peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10/7b40b35069225d37f71f43e35174717ba6ec8d273eef671a2d37d9745a300c5b3887fa145aee6fdbe4759b2140ddf25e8cbd569074ae1c7d44b0ccc99c1a3451
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: 10/8d0a6d20d3589815dea0bcdae9255216b8fc5459225871881a52e0fbc94a136a9972bef02c2ec6167ffd8eea24afab68962e01e83a8d4f60d12b4b787b9b23f3
   languageName: node
   linkType: hard
 
-"@storybook/types@npm:8.3.6":
-  version: 8.3.6
-  resolution: "@storybook/types@npm:8.3.6"
+"@storybook/types@npm:8.4.2":
+  version: 8.4.2
+  resolution: "@storybook/types@npm:8.4.2"
   peerDependencies:
-    storybook: ^8.3.6
-  checksum: 10/7122388d848cf1d8b7d95c81b8a601d82a455d764f7a625372f344dc0402bbd398db22e1c6cedd66ca3987d61b0f8204ff757e0ff5fc2a77745094dc7b882a2a
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: 10/2fb61f73bafb55e19c65f903dd87ac01281d0214c7938a90fc925a9ace327e4e566784b641a3dcf6f2975c904f9cd97d1d70403d421396b1398346e29a0624dd
   languageName: node
   linkType: hard
 
@@ -3317,13 +3277,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/escodegen@npm:^0.0.6":
-  version: 0.0.6
-  resolution: "@types/escodegen@npm:0.0.6"
-  checksum: 10/2e91554a47eb98076a3ba6e3548640e50b28a0f5b69134f99dd1e0ce5223c0a1726f23d25aafd40e4c7961d7c3c519782949aa606d58d0e7431c7fb1ec011c4c
-  languageName: node
-  linkType: hard
-
 "@types/eslint-scope@npm:^3.7.7":
   version: 3.7.7
   resolution: "@types/eslint-scope@npm:3.7.7"
@@ -3358,13 +3311,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/estree@npm:^0.0.51":
-  version: 0.0.51
-  resolution: "@types/estree@npm:0.0.51"
-  checksum: 10/b566c7a3fc8a81ca3d9e00a717e90b8f5d567e2476b4f6d76a20ec6da33ec28165b8f989ed8dd0c9df41405199777ec36a4f85f32a347fbc6c3f696a3128b6e7
-  languageName: node
-  linkType: hard
-
 "@types/express-serve-static-core@npm:*, @types/express-serve-static-core@npm:^4.17.33":
   version: 4.19.5
   resolution: "@types/express-serve-static-core@npm:4.19.5"
@@ -3408,15 +3354,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/hast@npm:^3.0.0":
-  version: 3.0.4
-  resolution: "@types/hast@npm:3.0.4"
-  dependencies:
-    "@types/unist": "npm:*"
-  checksum: 10/732920d81bb7605895776841b7658b4d8cc74a43a8fa176017cc0fb0ecc1a4c82a2b75a4fe6b71aa262b649d3fb62858c6789efa3793ea1d40269953af96ecb5
-  languageName: node
-  linkType: hard
-
 "@types/html-minifier-terser@npm:^6.0.0":
   version: 6.1.0
   resolution: "@types/html-minifier-terser@npm:6.1.0"
@@ -3546,13 +3483,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/lodash@npm:^4.14.167":
-  version: 4.17.5
-  resolution: "@types/lodash@npm:4.17.5"
-  checksum: 10/10e2e9cbeb16998026f4071f9f5f2a38b651eba15302f512e0b8ab904c07c197ca0282d2821f64e53c2b692d7046af0a1ce3ead190fb077cbe4036948fce1924
-  languageName: node
-  linkType: hard
-
 "@types/mdast@npm:^3.0.0":
   version: 3.0.15
   resolution: "@types/mdast@npm:3.0.15"
@@ -3700,7 +3630,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, @types/react@npm:^18.3.12":
+"@types/react@npm:*, @types/react@npm:^18.3.12":
   version: 18.3.12
   resolution: "@types/react@npm:18.3.12"
   dependencies:
@@ -3800,13 +3730,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/unist@npm:*, @types/unist@npm:^3.0.0":
-  version: 3.0.2
-  resolution: "@types/unist@npm:3.0.2"
-  checksum: 10/3d04d0be69316e5f14599a0d993a208606c12818cf631fd399243d1dc7a9bd8a3917d6066baa6abc290814afbd744621484756803c80cba892c39cd4b4a85616
-  languageName: node
-  linkType: hard
-
 "@types/unist@npm:^2, @types/unist@npm:^2.0.0, @types/unist@npm:^2.0.2":
   version: 2.0.10
   resolution: "@types/unist@npm:2.0.10"
@@ -3975,7 +3898,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ungap/structured-clone@npm:^1.0.0, @ungap/structured-clone@npm:^1.2.0":
+"@ungap/structured-clone@npm:^1.2.0":
   version: 1.2.0
   resolution: "@ungap/structured-clone@npm:1.2.0"
   checksum: 10/c6fe89a505e513a7592e1438280db1c075764793a2397877ff1351721fe8792a966a5359769e30242b3cd023f2efb9e63ca2ca88019d73b564488cc20e3eab12
@@ -4018,12 +3941,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/pretty-format@npm:2.1.1":
-  version: 2.1.1
-  resolution: "@vitest/pretty-format@npm:2.1.1"
+"@vitest/pretty-format@npm:2.1.4":
+  version: 2.1.4
+  resolution: "@vitest/pretty-format@npm:2.1.4"
   dependencies:
     tinyrainbow: "npm:^1.2.0"
-  checksum: 10/744278a3a91d080e51a94b03eaf7cf43779978d6391060cbfdda6d03194eef744ce8f12a2fe2fa90a9bf9b9f038d4c4c4d88f6192f042c88c5ee4125f38bf892
+  checksum: 10/434e6a7903f72a3796f26516ad728aca92724909e18fd3f2cd4b9b8b0ae2cc7b4cd86e92ab9f2ac7bc005c7a7ef0bcb9d768c0264b4b0625f1f0748cc615f1f6
   languageName: node
   linkType: hard
 
@@ -4048,14 +3971,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/utils@npm:^2.0.5":
-  version: 2.1.1
-  resolution: "@vitest/utils@npm:2.1.1"
+"@vitest/utils@npm:^2.1.1":
+  version: 2.1.4
+  resolution: "@vitest/utils@npm:2.1.4"
   dependencies:
-    "@vitest/pretty-format": "npm:2.1.1"
-    loupe: "npm:^3.1.1"
+    "@vitest/pretty-format": "npm:2.1.4"
+    loupe: "npm:^3.1.2"
     tinyrainbow: "npm:^1.2.0"
-  checksum: 10/605f1807c343ac01cde053b062bda8f0cc51b321a3cd9c751424a1e24549a35120896bd58612a14f068460242013f69e08fc0a69355387e981a5a50bce9ae04e
+  checksum: 10/aaaf5310943abca0f0080d9638e67838f7e519d5670ec32e61184915efdfa5ec61d9b495cad6cb7dc492e8caeed14593e78dda77c8ea59c1671a231661f57142
   languageName: node
   linkType: hard
 
@@ -4325,8 +4248,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@vkontakte/vkui@workspace:packages/vkui"
   dependencies:
-    "@storybook/react": "npm:8.3.6"
-    "@storybook/react-webpack5": "npm:8.3.6"
+    "@storybook/react": "npm:8.4.2"
+    "@storybook/react-webpack5": "npm:8.4.2"
     "@swc/helpers": "npm:^0.5.13"
     "@types/node": "npm:*"
     "@vkontakte/icons": "npm:^2.115.0"
@@ -4335,7 +4258,7 @@ __metadata:
     date-fns: "npm:^4.1.0"
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
-    storybook: "npm:8.3.6"
+    storybook: "npm:8.4.2"
     ts-node: "npm:*"
   peerDependencies:
     react: ^18.2.0
@@ -4602,7 +4525,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn-jsx@npm:^5.1.0, acorn-jsx@npm:^5.2.0, acorn-jsx@npm:^5.3.1, acorn-jsx@npm:^5.3.2":
+"acorn-jsx@npm:^5.1.0, acorn-jsx@npm:^5.2.0, acorn-jsx@npm:^5.3.2":
   version: 5.3.2
   resolution: "acorn-jsx@npm:5.3.2"
   peerDependencies:
@@ -4611,13 +4534,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn-walk@npm:^7.2.0":
-  version: 7.2.0
-  resolution: "acorn-walk@npm:7.2.0"
-  checksum: 10/4d3e186f729474aed3bc3d0df44692f2010c726582655b20a23347bef650867655521c48ada444cb4fda241ee713dcb792da363ec74c6282fa884fb7144171bb
-  languageName: node
-  linkType: hard
-
 "acorn-walk@npm:^8.0.0, acorn-walk@npm:^8.0.2, acorn-walk@npm:^8.1.1":
   version: 8.3.3
   resolution: "acorn-walk@npm:8.3.3"
@@ -4636,15 +4552,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^7.4.1":
-  version: 7.4.1
-  resolution: "acorn@npm:7.4.1"
-  bin:
-    acorn: bin/acorn
-  checksum: 10/8be2a40714756d713dfb62544128adce3b7102c6eb94bc312af196c2cc4af76e5b93079bd66b05e9ca31b35a9b0ce12171d16bc55f366cafdb794fdab9d753ec
-  languageName: node
-  linkType: hard
-
 "acorn@npm:^8.0.4, acorn@npm:^8.1.0, acorn@npm:^8.11.0, acorn@npm:^8.11.3, acorn@npm:^8.4.1, acorn@npm:^8.7.1, acorn@npm:^8.8.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
   version: 8.12.1
   resolution: "acorn@npm:8.12.1"
@@ -7390,34 +7297,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0":
-  version: 0.23.1
-  resolution: "esbuild@npm:0.23.1"
-  dependencies:
-    "@esbuild/aix-ppc64": "npm:0.23.1"
-    "@esbuild/android-arm": "npm:0.23.1"
-    "@esbuild/android-arm64": "npm:0.23.1"
-    "@esbuild/android-x64": "npm:0.23.1"
-    "@esbuild/darwin-arm64": "npm:0.23.1"
-    "@esbuild/darwin-x64": "npm:0.23.1"
-    "@esbuild/freebsd-arm64": "npm:0.23.1"
-    "@esbuild/freebsd-x64": "npm:0.23.1"
-    "@esbuild/linux-arm": "npm:0.23.1"
-    "@esbuild/linux-arm64": "npm:0.23.1"
-    "@esbuild/linux-ia32": "npm:0.23.1"
-    "@esbuild/linux-loong64": "npm:0.23.1"
-    "@esbuild/linux-mips64el": "npm:0.23.1"
-    "@esbuild/linux-ppc64": "npm:0.23.1"
-    "@esbuild/linux-riscv64": "npm:0.23.1"
-    "@esbuild/linux-s390x": "npm:0.23.1"
-    "@esbuild/linux-x64": "npm:0.23.1"
-    "@esbuild/netbsd-x64": "npm:0.23.1"
-    "@esbuild/openbsd-arm64": "npm:0.23.1"
-    "@esbuild/openbsd-x64": "npm:0.23.1"
-    "@esbuild/sunos-x64": "npm:0.23.1"
-    "@esbuild/win32-arm64": "npm:0.23.1"
-    "@esbuild/win32-ia32": "npm:0.23.1"
-    "@esbuild/win32-x64": "npm:0.23.1"
+"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0":
+  version: 0.24.0
+  resolution: "esbuild@npm:0.24.0"
+  dependencies:
+    "@esbuild/aix-ppc64": "npm:0.24.0"
+    "@esbuild/android-arm": "npm:0.24.0"
+    "@esbuild/android-arm64": "npm:0.24.0"
+    "@esbuild/android-x64": "npm:0.24.0"
+    "@esbuild/darwin-arm64": "npm:0.24.0"
+    "@esbuild/darwin-x64": "npm:0.24.0"
+    "@esbuild/freebsd-arm64": "npm:0.24.0"
+    "@esbuild/freebsd-x64": "npm:0.24.0"
+    "@esbuild/linux-arm": "npm:0.24.0"
+    "@esbuild/linux-arm64": "npm:0.24.0"
+    "@esbuild/linux-ia32": "npm:0.24.0"
+    "@esbuild/linux-loong64": "npm:0.24.0"
+    "@esbuild/linux-mips64el": "npm:0.24.0"
+    "@esbuild/linux-ppc64": "npm:0.24.0"
+    "@esbuild/linux-riscv64": "npm:0.24.0"
+    "@esbuild/linux-s390x": "npm:0.24.0"
+    "@esbuild/linux-x64": "npm:0.24.0"
+    "@esbuild/netbsd-x64": "npm:0.24.0"
+    "@esbuild/openbsd-arm64": "npm:0.24.0"
+    "@esbuild/openbsd-x64": "npm:0.24.0"
+    "@esbuild/sunos-x64": "npm:0.24.0"
+    "@esbuild/win32-arm64": "npm:0.24.0"
+    "@esbuild/win32-ia32": "npm:0.24.0"
+    "@esbuild/win32-x64": "npm:0.24.0"
   dependenciesMeta:
     "@esbuild/aix-ppc64":
       optional: true
@@ -7469,7 +7376,7 @@ __metadata:
       optional: true
   bin:
     esbuild: bin/esbuild
-  checksum: 10/f55fbd0bfb0f86ce67a6d2c6f6780729d536c330999ecb9f5a38d578fb9fda820acbbc67d6d1d377eed8fed50fc38f14ff9cb014f86dafab94269a7fb2177018
+  checksum: 10/500f83a1216d6548053007b85c070d8293395db344605b17418c6cf1217e5e8d338fa77fc8af27c23faa121c5528e5b0004d46d3a0cdeb87d48f1b5fa0164bc5
   languageName: node
   linkType: hard
 
@@ -7614,7 +7521,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"escodegen@npm:^2.0.0, escodegen@npm:^2.1.0":
+"escodegen@npm:^2.0.0":
   version: 2.1.0
   resolution: "escodegen@npm:2.1.0"
   dependencies:
@@ -8646,7 +8553,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra@npm:^11.0.0, fs-extra@npm:^11.1.0":
+"fs-extra@npm:^11.0.0":
   version: 11.2.0
   resolution: "fs-extra@npm:11.2.0"
   dependencies:
@@ -8891,13 +8798,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"github-slugger@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "github-slugger@npm:2.0.0"
-  checksum: 10/2fb15d78262eeba1e68671f048c62d05ed21e51281cccc7b1c9e8e089e8510b3037fb648b8ba27290e60534df2cb251312a1e7e813204495df621220192fd600
-  languageName: node
-  linkType: hard
-
 "glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2":
   version: 5.1.2
   resolution: "glob-parent@npm:5.1.2"
@@ -9203,33 +9103,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hast-util-heading-rank@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "hast-util-heading-rank@npm:3.0.0"
-  dependencies:
-    "@types/hast": "npm:^3.0.0"
-  checksum: 10/e5ce4ec9e8017b24ab72702fa0dd401ec6eaf32574120d71c2aa4e8e0f43829dba2e291f49d305a47e8d65b82a9c5adad7985385dc5bc8370f8cec7c8f9313d3
-  languageName: node
-  linkType: hard
-
-"hast-util-is-element@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "hast-util-is-element@npm:3.0.0"
-  dependencies:
-    "@types/hast": "npm:^3.0.0"
-  checksum: 10/b4e6d84c763ffdc44198ba0c4a5a7430794a7b2c1eec699d37776ea9832eef79f129726c175982103eb3b21f531a6bfd2fa43ce26e1ed6d8f6a87c102ba212c8
-  languageName: node
-  linkType: hard
-
-"hast-util-to-string@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "hast-util-to-string@npm:3.0.0"
-  dependencies:
-    "@types/hast": "npm:^3.0.0"
-  checksum: 10/b0d51e2cf228edcbed0494755a7f095c5c2b7a0e7564f3ad7b83b89abbabf098b62b3c884e1bb4d3394c0c84486ba39800d78f2ccdbdaa38122be62330dd2357
-  languageName: node
-  linkType: hard
-
 "he@npm:^1.2.0":
   version: 1.2.0
   resolution: "he@npm:1.2.0"
@@ -9314,7 +9187,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"html-tags@npm:^3.1.0, html-tags@npm:^3.3.1":
+"html-tags@npm:^3.3.1":
   version: 3.3.1
   resolution: "html-tags@npm:3.3.1"
   checksum: 10/d0e808544b92d8b999cbcc86d539577255a2f0f2f4f73110d10749d1d36e6fe6ad706a0355a8477afb6e000ecdc93d8455b3602951f9a2b694ac9e28f1b52878
@@ -9711,13 +9584,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-absolute-url@npm:^4.0.0":
-  version: 4.0.1
-  resolution: "is-absolute-url@npm:4.0.1"
-  checksum: 10/de172a718439982a54477fdae55f21be69ec0e6a4b205db5484975d2f4ee749851fd46c28f3790dfc51a274c2ed1d0f8457b6d1fff02ab829069fd9cc761e48c
-  languageName: node
-  linkType: hard
-
 "is-alphabetical@npm:^1.0.0":
   version: 1.0.4
   resolution: "is-alphabetical@npm:1.0.4"
@@ -10074,13 +9940,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-plain-object@npm:5.0.0, is-plain-object@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "is-plain-object@npm:5.0.0"
-  checksum: 10/e32d27061eef62c0847d303125440a38660517e586f2f3db7c9d179ae5b6674ab0f469d519b2e25c147a1a3bc87156d0d5f4d8821e0ce4a9ee7fe1fcf11ce45c
-  languageName: node
-  linkType: hard
-
 "is-plain-object@npm:^2.0.4":
   version: 2.0.4
   resolution: "is-plain-object@npm:2.0.4"
@@ -10090,6 +9949,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-plain-object@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "is-plain-object@npm:5.0.0"
+  checksum: 10/e32d27061eef62c0847d303125440a38660517e586f2f3db7c9d179ae5b6674ab0f469d519b2e25c147a1a3bc87156d0d5f4d8821e0ce4a9ee7fe1fcf11ce45c
+  languageName: node
+  linkType: hard
+
 "is-potential-custom-element-name@npm:^1.0.1":
   version: 1.0.1
   resolution: "is-potential-custom-element-name@npm:1.0.1"
@@ -11492,6 +11358,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"loupe@npm:^3.1.2":
+  version: 3.1.2
+  resolution: "loupe@npm:3.1.2"
+  checksum: 10/8f5734e53fb64cd914aa7d986e01b6d4c2e3c6c56dcbd5428d71c2703f0ab46b5ab9f9eeaaf2b485e8a1c43f865bdd16ec08ae1a661c8f55acdbd9f4d59c607a
+  languageName: node
+  linkType: hard
+
 "lower-case@npm:^2.0.2":
   version: 2.0.2
   resolution: "lower-case@npm:2.0.2"
@@ -11632,7 +11505,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"markdown-to-jsx@npm:^7.4.5, markdown-to-jsx@npm:^7.5.0":
+"markdown-to-jsx@npm:^7.5.0":
   version: 7.5.0
   resolution: "markdown-to-jsx@npm:7.5.0"
   peerDependencies:
@@ -13844,16 +13717,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-colorful@npm:^5.1.2":
-  version: 5.6.1
-  resolution: "react-colorful@npm:5.6.1"
-  peerDependencies:
-    react: ">=16.8.0"
-    react-dom: ">=16.8.0"
-  checksum: 10/3e02ba013454818d0c323949bd961fb2c19ac18130dfc67a4032aa5b03787c5ffe7ff159c4b97dc3475072d576828ca0c4b8e8ce85b55eaf484180596cdf0403
-  languageName: node
-  linkType: hard
-
 "react-dev-utils@npm:^12.0.0":
   version: 12.0.1
   resolution: "react-dev-utils@npm:12.0.1"
@@ -13963,20 +13826,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-element-to-jsx-string@npm:^15.0.0":
-  version: 15.0.0
-  resolution: "react-element-to-jsx-string@npm:15.0.0"
-  dependencies:
-    "@base2/pretty-print-object": "npm:1.0.1"
-    is-plain-object: "npm:5.0.0"
-    react-is: "npm:18.1.0"
-  peerDependencies:
-    react: ^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0
-    react-dom: ^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0
-  checksum: 10/9a874b2f16b4624a72c4b766b096d693a382b9dc7f2264f802395852ae3435ccde8e9e47bbe45cf5f30eba70f8126af6aca832190e285b0096af3ecade994df1
-  languageName: node
-  linkType: hard
-
 "react-error-overlay@npm:^6.0.11":
   version: 6.0.11
   resolution: "react-error-overlay@npm:6.0.11"
@@ -14017,13 +13866,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:18.1.0":
-  version: 18.1.0
-  resolution: "react-is@npm:18.1.0"
-  checksum: 10/fe09c86d5e12a8531bf3e748660f3dffbe900a6da0b488c7efaf0a866e16b74ecc1b0011b0960b13594f8719f39f87a987c0c85edff0b2d3e2f14b87e7230ad2
-  languageName: node
-  linkType: hard
-
 "react-is@npm:^16.13.1":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
@@ -14407,33 +14249,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rehype-external-links@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "rehype-external-links@npm:3.0.0"
-  dependencies:
-    "@types/hast": "npm:^3.0.0"
-    "@ungap/structured-clone": "npm:^1.0.0"
-    hast-util-is-element: "npm:^3.0.0"
-    is-absolute-url: "npm:^4.0.0"
-    space-separated-tokens: "npm:^2.0.0"
-    unist-util-visit: "npm:^5.0.0"
-  checksum: 10/b9b2e4e5974a7d1e4030dc42bfad980d4700af35b6b20b36fc7ff0521897a8f20d3fe5e170255c428148fdd5a0653a73683da783124038d17b24f26dd59d20e8
-  languageName: node
-  linkType: hard
-
-"rehype-slug@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "rehype-slug@npm:6.0.0"
-  dependencies:
-    "@types/hast": "npm:^3.0.0"
-    github-slugger: "npm:^2.0.0"
-    hast-util-heading-rank: "npm:^3.0.0"
-    hast-util-to-string: "npm:^3.0.0"
-    unist-util-visit: "npm:^5.0.0"
-  checksum: 10/292074643f8462c70f498bc8bf18a8c959073b96efc249f61e69fa9e36eb81d9b91d62199a90217c604e1c3904e8ff0a75df70d67e41bead56de93afb725c2d0
-  languageName: node
-  linkType: hard
-
 "relateurl@npm:^0.2.7":
   version: 0.2.7
   resolution: "relateurl@npm:0.2.7"
@@ -15363,13 +15178,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"space-separated-tokens@npm:^2.0.0":
-  version: 2.0.2
-  resolution: "space-separated-tokens@npm:2.0.2"
-  checksum: 10/202e97d7ca1ba0758a0aa4fe226ff98142073bcceeff2da3aad037968878552c3bbce3b3231970025375bbba5aee00c5b8206eda408da837ab2dc9c0f26be990
-  languageName: node
-  linkType: hard
-
 "sparkles@npm:^1.0.0":
   version: 1.0.1
   resolution: "sparkles@npm:1.0.1"
@@ -15484,16 +15292,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"storybook@npm:8.3.6":
-  version: 8.3.6
-  resolution: "storybook@npm:8.3.6"
+"storybook@npm:8.4.2":
+  version: 8.4.2
+  resolution: "storybook@npm:8.4.2"
   dependencies:
-    "@storybook/core": "npm:8.3.6"
+    "@storybook/core": "npm:8.4.2"
+  peerDependencies:
+    prettier: ^2 || ^3
+  peerDependenciesMeta:
+    prettier:
+      optional: true
   bin:
     getstorybook: ./bin/index.cjs
     sb: ./bin/index.cjs
     storybook: ./bin/index.cjs
-  checksum: 10/b980e90297c918e68dc31ea126780a30ba29076a99921a2558d61cae26491f24f0bc494d6c3aff68d587397d25d1224496df91e76fc6f2a0616f7d97ab9fd46a
+  checksum: 10/e3f1e32371a6f70639fa4fbc24e703aeb99bdb417b7c4acca6d331bf777b7c9343195175c6c088e162b8feb50f267ea70db9dd23f3ab07f110e1a76e3c7618ca
   languageName: node
   linkType: hard
 
@@ -16056,15 +15869,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"telejson@npm:^7.2.0":
-  version: 7.2.0
-  resolution: "telejson@npm:7.2.0"
-  dependencies:
-    memoizerific: "npm:^1.11.3"
-  checksum: 10/6e89b3d3c45b5a2aced9132f6a968fcdf758c00be4c3acb115d7d81e95c9e04083a7a4a9b43057fcf48b101156c1607a38f5491615956acb28d4d1f78a4bda20
-  languageName: node
-  linkType: hard
-
 "terser-webpack-plugin@npm:^5.3.1, terser-webpack-plugin@npm:^5.3.10, terser-webpack-plugin@npm:^5.3.3":
   version: 5.3.10
   resolution: "terser-webpack-plugin@npm:5.3.10"
@@ -16438,7 +16242,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"type-fest@npm:^2.19.0, type-fest@npm:~2.19":
+"type-fest@npm:^2.19.0":
   version: 2.19.0
   resolution: "type-fest@npm:2.19.0"
   checksum: 10/7bf9e8fdf34f92c8bb364c0af14ca875fac7e0183f2985498b77be129dc1b3b1ad0a6b3281580f19e48c6105c037fb966ad9934520c69c6434d17fd0af4eed78
@@ -16649,15 +16453,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unist-util-is@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "unist-util-is@npm:6.0.0"
-  dependencies:
-    "@types/unist": "npm:^3.0.0"
-  checksum: 10/edd6a93fb2255addf4b9eeb304c1da63c62179aef793169dd64ab955cf2f6814885fe25f95f8105893e3562dead348af535718d7a84333826e0491c04bf42511
-  languageName: node
-  linkType: hard
-
 "unist-util-stringify-position@npm:^2.0.0":
   version: 2.0.3
   resolution: "unist-util-stringify-position@npm:2.0.3"
@@ -16677,16 +16472,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unist-util-visit-parents@npm:^6.0.0":
-  version: 6.0.1
-  resolution: "unist-util-visit-parents@npm:6.0.1"
-  dependencies:
-    "@types/unist": "npm:^3.0.0"
-    unist-util-is: "npm:^6.0.0"
-  checksum: 10/645b3cbc5e923bc692b1eb1a9ca17bffc5aabc25e6090ff3f1489bff8effd1890b28f7a09dc853cb6a7fa0da8581bfebc9b670a68b53c4c086cb9610dfd37701
-  languageName: node
-  linkType: hard
-
 "unist-util-visit@npm:^2.0.0":
   version: 2.0.3
   resolution: "unist-util-visit@npm:2.0.3"
@@ -16698,17 +16483,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unist-util-visit@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "unist-util-visit@npm:5.0.0"
-  dependencies:
-    "@types/unist": "npm:^3.0.0"
-    unist-util-is: "npm:^6.0.0"
-    unist-util-visit-parents: "npm:^6.0.0"
-  checksum: 10/f2bbde23641e9ade7640358c06ddeec0f38342322eb8e7819d9ee380b0f859d25d084dde22bf63db0280b3b2f36575f15aa1d6c23acf276c91c2493cf799e3b0
-  languageName: node
-  linkType: hard
-
 "universalify@npm:^0.2.0":
   version: 0.2.0
   resolution: "universalify@npm:0.2.0"

From 39902ee4963eba90dffc818cb15f5d37deb34296 Mon Sep 17 00:00:00 2001
From: Inomdzhon Mirdzhamolov <i.mirdzhamolov@vk.team>
Date: Tue, 5 Nov 2024 12:01:17 +0300
Subject: [PATCH 16/19] refactor(FocusTrap): mv to hook (#7879)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Код `FocusTrap` вынесен в `useFocusTrap`, чтобы была возможность использовать его со своим DOM элементом.
---
 .../src/components/FocusTrap/FocusTrap.tsx    | 222 +---------------
 packages/vkui/src/hooks/useFocusTrap.ts       | 247 ++++++++++++++++++
 2 files changed, 260 insertions(+), 209 deletions(-)
 create mode 100644 packages/vkui/src/hooks/useFocusTrap.ts

diff --git a/packages/vkui/src/components/FocusTrap/FocusTrap.tsx b/packages/vkui/src/components/FocusTrap/FocusTrap.tsx
index dad2e5be8c..6e57aadaa2 100644
--- a/packages/vkui/src/components/FocusTrap/FocusTrap.tsx
+++ b/packages/vkui/src/components/FocusTrap/FocusTrap.tsx
@@ -1,35 +1,15 @@
 'use client';
 
-import { type AllHTMLAttributes, useCallback, useRef, useState } from 'react';
-import { arraysEquals } from '../../helpers/array';
+import { type AllHTMLAttributes } from 'react';
 import { useExternRef } from '../../hooks/useExternRef';
-import { useMutationObserver } from '../../hooks/useMutationObserver';
-import { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';
-import {
-  contains,
-  getActiveElementByAnotherElement,
-  getWindow,
-  isHTMLElement,
-  useDOM,
-} from '../../lib/dom';
-import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { useFocusTrap, type UseFocusTrapProps } from '../../hooks/useFocusTrap';
 import type { HasComponent, HasRootRef } from '../../types';
 
-const FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();
 export interface FocusTrapProps<T extends HTMLElement = HTMLElement>
-  extends Omit<AllHTMLAttributes<T>, 'autoFocus'>,
+  extends UseFocusTrapProps,
+    Omit<AllHTMLAttributes<T>, keyof UseFocusTrapProps>,
     HasRootRef<T>,
-    HasComponent {
-  autoFocus?: boolean | 'root';
-  restoreFocus?: boolean | (() => boolean);
-  mount?: boolean;
-  timeout?: number;
-  onClose?: () => void;
-  /**
-   * Форсированное отключение захвата фокуса
-   */
-  disabled?: boolean;
-}
+    HasComponent {}
 
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusTrap
@@ -47,191 +27,15 @@ export const FocusTrap = <T extends HTMLElement = HTMLElement>({
   ...restProps
 }: FocusTrapProps<T>): React.ReactNode => {
   const ref = useExternRef<T>(getRootRef);
-  const { document } = useDOM();
 
-  const focusableNodesRef = useRef<HTMLElement[]>([]);
-
-  const [restoreFocusTo, setRestoreFocusTo] = useState<Element | null>(null);
-
-  const focusNodeByIndex = (nodeIndex: number) => {
-    const element = focusableNodesRef.current[nodeIndex];
-
-    if (element) {
-      element.focus({
-        preventScroll: true,
-      });
-    }
-  };
-
-  const recalculateFocusableNodesRef = (parentNode: HTMLElement) => {
-    // eslint-disable-next-line no-restricted-properties
-    const newFocusableElements = parentNode.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS);
-
-    const nodes: HTMLElement[] = [];
-    newFocusableElements.forEach((focusableEl) => {
-      const { display, visibility } = getComputedStyle(focusableEl);
-      if (display !== 'none' && visibility !== 'hidden') {
-        nodes.push(focusableEl);
-      }
-    });
-    if (nodes.length === 0) {
-      // Чтобы фокус был хотя бы на родителе
-      nodes.push(parentNode);
-    }
-    focusableNodesRef.current = nodes;
-  };
-
-  const onMutateParentHandler = (parentNode: HTMLElement) => {
-    const oldFocusableNodes = [...focusableNodesRef.current];
-
-    recalculateFocusableNodesRef(parentNode);
-
-    if (!autoFocus || arraysEquals(oldFocusableNodes, focusableNodesRef.current)) {
-      return;
-    }
-
-    if (document) {
-      const activeElement = document.activeElement as HTMLElement;
-      const currentElementIndex = Math.max(
-        document.activeElement ? focusableNodesRef.current.indexOf(activeElement) : -1,
-        0,
-      );
-      focusNodeByIndex(currentElementIndex);
-    }
-  };
-
-  useMutationObserver(ref, () => ref.current && onMutateParentHandler(ref.current));
-
-  useIsomorphicLayoutEffect(() => {
-    ref.current && recalculateFocusableNodesRef(ref.current);
-  }, [ref]);
-
-  useIsomorphicLayoutEffect(
-    function tryToAutoFocusToFirstNode() {
-      if (!ref.current || !autoFocus || disabled) {
-        return;
-      }
-
-      const autoFocusToNode = () => {
-        if (!ref.current || !focusableNodesRef.current.length) {
-          return;
-        }
-        const activeElement = getActiveElementByAnotherElement(ref.current);
-        if (!contains(ref.current, activeElement)) {
-          if (autoFocus === 'root') {
-            ref.current?.focus();
-          } else {
-            focusableNodesRef.current[0].focus();
-          }
-        }
-      };
-      const timeoutId = setTimeout(autoFocusToNode, timeout);
-      return () => {
-        clearTimeout(timeoutId);
-      };
-    },
-    [autoFocus, timeout, disabled],
-  );
-
-  const restoreFocusImpl = useCallback(() => {
-    const shouldRestoreFocus = typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;
-
-    if (!restoreFocusTo || !isHTMLElement(restoreFocusTo) || !shouldRestoreFocus) {
-      return;
-    }
-
-    setTimeout(() => {
-      if (restoreFocusTo) {
-        restoreFocusTo.focus();
-        setRestoreFocusTo(null);
-      }
-    }, timeout);
-  }, [restoreFocus, restoreFocusTo, timeout]);
-
-  useIsomorphicLayoutEffect(
-    function calculateRestoreFocusTo() {
-      if (!ref.current || !restoreFocus || !mount) {
-        setRestoreFocusTo(null);
-        return;
-      }
-      setRestoreFocusTo(getActiveElementByAnotherElement(ref.current));
-    },
-    [ref, mount, restoreFocus],
-  );
-
-  useIsomorphicLayoutEffect(
-    function tryToRestoreFocusOnUnmount() {
-      return () => restoreFocusImpl();
-    },
-    [restoreFocusImpl],
-  );
-
-  useIsomorphicLayoutEffect(
-    function tryToRestoreFocusWhenFakeUnmount() {
-      if (!mount) {
-        restoreFocusImpl();
-      }
-    },
-    [mount, restoreFocusImpl],
-  );
-
-  useIsomorphicLayoutEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-
-    const onDocumentKeydown = (event: KeyboardEvent) => {
-      if (disabled) {
-        return;
-      }
-
-      const pressedKeyResult = pressedKey(event);
-
-      switch (pressedKeyResult) {
-        case Keys.TAB: {
-          if (!focusableNodesRef.current.length) {
-            return false;
-          }
-
-          const lastIdx = focusableNodesRef.current.length - 1;
-          const targetIdx = focusableNodesRef.current.findIndex((node) => node === event.target);
-
-          const shouldFocusFirstNode =
-            targetIdx === -1 || (targetIdx === lastIdx && !event.shiftKey);
-
-          if (shouldFocusFirstNode || (targetIdx === 0 && event.shiftKey)) {
-            event.preventDefault();
-
-            const node = focusableNodesRef.current[shouldFocusFirstNode ? 0 : lastIdx];
-
-            if (node !== getActiveElementByAnotherElement(node)) {
-              node.focus();
-            }
-
-            return false;
-          }
-
-          break;
-        }
-        case Keys.ESCAPE: {
-          if (onClose) {
-            event.preventDefault();
-            onClose();
-          }
-        }
-      }
-
-      return true;
-    };
-
-    const doc = getWindow(ref.current).document;
-    doc.addEventListener('keydown', onDocumentKeydown, {
-      capture: true,
-    });
-    return () => {
-      doc.removeEventListener('keydown', onDocumentKeydown, true);
-    };
-  }, [onClose, ref, disabled]);
+  useFocusTrap(ref, {
+    autoFocus,
+    restoreFocus,
+    disabled,
+    mount,
+    timeout,
+    onClose,
+  });
 
   return (
     <Component tabIndex={-1} ref={ref} {...restProps}>
diff --git a/packages/vkui/src/hooks/useFocusTrap.ts b/packages/vkui/src/hooks/useFocusTrap.ts
new file mode 100644
index 0000000000..0f3422ba77
--- /dev/null
+++ b/packages/vkui/src/hooks/useFocusTrap.ts
@@ -0,0 +1,247 @@
+import { type RefObject, useCallback, useRef, useState } from 'react';
+import { arraysEquals } from '../helpers/array';
+import { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../lib/accessibility';
+import {
+  contains,
+  getActiveElementByAnotherElement,
+  getWindow,
+  isHTMLElement,
+  useDOM,
+} from '../lib/dom';
+import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
+import { useMutationObserver } from './useMutationObserver';
+
+const FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();
+
+export type UseFocusTrapProps = {
+  /**
+   * @default true
+   */
+  mount?: boolean;
+  /**
+   * Форсированное отключение захвата фокуса
+   *
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * @default true
+   */
+  autoFocus?: boolean | 'root';
+  /**
+   * @default true
+   */
+  restoreFocus?: boolean | (() => boolean);
+  /**
+   * @default 0
+   */
+  timeout?: number;
+  /**
+   * Вызывается при нажатии на кнопку `Escape`.
+   */
+  onClose?: VoidFunction;
+};
+
+/**
+ * @private
+ */
+export const useFocusTrap = (
+  ref: RefObject<HTMLElement>,
+  {
+    mount = true,
+    disabled = false,
+    autoFocus = true,
+    restoreFocus = true,
+    timeout = 0,
+    onClose,
+  }: UseFocusTrapProps,
+) => {
+  const { document } = useDOM();
+
+  const focusableNodesRef = useRef<HTMLElement[]>([]);
+
+  const [restoreFocusTo, setRestoreFocusTo] = useState<Element | null>(null);
+
+  const focusNodeByIndex = (nodeIndex: number) => {
+    const element = focusableNodesRef.current[nodeIndex];
+
+    if (element) {
+      element.focus({
+        preventScroll: true,
+      });
+    }
+  };
+
+  const recalculateFocusableNodesRef = (parentNode: HTMLElement) => {
+    // eslint-disable-next-line no-restricted-properties
+    const newFocusableElements = parentNode.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS);
+
+    const nodes: HTMLElement[] = [];
+    newFocusableElements.forEach((focusableEl) => {
+      const { display, visibility } = getComputedStyle(focusableEl);
+      if (display !== 'none' && visibility !== 'hidden') {
+        nodes.push(focusableEl);
+      }
+    });
+    if (nodes.length === 0) {
+      // Чтобы фокус был хотя бы на родителе
+      nodes.push(parentNode);
+    }
+    focusableNodesRef.current = nodes;
+  };
+
+  const onMutateParentHandler = (parentNode: HTMLElement) => {
+    const oldFocusableNodes = [...focusableNodesRef.current];
+
+    recalculateFocusableNodesRef(parentNode);
+
+    if (!autoFocus || arraysEquals(oldFocusableNodes, focusableNodesRef.current)) {
+      return;
+    }
+
+    if (document) {
+      const activeElement = document.activeElement as HTMLElement;
+      const currentElementIndex = Math.max(
+        document.activeElement ? focusableNodesRef.current.indexOf(activeElement) : -1,
+        0,
+      );
+      focusNodeByIndex(currentElementIndex);
+    }
+  };
+
+  useMutationObserver(ref, () => ref.current && onMutateParentHandler(ref.current));
+
+  useIsomorphicLayoutEffect(() => {
+    ref.current && recalculateFocusableNodesRef(ref.current);
+  }, [ref]);
+
+  useIsomorphicLayoutEffect(
+    function tryToAutoFocusToFirstNode() {
+      if (!ref.current || !autoFocus || disabled) {
+        return;
+      }
+
+      const autoFocusToNode = () => {
+        if (!ref.current || !focusableNodesRef.current.length) {
+          return;
+        }
+        const activeElement = getActiveElementByAnotherElement(ref.current);
+        if (!contains(ref.current, activeElement)) {
+          if (autoFocus === 'root') {
+            ref.current?.focus();
+          } else {
+            focusableNodesRef.current[0].focus();
+          }
+        }
+      };
+      const timeoutId = setTimeout(autoFocusToNode, timeout);
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    },
+    [autoFocus, timeout, disabled],
+  );
+
+  const restoreFocusImpl = useCallback(() => {
+    const shouldRestoreFocus = typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;
+
+    if (!restoreFocusTo || !isHTMLElement(restoreFocusTo) || !shouldRestoreFocus) {
+      return;
+    }
+
+    setTimeout(() => {
+      if (restoreFocusTo) {
+        restoreFocusTo.focus();
+        setRestoreFocusTo(null);
+      }
+    }, timeout);
+  }, [restoreFocus, restoreFocusTo, timeout]);
+
+  useIsomorphicLayoutEffect(
+    function calculateRestoreFocusTo() {
+      if (!ref.current || !restoreFocus || !mount) {
+        setRestoreFocusTo(null);
+        return;
+      }
+      setRestoreFocusTo(getActiveElementByAnotherElement(ref.current));
+    },
+    [ref, mount, restoreFocus],
+  );
+
+  useIsomorphicLayoutEffect(
+    function tryToRestoreFocusOnUnmount() {
+      return () => restoreFocusImpl();
+    },
+    [restoreFocusImpl],
+  );
+
+  useIsomorphicLayoutEffect(
+    function tryToRestoreFocusWhenFakeUnmount() {
+      if (!mount) {
+        restoreFocusImpl();
+      }
+    },
+    [mount, restoreFocusImpl],
+  );
+
+  useIsomorphicLayoutEffect(
+    function initializeFocusTrap() {
+      if (!ref.current) {
+        return;
+      }
+
+      const onDocumentKeydown = (event: KeyboardEvent) => {
+        if (disabled) {
+          return;
+        }
+
+        const pressedKeyResult = pressedKey(event);
+
+        switch (pressedKeyResult) {
+          case Keys.TAB: {
+            if (!focusableNodesRef.current.length) {
+              return false;
+            }
+
+            const lastIdx = focusableNodesRef.current.length - 1;
+            const targetIdx = focusableNodesRef.current.findIndex((node) => node === event.target);
+
+            const shouldFocusFirstNode =
+              targetIdx === -1 || (targetIdx === lastIdx && !event.shiftKey);
+
+            if (shouldFocusFirstNode || (targetIdx === 0 && event.shiftKey)) {
+              event.preventDefault();
+
+              const node = focusableNodesRef.current[shouldFocusFirstNode ? 0 : lastIdx];
+
+              if (node !== getActiveElementByAnotherElement(node)) {
+                node.focus();
+              }
+
+              return false;
+            }
+
+            break;
+          }
+          case Keys.ESCAPE: {
+            if (onClose) {
+              event.preventDefault();
+              onClose();
+            }
+          }
+        }
+
+        return true;
+      };
+
+      const doc = getWindow(ref.current).document;
+      doc.addEventListener('keydown', onDocumentKeydown, {
+        capture: true,
+      });
+      return () => {
+        doc.removeEventListener('keydown', onDocumentKeydown, true);
+      };
+    },
+    [onClose, ref, disabled],
+  );
+};

From 0701c36802e5b1dedc5c92d1d3b4367be6bc985d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=AD=D0=BB=D1=8C=D0=B4=D0=B0=D1=80?=
 <61377022+EldarMuhamethanov@users.noreply.github.com>
Date: Tue, 5 Nov 2024 12:01:39 +0300
Subject: [PATCH 17/19] feat(Calendar): rename `onClose` prop to
 `onDoneButtonClick` (#7880)

---
 .../__testfixtures__/calendar/basic.input.tsx | 25 +++++++++++++++++
 .../__tests__/__snapshots__/calendar.ts.snap  | 28 +++++++++++++++++++
 .../src/transforms/v7/__tests__/calendar.ts   | 12 ++++++++
 .../codemods/src/transforms/v7/calendar.ts    | 20 +++++++++++++
 .../vkui/src/components/Calendar/Calendar.tsx |  6 ++--
 .../components/CalendarTime/CalendarTime.tsx  |  6 ++--
 .../src/components/DateInput/DateInput.tsx    |  2 +-
 7 files changed, 92 insertions(+), 7 deletions(-)
 create mode 100644 packages/codemods/src/transforms/v7/__testfixtures__/calendar/basic.input.tsx
 create mode 100644 packages/codemods/src/transforms/v7/__tests__/__snapshots__/calendar.ts.snap
 create mode 100644 packages/codemods/src/transforms/v7/__tests__/calendar.ts
 create mode 100644 packages/codemods/src/transforms/v7/calendar.ts

diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/calendar/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/calendar/basic.input.tsx
new file mode 100644
index 0000000000..1780bac8dc
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/__testfixtures__/calendar/basic.input.tsx
@@ -0,0 +1,25 @@
+import { Calendar } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  const callback = () => {}
+  return (
+    <React.Fragment>
+      <Calendar
+        onChange={() => {}}
+        enableTime={true}
+        disablePast={true}
+        disableFuture={true}
+        onClose={() => {}}
+      />
+
+      <Calendar
+        onChange={() => {}}
+        enableTime={true}
+        disablePast={true}
+        disableFuture={true}
+        onClose={callback}
+      />
+    </React.Fragment>
+  );
+};
diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/calendar.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/calendar.ts.snap
new file mode 100644
index 0000000000..5f8dd9c8be
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/calendar.ts.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`calendar transforms correctly 1`] = `
+"import { Calendar } from '@vkontakte/vkui';
+import React from 'react';
+
+const App = () => {
+  const callback = () => {}
+  return (
+    (<React.Fragment>
+      <Calendar
+        onChange={() => {}}
+        enableTime={true}
+        disablePast={true}
+        disableFuture={true}
+        onDoneButtonClick={() => {}}
+      />
+      <Calendar
+        onChange={() => {}}
+        enableTime={true}
+        disablePast={true}
+        disableFuture={true}
+        onDoneButtonClick={callback}
+      />
+    </React.Fragment>)
+  );
+};"
+`;
diff --git a/packages/codemods/src/transforms/v7/__tests__/calendar.ts b/packages/codemods/src/transforms/v7/__tests__/calendar.ts
new file mode 100644
index 0000000000..ab4bc43e2b
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/__tests__/calendar.ts
@@ -0,0 +1,12 @@
+jest.autoMockOff();
+
+import { defineSnapshotTestFromFixture } from '../../../testHelpers/testHelper';
+
+const name = 'calendar';
+const fixtures = ['basic'] as const;
+
+describe(name, () => {
+  fixtures.forEach((test) =>
+    defineSnapshotTestFromFixture(__dirname, name, global.TRANSFORM_OPTIONS, `${name}/${test}`),
+  );
+});
diff --git a/packages/codemods/src/transforms/v7/calendar.ts b/packages/codemods/src/transforms/v7/calendar.ts
new file mode 100644
index 0000000000..8f9a0677d7
--- /dev/null
+++ b/packages/codemods/src/transforms/v7/calendar.ts
@@ -0,0 +1,20 @@
+import { API, FileInfo } from 'jscodeshift';
+import { getImportInfo, renameProp } from '../../codemod-helpers';
+import { JSCodeShiftOptions } from '../../types';
+
+export const parser = 'tsx';
+
+export default function transformer(file: FileInfo, api: API, options: JSCodeShiftOptions) {
+  const { alias } = options;
+  const j = api.jscodeshift;
+  const source = j(file.source);
+  const { localName } = getImportInfo(j, file, 'Calendar', alias);
+
+  if (!localName) {
+    return source.toSource();
+  }
+
+  renameProp(j, source, localName, { onClose: 'onDoneButtonClick' });
+
+  return source.toSource();
+}
diff --git a/packages/vkui/src/components/Calendar/Calendar.tsx b/packages/vkui/src/components/Calendar/Calendar.tsx
index cca8cfab3e..67f3e6b1bb 100644
--- a/packages/vkui/src/components/Calendar/Calendar.tsx
+++ b/packages/vkui/src/components/Calendar/Calendar.tsx
@@ -54,7 +54,7 @@ export interface CalendarProps
    * Позволяет запретить выбор даты.
    */
   shouldDisableDate?: (value: Date) => boolean;
-  onClose?: () => void;
+  onDoneButtonClick?: () => void;
   /**
    * Дата отображаемого месяца.
    * При использовании обновление даты должно происходить вне компонента.
@@ -87,7 +87,7 @@ export const Calendar = ({
   disablePast,
   disableFuture,
   shouldDisableDate,
-  onClose,
+  onDoneButtonClick,
   enableTime = false,
   doneButtonText,
   weekStartsOn = 1,
@@ -231,7 +231,7 @@ export const Calendar = ({
           <CalendarTime
             value={value}
             onChange={onChange}
-            onClose={onClose}
+            onDoneButtonClick={onDoneButtonClick}
             doneButtonText={doneButtonText}
             changeHoursLabel={changeHoursLabel}
             changeMinutesLabel={changeMinutesLabel}
diff --git a/packages/vkui/src/components/CalendarTime/CalendarTime.tsx b/packages/vkui/src/components/CalendarTime/CalendarTime.tsx
index c18cacb12a..1ca5f395a1 100644
--- a/packages/vkui/src/components/CalendarTime/CalendarTime.tsx
+++ b/packages/vkui/src/components/CalendarTime/CalendarTime.tsx
@@ -13,7 +13,7 @@ export interface CalendarTimeProps {
   changeHoursLabel?: string;
   changeMinutesLabel?: string;
   onChange?: (value: Date) => void;
-  onClose?: () => void;
+  onDoneButtonClick?: () => void;
   isDayDisabled?: (day: Date, withTime?: boolean) => boolean;
 }
 
@@ -37,7 +37,7 @@ export const CalendarTime = ({
   value,
   doneButtonText = 'Готово',
   onChange,
-  onClose,
+  onDoneButtonClick,
   changeHoursLabel,
   changeMinutesLabel,
   isDayDisabled,
@@ -90,7 +90,7 @@ export const CalendarTime = ({
       </div>
       <div className={styles.button}>
         <AdaptivityProvider sizeY="compact">
-          <Button mode="secondary" onClick={onClose} size="l">
+          <Button mode="secondary" onClick={onDoneButtonClick} size="l">
             {doneButtonText}
           </Button>
         </AdaptivityProvider>
diff --git a/packages/vkui/src/components/DateInput/DateInput.tsx b/packages/vkui/src/components/DateInput/DateInput.tsx
index a3b8f5447c..8830130447 100644
--- a/packages/vkui/src/components/DateInput/DateInput.tsx
+++ b/packages/vkui/src/components/DateInput/DateInput.tsx
@@ -320,7 +320,7 @@ export const DateInput = ({
             disablePast={disablePast}
             disableFuture={disableFuture}
             shouldDisableDate={shouldDisableDate}
-            onClose={removeFocusFromField}
+            onDoneButtonClick={removeFocusFromField}
             getRootRef={calendarRef}
             doneButtonText={doneButtonText}
             disablePickers={disablePickers}

From be68ee80ffd84fb51ee107249fe2d51719406fd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=AD=D0=BB=D1=8C=D0=B4=D0=B0=D1=80?=
 <61377022+EldarMuhamethanov@users.noreply.github.com>
Date: Tue, 5 Nov 2024 12:08:10 +0300
Subject: [PATCH 18/19] feat(DateInput, DateRangeInput): add prop
 `onCalendarOpenChanged` (#7878)

* feat(DateInput, DateRangeInput): add prop onCalendarClose

* feat(DateInput): replace onCalendarClose to onCalendarOpenChanged
---
 .../components/DateInput/DateInput.test.tsx   | 23 +++++++++++++++
 .../src/components/DateInput/DateInput.tsx    |  3 ++
 .../DateRangeInput/DateRangeInput.test.tsx    | 23 +++++++++++++++
 .../DateRangeInput/DateRangeInput.tsx         |  3 ++
 packages/vkui/src/hooks/useDateInput.ts       | 29 +++++++++++++++----
 5 files changed, 75 insertions(+), 6 deletions(-)

diff --git a/packages/vkui/src/components/DateInput/DateInput.test.tsx b/packages/vkui/src/components/DateInput/DateInput.test.tsx
index fe40d79358..5a67a74ea5 100644
--- a/packages/vkui/src/components/DateInput/DateInput.test.tsx
+++ b/packages/vkui/src/components/DateInput/DateInput.test.tsx
@@ -123,4 +123,27 @@ describe('DateInput', () => {
 
     expect(container.contains(document.activeElement)).toBeFalsy();
   });
+
+  it('should call onCloseCalendar calendar was closed', async () => {
+    jest.useFakeTimers();
+    const onCalendarOpenChanged = jest.fn();
+    const { container } = render(
+      <DateInput value={date} onCalendarOpenChanged={onCalendarOpenChanged} />,
+    );
+    const inputLikes = getInputsLike(container);
+
+    const [dates] = inputLikes;
+
+    await userEvent.click(dates);
+    expect(onCalendarOpenChanged).toHaveBeenCalledTimes(1);
+    expect(onCalendarOpenChanged.mock.calls[0][0]).toBeTruthy();
+
+    expect(container.contains(document.activeElement)).toBeTruthy();
+    await userEvent.click(screen.getByText(`${date.getDate() - 1}`));
+
+    expect(onCalendarOpenChanged).toHaveBeenCalledTimes(2);
+    expect(onCalendarOpenChanged.mock.calls[1][0]).toBeFalsy();
+
+    expect(container.contains(document.activeElement)).toBeFalsy();
+  });
 });
diff --git a/packages/vkui/src/components/DateInput/DateInput.tsx b/packages/vkui/src/components/DateInput/DateInput.tsx
index 8830130447..e0f5476815 100644
--- a/packages/vkui/src/components/DateInput/DateInput.tsx
+++ b/packages/vkui/src/components/DateInput/DateInput.tsx
@@ -64,6 +64,7 @@ export interface DateInputProps
   clearFieldLabel?: string;
   showCalendarLabel?: string;
   disableCalendar?: boolean;
+  onCalendarOpenChanged?: (opened: boolean) => void;
 }
 
 const elementsConfig = (index: number) => {
@@ -149,6 +150,7 @@ export const DateInput = ({
   nextMonthIcon,
   disableCalendar = false,
   renderDayContent,
+  onCalendarOpenChanged,
   ...props
 }: DateInputProps): React.ReactNode => {
   const daysRef = React.useRef<HTMLSpanElement>(null);
@@ -207,6 +209,7 @@ export const DateInput = ({
     onInternalValueChange,
     getInternalValue,
     value,
+    onCalendarOpenChanged,
   });
 
   const { sizeY = 'none' } = useAdaptivity();
diff --git a/packages/vkui/src/components/DateRangeInput/DateRangeInput.test.tsx b/packages/vkui/src/components/DateRangeInput/DateRangeInput.test.tsx
index 7be660b022..1764ad7417 100644
--- a/packages/vkui/src/components/DateRangeInput/DateRangeInput.test.tsx
+++ b/packages/vkui/src/components/DateRangeInput/DateRangeInput.test.tsx
@@ -130,4 +130,27 @@ describe('DateRangeInput', () => {
 
     expect(onChange).toBeCalledTimes(0);
   });
+
+  it('should call onCalendarClose callback when calendar was closed', async () => {
+    jest.useFakeTimers();
+    const onCalendarOpenChanged = jest.fn();
+    const { container } = render(
+      <DateRangeInput value={[startDate, null]} onCalendarOpenChanged={onCalendarOpenChanged} />,
+    );
+    const inputLikes = getInputsLike(container);
+    const [dates] = inputLikes;
+
+    await userEvent.click(dates);
+
+    expect(onCalendarOpenChanged).toHaveBeenCalledTimes(1);
+    expect(onCalendarOpenChanged.mock.calls[0][0]).toBeTruthy();
+
+    expect(container.contains(document.activeElement)).toBeTruthy();
+    await userEvent.click(screen.getAllByText('15')[0]);
+
+    expect(onCalendarOpenChanged).toHaveBeenCalledTimes(2);
+    expect(onCalendarOpenChanged.mock.calls[1][0]).toBeFalsy();
+
+    expect(container.contains(document.activeElement)).toBeFalsy();
+  });
 });
diff --git a/packages/vkui/src/components/DateRangeInput/DateRangeInput.tsx b/packages/vkui/src/components/DateRangeInput/DateRangeInput.tsx
index 6088a5df30..87d4afff7c 100644
--- a/packages/vkui/src/components/DateRangeInput/DateRangeInput.tsx
+++ b/packages/vkui/src/components/DateRangeInput/DateRangeInput.tsx
@@ -55,6 +55,7 @@ export interface DateRangeInputProps
     Omit<FormFieldProps, 'maxHeight'> {
   calendarPlacement?: PlacementWithAuto;
   closeOnChange?: boolean;
+  onCalendarOpenChanged?: (opened: boolean) => void;
   clearFieldLabel?: string;
   showCalendarLabel?: string;
   changeStartDayLabel?: string;
@@ -142,6 +143,7 @@ export const DateRangeInput = ({
   prevMonthIcon,
   nextMonthIcon,
   disableCalendar = false,
+  onCalendarOpenChanged,
   renderDayContent,
   ...props
 }: DateRangeInputProps): React.ReactNode => {
@@ -223,6 +225,7 @@ export const DateRangeInput = ({
     onInternalValueChange,
     getInternalValue,
     value,
+    onCalendarOpenChanged,
   });
 
   const { sizeY = 'none' } = useAdaptivity();
diff --git a/packages/vkui/src/hooks/useDateInput.ts b/packages/vkui/src/hooks/useDateInput.ts
index d6ff9befe9..33565cc36d 100644
--- a/packages/vkui/src/hooks/useDateInput.ts
+++ b/packages/vkui/src/hooks/useDateInput.ts
@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import * as React from 'react';
 import { useDOM } from '../lib/dom';
 import { useBooleanState } from './useBooleanState';
@@ -17,6 +18,7 @@ export interface UseDateInputDependencies<T, D> {
   onInternalValueChange: (value: string[]) => void;
   getInternalValue: (value?: D | undefined) => string[];
   onChange?: (value?: D | undefined) => void;
+  onCalendarOpenChanged?: (opened: boolean) => void;
 }
 
 export function useDateInput<T extends HTMLElement, D>({
@@ -29,6 +31,7 @@ export function useDateInput<T extends HTMLElement, D>({
   onInternalValueChange,
   getInternalValue,
   value,
+  onCalendarOpenChanged,
 }: UseDateInputDependencies<T, D>): {
   rootRef: React.RefObject<HTMLDivElement>;
   calendarRef: React.RefObject<HTMLDivElement>;
@@ -51,14 +54,28 @@ export function useDateInput<T extends HTMLElement, D>({
   const [focusedElement, setFocusedElement] = React.useState<number | null>(null);
   const { window } = useDOM();
 
+  const _onCalendarClose = useCallback(() => {
+    if (open) {
+      closeCalendar();
+      onCalendarOpenChanged?.(false);
+    }
+  }, [closeCalendar, onCalendarOpenChanged, open]);
+
+  const _onCalendarOpen = useCallback(() => {
+    if (!open) {
+      openCalendar();
+      onCalendarOpenChanged?.(true);
+    }
+  }, [onCalendarOpenChanged, open, openCalendar]);
+
   const removeFocusFromField = React.useCallback(() => {
     if (focusedElement !== null) {
       setFocusedElement(null);
-      closeCalendar();
+      _onCalendarClose();
       window!.getSelection()?.removeAllRanges();
       setInternalValue(getInternalValue(value));
     }
-  }, [focusedElement, closeCalendar, getInternalValue, value, window]);
+  }, [focusedElement, _onCalendarClose, window, getInternalValue, value]);
 
   const handleClickOutside = React.useCallback(
     (e: MouseEvent) => {
@@ -101,14 +118,14 @@ export function useDateInput<T extends HTMLElement, D>({
 
     if (element) {
       element.focus();
-      openCalendar();
+      _onCalendarOpen();
       range.selectNodeContents(element as Node);
 
       const selection = window!.getSelection();
       selection?.removeAllRanges();
       selection?.addRange(range);
     }
-  }, [disabled, focusedElement, openCalendar, refs, window]);
+  }, [disabled, focusedElement, _onCalendarOpen, refs, window]);
 
   const clear = React.useCallback(() => {
     onChange?.(undefined);
@@ -190,8 +207,8 @@ export function useDateInput<T extends HTMLElement, D>({
     rootRef,
     calendarRef,
     open,
-    openCalendar,
-    closeCalendar,
+    openCalendar: _onCalendarOpen,
+    closeCalendar: _onCalendarClose,
     internalValue,
     focusedElement,
     setFocusedElement,

From f198947e7e2c3501f32d32176ca371327170360a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=AD=D0=BB=D1=8C=D0=B4=D0=B0=D1=80?=
 <61377022+EldarMuhamethanov@users.noreply.github.com>
Date: Tue, 5 Nov 2024 12:44:17 +0300
Subject: [PATCH 19/19] fix(HorizontalScroll): fix scroll when mouse over arrow
 (#7882)

---
 .../HorizontalScroll.test.tsx                 | 33 ++++++++++++
 .../HorizontalScroll/HorizontalScroll.tsx     | 51 +++++++++----------
 2 files changed, 56 insertions(+), 28 deletions(-)

diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.test.tsx b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.test.tsx
index 314ab9e082..8cb19c26d5 100644
--- a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.test.tsx
+++ b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.test.tsx
@@ -19,6 +19,11 @@ const setup = (element: HTMLElement, startScrollLeft = 0) => {
 
   jest.spyOn(element.firstElementChild!, 'scrollWidth', 'get').mockImplementation(() => 500);
 
+  // @ts-expect-error: TS2322 есть другой тип, но в компоненте он не используется
+  element.scrollBy = (options?: ScrollToOptions) => {
+    scrollLeft = scrollLeft + (options?.left || 0);
+  };
+
   return {
     get scrollLeft() {
       return scrollLeft;
@@ -176,6 +181,34 @@ describe('HorizontalScroll', () => {
       expect(mockedData.scrollLeft).toBe(200);
     });
   });
+
+  it('scroll by arrow', () => {
+    const ref: React.MutableRefObject<HTMLDivElement | null> = {
+      current: null,
+    };
+    render(
+      <HorizontalScroll getRef={ref} data-testid="horizontal-scroll">
+        <div style={{ width: '1800px', height: '50px' }} />
+      </HorizontalScroll>,
+    );
+
+    const mockedData = setup(ref.current!, 50);
+
+    fireEvent.mouseEnter(screen.getByTestId('horizontal-scroll'));
+
+    const arrowLeft = screen.getByTestId('ScrollArrowLeft');
+    const arrowRight = screen.getByTestId('ScrollArrowRight');
+
+    fireEvent.wheel(arrowRight, {
+      deltaX: 20,
+    });
+    expect(mockedData.scrollLeft).toBe(70);
+
+    fireEvent.wheel(arrowLeft, {
+      deltaX: 20,
+    });
+    expect(mockedData.scrollLeft).toBe(90);
+  });
 });
 
 function mockRef(element: HTMLDivElement) {
diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.tsx b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.tsx
index 449cc6311b..2dab857fea 100644
--- a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.tsx
+++ b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.tsx
@@ -1,10 +1,9 @@
 'use client';
 
 import * as React from 'react';
-import { classNames, noop } from '@vkontakte/vkjs';
+import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
 import { useDirection } from '../../hooks/useDirection';
-import { useEventListener } from '../../hooks/useEventListener';
 import { useExternRef } from '../../hooks/useExternRef';
 import { easeInOutSine } from '../../lib/fx';
 import type { HasRef, HTMLAttributesWithRootRef } from '../../types';
@@ -233,44 +232,33 @@ export const HorizontalScroll = ({
     }
   }, [showArrows, hasPointer, scrollerRef, setCanScrollStart, setCanScrollEnd]);
 
-  const scrollEvent = useEventListener('scroll', calculateArrowsVisibility);
-  React.useEffect(
-    function addScrollerRefToScrollEvent() {
-      if (!scrollerRef.current) {
-        return noop;
-      }
+  React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);
 
-      scrollEvent.add(scrollerRef.current);
-      return scrollEvent.remove;
+  const _onWheel = React.useCallback(
+    (e: React.WheelEvent) => {
+      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });
     },
-    [scrollEvent, scrollerRef],
+    [scrollerRef],
   );
 
-  React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);
-
   /**
    * Прокрутка с помощью любого колеса мыши
    */
-  const onwheel = React.useCallback(
-    (e: WheelEvent) => {
-      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });
+  const onScrollWheel = React.useCallback(
+    (e: React.WheelEvent) => {
+      _onWheel(e);
       e.preventDefault();
     },
-    [scrollerRef],
+    [_onWheel],
   );
 
-  const wheelEvent = useEventListener('wheel', onwheel);
-  React.useEffect(
-    function addScrollerRefToWheelEvent() {
-      if (!scrollerRef.current || !scrollOnAnyWheel) {
-        return noop;
+  const onArrowWheel = React.useCallback(
+    (e: React.WheelEvent) => {
+      if (e.deltaX || (e.deltaY && scrollOnAnyWheel)) {
+        _onWheel(e);
       }
-
-      wheelEvent.add(scrollerRef.current);
-
-      return wheelEvent.remove;
     },
-    [wheelEvent, scrollerRef, scrollOnAnyWheel],
+    [_onWheel, scrollOnAnyWheel],
   );
 
   return (
@@ -293,6 +281,7 @@ export const HorizontalScroll = ({
           tabIndex={-1}
           className={classNames(styles.arrow, styles.arrowLeft)}
           onClick={scrollToLeft}
+          onWheel={onArrowWheel}
         />
       )}
       {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (
@@ -305,9 +294,15 @@ export const HorizontalScroll = ({
           tabIndex={-1}
           className={classNames(styles.arrow, styles.arrowRight)}
           onClick={scrollToRight}
+          onWheel={onArrowWheel}
         />
       )}
-      <div className={styles.in} ref={scrollerRef}>
+      <div
+        className={styles.in}
+        ref={scrollerRef}
+        onScroll={calculateArrowsVisibility}
+        onWheel={scrollOnAnyWheel ? onScrollWheel : undefined}
+      >
         <div className={styles.inWrapper}>{children}</div>
       </div>
     </RootComponent>