From 11dd537feaa230133f8051fd6c370e6e3ec7d54f Mon Sep 17 00:00:00 2001
From: Valerii Sidorenko <balepas@nebius.com>
Date: Wed, 20 Nov 2024 13:35:36 +0100
Subject: [PATCH 1/8] fix(Select): do not reserve space for clear if empty
 (#1956)

---
 .../components/SelectClear/SelectClear.scss   |  1 +
 .../SelectControl/SelectControl.scss          | 25 +++----------------
 2 files changed, 5 insertions(+), 21 deletions(-)

diff --git a/src/components/Select/components/SelectClear/SelectClear.scss b/src/components/Select/components/SelectClear/SelectClear.scss
index 3949b639ad..dc844d6a5a 100644
--- a/src/components/Select/components/SelectClear/SelectClear.scss
+++ b/src/components/Select/components/SelectClear/SelectClear.scss
@@ -10,6 +10,7 @@ $block: '.#{variables.$ns}select-clear';
     align-items: center;
     margin-inline-start: auto;
     z-index: 1;
+    flex-shrink: 0;
 
     &:focus-visible {
         border: 1px solid var(--g-color-line-generic-active);
diff --git a/src/components/Select/components/SelectControl/SelectControl.scss b/src/components/Select/components/SelectControl/SelectControl.scss
index 8fae1ea32f..006da7d381 100644
--- a/src/components/Select/components/SelectControl/SelectControl.scss
+++ b/src/components/Select/components/SelectControl/SelectControl.scss
@@ -48,22 +48,6 @@ $blockButton: '.#{variables.$ns}select-control__button';
     }
 }
 
-@mixin block_clear_reserved_width() {
-    // reserving place for clear icon to fix width changing on displaying clear
-    #{$block}_has-clear:not(#{$block}_has-value)#{$block}_size_s & {
-        padding-inline-end: calc(#{variables.$s-height} + var(--_--text-right-padding));
-    }
-    #{$block}_has-clear:not(#{$block}_has-value)#{$block}_size_m & {
-        padding-inline-end: calc(#{variables.$m-height} + var(--_--text-right-padding));
-    }
-    #{$block}_has-clear:not(#{$block}_has-value)#{$block}_size_l & {
-        padding-inline-end: calc(#{variables.$l-height} + var(--_--text-right-padding));
-    }
-    #{$block}_has-clear:not(#{$block}_has-value)#{$block}_size_xl & {
-        padding-inline-end: calc(#{variables.$xl-height} + var(--_--text-right-padding));
-    }
-}
-
 @mixin block_clear_reserved_disabled_width() {
     // reserving place for clear icon to fix width changing on displaying clear for disabled select
     #{$block}_has-clear#{$block}_size_s #{$blockButton}_disabled & {
@@ -222,17 +206,16 @@ $blockButton: '.#{variables.$ns}select-control__button';
     &__placeholder,
     &__option-text {
         @include mixins.overflow-ellipsis();
-        @include block_clear_reserved_disabled_width();
 
         padding-inline-end: var(--_--text-right-padding);
     }
 
+    &__option-text {
+        @include block_clear_reserved_disabled_width();
+    }
+
     &__placeholder {
         color: var(--g-color-text-hint);
-
-        #{$blockButton}:not(#{$blockButton}_disabled) & {
-            @include block_clear_reserved_width();
-        }
     }
 
     &__chevron-icon {

From 8d456c3d77d63674f20ebac82913d8a26c14f997 Mon Sep 17 00:00:00 2001
From: sofiushko <sofiushko@users.noreply.github.com>
Date: Mon, 25 Nov 2024 19:52:22 +0300
Subject: [PATCH 2/8] fix(Toc): correctly display content of no items.length
 and add event forward (#1939)

---
 src/components/Toc/Toc.tsx                |  7 +++++--
 src/components/Toc/TocItem/TocItem.tsx    | 23 ++++++++++++++---------
 src/components/Toc/__tests__/Toc.test.tsx | 22 ++++++++++++++++------
 3 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/src/components/Toc/Toc.tsx b/src/components/Toc/Toc.tsx
index a29575dbe1..30e9b65dab 100644
--- a/src/components/Toc/Toc.tsx
+++ b/src/components/Toc/Toc.tsx
@@ -15,10 +15,11 @@ export interface TocProps extends QAProps {
     items: TocItemType[];
     value?: string;
     onUpdate?: (value: string) => void;
+    onItemClick?: (event: React.MouseEvent) => void;
 }
 
 export const Toc = React.forwardRef<HTMLElement, TocProps>(function Toc(props, ref) {
-    const {value: activeValue, items, className, onUpdate, qa} = props;
+    const {value: activeValue, items, className, onUpdate, onItemClick, qa} = props;
 
     return (
         <nav className={b(null, className)} ref={ref} data-qa={qa}>
@@ -31,8 +32,9 @@ export const Toc = React.forwardRef<HTMLElement, TocProps>(function Toc(props, r
                             href={href}
                             active={activeValue === value}
                             onClick={onUpdate}
+                            onItemClick={onItemClick}
                         />
-                        {childrenItems?.length && (
+                        {childrenItems && childrenItems.length > 0 && (
                             <ul className={b('subsections')}>
                                 {childrenItems?.map(
                                     ({
@@ -51,6 +53,7 @@ export const Toc = React.forwardRef<HTMLElement, TocProps>(function Toc(props, r
                                                 childItem={true}
                                                 active={activeValue === childrenValue}
                                                 onClick={onUpdate}
+                                                onItemClick={onItemClick}
                                             />
                                         </li>
                                     ),
diff --git a/src/components/Toc/TocItem/TocItem.tsx b/src/components/Toc/TocItem/TocItem.tsx
index d67c0cf3df..a330e6d388 100644
--- a/src/components/Toc/TocItem/TocItem.tsx
+++ b/src/components/Toc/TocItem/TocItem.tsx
@@ -14,18 +14,23 @@ export interface TocItemProps extends TocItemType {
     childItem?: boolean;
     active?: boolean;
     onClick?: (value: string) => void;
+    onItemClick?: (event: React.MouseEvent) => void;
 }
 
 export const TocItem = (props: TocItemProps) => {
-    const {active = false, childItem = false, content, href, value, onClick} = props;
-
-    const handleClick = React.useCallback(() => {
-        if (value === undefined || !onClick) {
-            return;
-        }
-
-        onClick(value);
-    }, [onClick, value]);
+    const {active = false, childItem = false, content, href, value, onClick, onItemClick} = props;
+
+    const handleClick = React.useCallback(
+        (event: React.MouseEvent) => {
+            onItemClick?.(event);
+            if (value === undefined || !onClick) {
+                return;
+            }
+
+            onClick(value);
+        },
+        [onClick, onItemClick, value],
+    );
 
     const {onKeyDown} = useActionHandlers(handleClick);
 
diff --git a/src/components/Toc/__tests__/Toc.test.tsx b/src/components/Toc/__tests__/Toc.test.tsx
index 5daa2f66a8..21dd0d8d16 100644
--- a/src/components/Toc/__tests__/Toc.test.tsx
+++ b/src/components/Toc/__tests__/Toc.test.tsx
@@ -52,13 +52,22 @@ describe('Toc', () => {
         const nextValue = defaultItems[0].value;
         const nextTitle = defaultItems[0].content;
         const onUpdateFn = jest.fn();
+        const onItemClickFn = jest.fn();
         const user = userEvent.setup();
 
-        render(<Toc value={defaultValue} items={defaultItems} onUpdate={onUpdateFn} />);
+        render(
+            <Toc
+                value={defaultValue}
+                items={defaultItems}
+                onUpdate={onUpdateFn}
+                onItemClick={onItemClickFn}
+            />,
+        );
         const nextItem = screen.getByText(nextTitle);
         await user.click(nextItem);
 
-        expect(onUpdateFn).toBeCalledWith(nextValue);
+        expect(onUpdateFn).toHaveBeenCalledWith(nextValue);
+        expect(onItemClickFn).toHaveBeenCalledWith(expect.objectContaining({}));
     });
 
     test('calls onUpdate with correct item with link', async () => {
@@ -71,13 +80,14 @@ describe('Toc', () => {
         const nextItem = screen.getByText(nextTitle);
         await user.click(nextItem);
 
-        expect(onUpdateFn).toBeCalledWith(nextValue);
+        expect(onUpdateFn).toHaveBeenCalledWith(nextValue);
     });
 
     test('accessible for keyboard', async () => {
         const firstTitle = defaultItems[0].content;
         const secondValue = defaultItems[1].value;
         const onUpdateFn = jest.fn();
+
         const user = userEvent.setup();
 
         render(<Toc value={defaultValue} items={defaultItems} onUpdate={onUpdateFn} />);
@@ -86,7 +96,7 @@ describe('Toc', () => {
         await user.tab();
         await user.keyboard('{Enter}');
 
-        expect(onUpdateFn).toBeCalledWith(secondValue);
+        expect(onUpdateFn).toHaveBeenCalledWith(secondValue);
     });
 
     test('accessible for keyboard with links', async () => {
@@ -101,7 +111,7 @@ describe('Toc', () => {
         await user.tab();
         await user.keyboard('{Enter}');
 
-        expect(onUpdateFn).toBeCalledWith(secondValue);
+        expect(onUpdateFn).toHaveBeenCalledWith(secondValue);
     });
 
     test('add className', () => {
@@ -148,6 +158,6 @@ describe('Toc', () => {
 
         const currentItem = screen.getByRole('listitem', {current: true});
 
-        expect(currentItem.textContent).toContain(content);
+        expect(currentItem.textContent).toBe(content);
     });
 });

From 1ffa460e25ee1aed075fcbaa05719a5ff34f85a0 Mon Sep 17 00:00:00 2001
From: Gravity UI Bot <111915794+gravity-ui-bot@users.noreply.github.com>
Date: Tue, 26 Nov 2024 14:03:46 +0300
Subject: [PATCH 3/8] chore(main): release 6.36.0 (#1954)

---
 CHANGELOG.md      | 13 +++++++++++++
 package-lock.json |  4 ++--
 package.json      |  2 +-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 995d14e03d..066dbf9b85 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,18 @@
 # Changelog
 
+## [6.36.0](https://github.com/gravity-ui/uikit/compare/v6.35.2...v6.36.0) (2024-11-25)
+
+
+### Features
+
+* **PasswordInput:** add component ([#1745](https://github.com/gravity-ui/uikit/issues/1745)) ([2e7f2c7](https://github.com/gravity-ui/uikit/commit/2e7f2c731c8cb2fd08993fc30ffed8b06a5f0ea2))
+
+
+### Bug Fixes
+
+* **Select:** do not reserve space for clear if empty ([#1956](https://github.com/gravity-ui/uikit/issues/1956)) ([11dd537](https://github.com/gravity-ui/uikit/commit/11dd537feaa230133f8051fd6c370e6e3ec7d54f))
+* **Toc:** correctly display content of no items.length and add event forward ([#1939](https://github.com/gravity-ui/uikit/issues/1939)) ([8d456c3](https://github.com/gravity-ui/uikit/commit/8d456c3d77d63674f20ebac82913d8a26c14f997))
+
 ## [6.35.2](https://github.com/gravity-ui/uikit/compare/v6.35.1...v6.35.2) (2024-11-14)
 
 
diff --git a/package-lock.json b/package-lock.json
index c10e57b538..229234b478 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@gravity-ui/uikit",
-    "version": "6.35.2",
+    "version": "6.36.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@gravity-ui/uikit",
-            "version": "6.35.2",
+            "version": "6.36.0",
             "license": "MIT",
             "dependencies": {
                 "@bem-react/classname": "^1.6.0",
diff --git a/package.json b/package.json
index 8aeefdf126..6909b8cc71 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@gravity-ui/uikit",
-    "version": "6.35.2",
+    "version": "6.36.0",
     "description": "Gravity UI base styling and components",
     "keywords": [
         "component",

From 704f53bf4e39f1d08ed254af9c5525feb28eacf4 Mon Sep 17 00:00:00 2001
From: Valerii Sidorenko <balepas@nebius.com>
Date: Tue, 26 Nov 2024 13:25:27 +0100
Subject: [PATCH 4/8] chore(eslint): disable complexity rule (#1960)

---
 .eslintrc                                       | 3 ++-
 src/components/Button/Button.tsx                | 1 -
 src/components/controls/TextArea/TextArea.tsx   | 1 -
 src/components/controls/TextInput/TextInput.tsx | 1 -
 4 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index f11af1b6e1..b38843c8a8 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -31,7 +31,8 @@
         "import/no-extraneous-dependencies": "off",
         "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
         "@typescript-eslint/prefer-ts-expect-error": "error",
-        "@typescript-eslint/consistent-type-imports": ["error", {"prefer":  "type-imports", "fixStyle": "separate-type-imports"}]
+        "@typescript-eslint/consistent-type-imports": ["error", {"prefer":  "type-imports", "fixStyle": "separate-type-imports"}],
+        "complexity": "off"
     },
     "overrides": [
         {
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 6ffa7adef4..173ffa2282 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -178,7 +178,6 @@ const isButtonIconComponent = isOfType(ButtonIcon);
 const isSpan = isOfType<{className?: string}>('span');
 const buttonIconClassRe = RegExp(`^${b('icon')}($|\\s+\\w)`);
 
-// eslint-disable-next-line complexity
 function prepareChildren(children: React.ReactNode) {
     const items = React.Children.toArray(children);
 
diff --git a/src/components/controls/TextArea/TextArea.tsx b/src/components/controls/TextArea/TextArea.tsx
index 53e3250087..127e6b112e 100644
--- a/src/components/controls/TextArea/TextArea.tsx
+++ b/src/components/controls/TextArea/TextArea.tsx
@@ -37,7 +37,6 @@ export type TextAreaPin = InputControlPin;
 export type TextAreaSize = InputControlSize;
 export type TextAreaView = InputControlView;
 
-// eslint-disable-next-line complexity
 export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(
     function TextArea(props, ref) {
         const {
diff --git a/src/components/controls/TextInput/TextInput.tsx b/src/components/controls/TextInput/TextInput.tsx
index 2c7f51a782..1d48b73872 100644
--- a/src/components/controls/TextInput/TextInput.tsx
+++ b/src/components/controls/TextInput/TextInput.tsx
@@ -62,7 +62,6 @@ export type TextInputSize = InputControlSize;
 export type TextInputView = InputControlView;
 
 export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(
-    // eslint-disable-next-line complexity
     function TextInput(props, ref) {
         const {
             view = 'normal',

From 2be5eb8dc21679154bbb924af5e1e1eefa8a7a58 Mon Sep 17 00:00:00 2001
From: Kirill Revenkov <revenkov-k@yandex-team.ru>
Date: Wed, 27 Nov 2024 12:41:22 +0300
Subject: [PATCH 5/8] feat(Select): new label and value resize behaviour
 (#1896)

Co-authored-by: Valerii Sidorenko <balepas@nebius.com>
---
 ...arent-flex-basis-0-dark-chromium-linux.png | Bin 3346 -> 0 bytes
 ...-parent-flex-basis-0-dark-webkit-linux.png | Bin 3176 -> 0 bytes
 ...rent-flex-basis-0-light-chromium-linux.png | Bin 3102 -> 0 bytes
 ...parent-flex-basis-0-light-webkit-linux.png | Bin 2979 -> 0 bytes
 .../Select/__tests__/Select.visual.test.tsx   |  20 ------------------
 .../SelectControl/SelectControl.scss          |   7 +++---
 6 files changed, 3 insertions(+), 24 deletions(-)
 delete mode 100644 src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-control-with-parent-flex-basis-0-dark-chromium-linux.png
 delete mode 100644 src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-control-with-parent-flex-basis-0-dark-webkit-linux.png
 delete mode 100644 src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-control-with-parent-flex-basis-0-light-chromium-linux.png
 delete mode 100644 src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-control-with-parent-flex-basis-0-light-webkit-linux.png
 delete mode 100644 src/components/Select/__tests__/Select.visual.test.tsx

diff --git a/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-control-with-parent-flex-basis-0-dark-chromium-linux.png b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-control-with-parent-flex-basis-0-dark-chromium-linux.png
deleted file mode 100644
index 45d40ecffd91ac3a4072f1efe36adedfb49142b5..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3346
zcmc&%c{J2*8~(K^3XMc6OH_7>UPQ?Dj&*2|ZDe_ekbRWQ49Y%aONwbE%ar9cwj?x0
zBwMx_!Z0N3G{!!5<D2h%e|_hC=X`&@e>~fHo^zdZ-}iN{=ejXg5HK&#c^&`&cukBA
zp`3M(GZIc5=FH|u&>Uwugn)we0YcA3IslydZepls^BBjZp#rUK#f~peba!jX=2>7r
z9OEf7^2+>Zl?XMZk`Es_Hj<+^lc#0uK?Au|_bfXKfk5`5upwGM=#HTqjNL?7wUV(H
ztC2X-{y^r#?USqKWU|_H*xIlz-<gJ|FL}Hn&)0VMGRMcJ+0W6a;2z@Kcp!bBeCX24
z1TWzyR-fGFL5OSX2{+Fnzg|40?amh`cKx_PYF2a}`1_YWsae;5;9BaPbJGC`V`z$p
z;-My&1@3)MGThP?2}kSX4o#gs`o*()#8-_pVcC%H3X9o$tkS!N9mjt9q;U$Vu(FN5
zTUt|A)6HO!2{U$}ezJUKr(w7xrh(=eS_kv59i0g_8qkWZ$IOLgn_tZ|^-#%%;s?BL
z_|#B+RkSYhQSr1tN%$eJ8{E{R!0EB55#L93un>mcrOO!|>qw%#B-ay9GXx5y#Y_Z%
zt;ZI(TDwaJeaawRK`<1mfgaZ}wPK~f6^k2U)Hs$EGVNppqrj)f4m0zM7K!P`moYnr
zDN|G`6|2|{()gvv-?Oyor0{ZM<59}gztPP}U<=iC;uPx06NwY*PX17ZBe8mBh$Qeb
za2tKN`^_;u#r0dgr8aV;iGX^yW;LDJ?fr<1k?GA{Te-6=(U1YPavRy3DTtfS{<W{~
z^2*>~kXK#wUm6fRw7)FIaeh$l4?rUa;&|-svQ)$DFfY+Yj`#D)1W;jeMrUD2*IOYZ
z<SPf!m!7Rp)c}F(EG_*GKy5+O*ZwFwY_*kcuz*V_aN>f5=>0c0c3dpB_g~bw{O$Z1
zex0dr)tgw=*XyJaF!e5ZiM>Wc5pJ@Ii!Z4A!47g+K|w(@ba3*Y8Ca~3vC6H$Y<@XL
z`roNK+g_a4XAyE<LjuwH3hT#x_~%3FabvhI+0hO65S>f!ILGSyJ&t8R0&Rs4yH|d4
zhqR&&kjhe02Jb1wQv)C56ZP&0?d;d=DhizhURcU4x!1UbwLG_ee#o^;-Kp807Hw)~
zxf{rer`(5-hC?cgD>095UYGCGUt%FiqZ^`tV5;n08Nr+~wMw)k0ILt7Z&glBDlR|$
z9v<fJh;*E>%S0U981hx4C`o(v=k^~s`Hj~5eN$Bx<S{bw?x=Ml5fQPU?gbqyI0?8i
zX3OB*Z9!AtQsre8P0TEll9CV&G&?1i;t@ORZCm{4;NZpH4oh<}=Nt8Tjc(n)|IiCn
z-0F&oiHYg7$kY|vx?W)=m+{h4PF?82?&gwmy0N2^ljTLN6;>q4zbIh7$Ls-dq~432
zpUbyDKn(q*!!lzY2S~7;8Fg*BfX8CJYw>(yzbosTrFZlLt~>FuA6K~A=xrCSHpE3N
ze5!<E24;epW0e`^V=j%sVeAAn@F`*+X%KFJM(@4-63xXc23JsPWdCM3<0{6~YnCcL
zyM+=N{g+a&Ub!;3P{ys$?^7c`;gHR?svlzb`S@0iGK=@E+bqwys1X*TBO@!e8Qq&`
z@6x+}|E8b0s><b=_GYpd964Sa>Y^_0p`gMiswN0fM@M@Ha_Id$EfPEW{J?9{2<%#k
zYu`^jZ@PD~@cHP)oNGacfdzJix=3@1sIFS1VWY%}u5tTEt_O#zAdes$C8ToX)@1y9
zoj)G#&oK<3gTL@e6me5hAiJ4NQX(Q*a&^yopWXNTj@4$&*tu{LSES`U#8Qn}6Lb^!
zwK%Plww0AFf7T-$`D;0^Wr%REff1;tDzB=j%?o_=ZPbpjFg4}y0LtXAdHVH86J|=f
zeb{xnDE*SG_g2EBLEI_OQ8)VYQH(TbWVtm?yJ0i%qI&r3dYbS2p_~UAp$l_=O>gwM
z8JtXxbuM@DQaE*)J)d5{y3as0eiIYU%;SgG`@$UhrhQdn%F4@iQL_pTRsPKSk;p9K
zUiXY%Zy<Xwj4aJ<qFulPPCvkx+7Y;DHKjhn+vN!{i2OsYOK*tMmTxZCuC1;<Gy2x^
z<A#t3XWP!4YD*bfD5d*$&kKOWTf&Fgv<-)|)dM~?mF>pRV*pQVeo<l3)aj2>&iRn?
zq0N*f#Y|(P&j|~3e%sTkDk{Lw+3we};n1i>PE`SkOyk`R#)V5-lBJ=xN1D<u85pCM
zR*)M96}nzIQO!}eFGTJQuW(}TEBXL7d@w&cN`0{L<HgHNh(hkU6X7da?s%wo^+<dC
zc`KbdH1(NxM@NUYon`qwBJkGN*I{J1s^^D^v2j9L-|-n8U0rcNbGGqq#S?{R#IN9>
z`HrXW$yMY9+(P62&OP=_@Y{fDL|adaG+g_jZSH+{78d~K6Tew;@MOgIBdscoI6k@E
za$iSF)uuH~b+0!^Ybfv|g_u!RR+dMF8Hc>w9fqJo;@JZo)*OCO$ds$*xC&1e_RtY7
zxTgmf%kP6GGs9As8+f4Wusai{tfhlnAT$Q(?MpHgAE;a&$|0Z*#Fup2DRB-~i$pQy
zwxG(KEg7+P0l0?Kt#{`D)3%p~n>x-&zs5!|^*M;ExA=j~*K*NfX2?lr&MzFw+%)rm
zCjUtZ>S%qJ1f)F|7|TmV4>pt>nWDCVb=bpGsp+GY*sUV|eL{&dUwn(}HMsV3TN{|+
zqsdU1p3<v~j+0T#k*};cwVck4!Ig}Pyzb@#G;@@^!aA}9Foxuyj`S8VAQ9?C_;UJ|
z3B~oAInte+(<KFN8#{9y#{nkN{L9&m=K;A{o5FPyZ$Cfg;{-u~0Bh9e>*VVd7qc%K
z^nOJoJ{!YBi{UB`_j@OXhfe?;HU!7datZMnUs#5<BH+2^O^w>S=2y@3t|=3D1nTO!
z^Q>fM6>*!?To=@2tFZoNy+Qe3i+^dY^wZu;e?(W~(a<o6KOf+G@CenX*IiF}$ji%n
z<TxK}b@q7)(^e=6Z#kh8TX0fY%^9}6(fN=uv~r6SxYAq@pUM?(bebb(DzCdS7z{^q
z9Ci)L=y4{cloYiT0`*QN7K_cvQ2Z58d)~hm)#@aFch9f2Jt{png6-{RQ8wr^c;)vq
zqdz%GCzGpoS_Yj-X&gFv1Sp@}GifaN#!)PlcQFc;BfhG+d?W3<5Kc8L)Xm`)0|+O~
z(L3Th2;RBhkRcCGkDYzCpVLQLUGs&c3Hu5!J&yiN%Vu=2;z~Z+h41yZLEa-;gfDpN
zXjKP>xGnaLHN=fGgO#x)j!18dh={aaX$5`;YRIYE687OtC;4$6SXH9N!_@(K<wg}$
z&%z#P+d3C(Dx{gyBRU$2-k{$Xs>U;fC54g(fBzg=gJNvtxF_)G?mCM{Ys5VyGL9|c
zZc+?FFq+X{Tx%T5T}b0Wo_Iq^I-WlGgZhK@S(vDoo0a8NJwk9MKI$#4k`+vxegVfr
z!@7`+)tRox{rf4+dvz1G1GVck_;sg6>JOf%K40&~xfV|N)1@Si7ix=L6OKS7%b4e*
zB$E2VoBoF#tm)hR+}QLC_VvVSP)6z-PmvF53oFQ|6tDa&u#W#~zqO&_I-DxS$`#k2
zG@RYIbD(YFlP7KWn(iJam8e~qjL?)h=sQR38x;lKLQA5qzALc5@-o5J)b=g0AmLu_
z_*BraC@z7*V14kpJqf>dP6KqmcC@&+si1D{t9#{Ecto)|HZART<taffZf<U9@xa^~
z4Uzcp-0}+cvE%5*HaZGyC6^f-3;Ui_9LdOgBO!qK;OM7pq0BK*YT3o9?y~V>z|q>D
zYuhhO@#a^pO9wf|X(v>i=TfYG`U{+)Qpq@ZEST{_k$Uz}cZRVhR7MaP{pMmF#~D)S
zAsV8P_Y}qoS&4Vw^K;g#t{I*>eWh1sg#y7hI^iltJ?deGF>gLwYvw?TZOBSTW3y=f
zwe||2!3d+yZ0mceo8MR$g6m*}v@W;`#=bcz3|DwM`9CK2R#ewauqIBlTuu0r<dyXp
riU?*2lz4skh2%ft$p23_u%;V37}{335p|i<<Nzi{5JQ5#Yt+90ZYZJr

diff --git a/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-control-with-parent-flex-basis-0-dark-webkit-linux.png b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-control-with-parent-flex-basis-0-dark-webkit-linux.png
deleted file mode 100644
index ae79506d9d8147ad02cdcea7813d697084d2f04d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3176
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

diff --git a/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-control-with-parent-flex-basis-0-light-chromium-linux.png b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-control-with-parent-flex-basis-0-light-chromium-linux.png
deleted file mode 100644
index b82040995332e8b0d3168045cb5fd36a0ec8261e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3102
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
T?285hzl8ZkYtxboHy-{AF{EN^

diff --git a/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-control-with-parent-flex-basis-0-light-webkit-linux.png b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-control-with-parent-flex-basis-0-light-webkit-linux.png
deleted file mode 100644
index 04c500af537c06e6aa14a75b5ddcf39e0a28c104..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2979
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
XBJHBX9Ag0Jx)q$^?y$-quiX9%zcddH

diff --git a/src/components/Select/__tests__/Select.visual.test.tsx b/src/components/Select/__tests__/Select.visual.test.tsx
deleted file mode 100644
index 5ef9a5e027..0000000000
--- a/src/components/Select/__tests__/Select.visual.test.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-
-import {test} from '~playwright/core';
-
-import {Select} from '../index';
-import type {SelectOption} from '../index';
-
-test.describe('Select', {tag: '@Select'}, () => {
-    test('control-with-parent-flex-basis-0', async ({mount, expectScreenshot}) => {
-        const options: SelectOption[] = [{value: '1', content: 'Value 1'}];
-        await mount(
-            <div style={{display: 'flex'}}>
-                <div style={{flex: '0 0'}}>
-                    <Select value={['1']} options={options} />
-                </div>
-            </div>,
-        );
-        await expectScreenshot();
-    });
-});
diff --git a/src/components/Select/components/SelectControl/SelectControl.scss b/src/components/Select/components/SelectControl/SelectControl.scss
index 006da7d381..dd2e9a6b55 100644
--- a/src/components/Select/components/SelectControl/SelectControl.scss
+++ b/src/components/Select/components/SelectControl/SelectControl.scss
@@ -100,8 +100,10 @@ $blockButton: '.#{variables.$ns}select-control__button';
         @include mixins.button-reset();
         @include mixins.pin($blockButton, ('::before', '::after'), var(--_--border-radius));
 
-        display: inline-flex;
+        display: inline-grid;
+        grid-template-columns: auto auto;
         align-items: center;
+        justify-content: flex-start;
         overflow: hidden;
         width: 100%;
         height: 100%;
@@ -197,10 +199,7 @@ $blockButton: '.#{variables.$ns}select-control__button';
         @include mixins.text-accent;
         @include mixins.overflow-ellipsis();
 
-        flex-shrink: 0;
-        max-width: 50%;
         margin-inline-end: 4px;
-        white-space: nowrap;
     }
 
     &__placeholder,

From 301e4ab365639188e010390d5b19da1df13d75fa Mon Sep 17 00:00:00 2001
From: Valerii Sidorenko <balepas@nebius.com>
Date: Wed, 27 Nov 2024 10:43:24 +0100
Subject: [PATCH 6/8] feat(Breadcrunbs): allow items to be disabled
 independently (#1962)

---
 .../lab/Breadcrumbs/BreadcrumbItem.tsx        |  6 +-
 .../lab/Breadcrumbs/Breadcrumbs.tsx           |  4 +-
 src/components/lab/Breadcrumbs/README.md      | 57 +++++++++++++++++++
 .../__stories__/Breadcrumbs.stories.tsx       | 16 ++++++
 .../lab/Breadcrumbs/__stories__/Docs.mdx      |  2 +
 .../__tests__/Breadcrumbs.test.tsx            |  3 +-
 6 files changed, 83 insertions(+), 5 deletions(-)

diff --git a/src/components/lab/Breadcrumbs/BreadcrumbItem.tsx b/src/components/lab/Breadcrumbs/BreadcrumbItem.tsx
index e7c32c5f24..4d6a1f7b31 100644
--- a/src/components/lab/Breadcrumbs/BreadcrumbItem.tsx
+++ b/src/components/lab/Breadcrumbs/BreadcrumbItem.tsx
@@ -25,7 +25,7 @@ export function BreadcrumbItem(props: BreadcrumbProps) {
     }
 
     const handleAction = (event: React.MouseEvent | React.KeyboardEvent) => {
-        if (props.disabled || props.current) {
+        if (props.disabled) {
             event.preventDefault();
             return;
         }
@@ -43,7 +43,7 @@ export function BreadcrumbItem(props: BreadcrumbProps) {
         }
     };
 
-    const isDisabled = props.disabled || props.current;
+    const isDisabled = props.disabled;
     let linkProps: React.AnchorHTMLAttributes<HTMLElement> = {
         title,
         onClick: handleAction,
@@ -68,7 +68,7 @@ export function BreadcrumbItem(props: BreadcrumbProps) {
     }
 
     if (props.current) {
-        linkProps['aria-current'] = 'page';
+        linkProps['aria-current'] = props['aria-current'] ?? 'page';
     }
 
     if (props.itemType === 'menu') {
diff --git a/src/components/lab/Breadcrumbs/Breadcrumbs.tsx b/src/components/lab/Breadcrumbs/Breadcrumbs.tsx
index 8cd6ef2120..c3cf01be45 100644
--- a/src/components/lab/Breadcrumbs/Breadcrumbs.tsx
+++ b/src/components/lab/Breadcrumbs/Breadcrumbs.tsx
@@ -27,7 +27,9 @@ export interface BreadcrumbsItemProps {
     ping?: string;
     referrerPolicy?: React.HTMLAttributeReferrerPolicy;
     'aria-label'?: string;
+    'aria-current'?: React.AriaAttributes['aria-current'];
     routerOptions?: RouterOptions;
+    disabled?: boolean;
 }
 
 function Item(_props: BreadcrumbsItemProps): React.ReactElement | null {
@@ -237,7 +239,7 @@ export const Breadcrumbs = React.forwardRef(function Breadcrumbs(
                     {...child.props}
                     key={key}
                     current={isCurrent}
-                    disabled={props.disabled}
+                    disabled={props.disabled || child.props.disabled}
                     onAction={handleAction}
                     navigate={navigate}
                 >
diff --git a/src/components/lab/Breadcrumbs/README.md b/src/components/lab/Breadcrumbs/README.md
index b3e3683234..cb5b69bb39 100644
--- a/src/components/lab/Breadcrumbs/README.md
+++ b/src/components/lab/Breadcrumbs/README.md
@@ -469,6 +469,62 @@ LANDING_BLOCK-->
 
 <!--/GITHUB_BLOCK-->
 
+### Disabled items
+
+<!--LANDING_BLOCK
+
+<ExampleBlock
+    code={`
+<Breadcrumbs>
+    <Breadcrumbs.Item href="#Region">Region</Breadcrumbs.Item>
+    <Breadcrumbs.Item href="#Country" disabled>
+        Country
+    </Breadcrumbs.Item>
+    <Breadcrumbs.Item href="#City">City</Breadcrumbs.Item>
+    <Breadcrumbs.Item href="#District">District</Breadcrumbs.Item>
+    <Breadcrumbs.Item href="#Street" disabled>
+        Street
+    </Breadcrumbs.Item>
+</Breadcrumbs>
+`}
+>
+    <UIKit.Breadcrumbs>
+        <UIKit.Breadcrumbs.Item href="#Region">Region</UIKit.Breadcrumbs.Item>
+        <UIKit.Breadcrumbs.Item href="#Country" disabled>
+            Country
+        </UIKit.Breadcrumbs.Item>
+        <UIKit.Breadcrumbs.Item href="#City">City</UIKit.Breadcrumbs.Item>
+        <UIKit.Breadcrumbs.Item href="#District">District</UIKit.Breadcrumbs.Item>
+        <UIKit.Breadcrumbs.Item href="#Street" disabled>
+            Street
+        </UIKit.Breadcrumbs.Item>
+    </UIKit.Breadcrumbs>
+</ExampleBlock>
+
+LANDING_BLOCK-->
+
+<!--GITHUB_BLOCK-->
+
+```jsx
+<Breadcrumbs>
+  <Breadcrumbs.Item href="#Region">Region</Breadcrumbs.Item>
+  <Breadcrumbs.Item href="#Country" disabled>
+    Country
+  </Breadcrumbs.Item>
+  <Breadcrumbs.Item href="#City">City</Breadcrumbs.Item>
+  <Breadcrumbs.Item href="#District">District</Breadcrumbs.Item>
+  <Breadcrumbs.Item href="#Street" disabled>
+    Street
+  </Breadcrumbs.Item>
+</Breadcrumbs>
+```
+
+<!-- Storybook example -->
+
+<BreadcrumbsDisabledItems />
+
+<!--/GITHUB_BLOCK-->
+
 ## Properties
 
 | Name             | Description                                                           | Type                                       | Default |
@@ -499,3 +555,4 @@ LANDING_BLOCK-->
 | href       | A URL to link to.                                                  | `string`                          |         |
 | target     | The target window for the link.                                    | `React.HTMLAttributeAnchorTarget` |         |
 | rel        | The relationship between the linked resource and the current page. | `string`                          |         |
+| disabled   | Whether the BreadcrumbsItem is disabled.                           | `boolean`                         |         |
diff --git a/src/components/lab/Breadcrumbs/__stories__/Breadcrumbs.stories.tsx b/src/components/lab/Breadcrumbs/__stories__/Breadcrumbs.stories.tsx
index 59b90c69c3..16a967c1c3 100644
--- a/src/components/lab/Breadcrumbs/__stories__/Breadcrumbs.stories.tsx
+++ b/src/components/lab/Breadcrumbs/__stories__/Breadcrumbs.stories.tsx
@@ -136,3 +136,19 @@ export const WithIcons = {
 export const Landmarks = {
     render: (args) => <nav aria-label="Breadcrumb">{Links.render(args)}</nav>,
 } satisfies Story;
+
+export const DisabledItems = {
+    render: (args) => (
+        <Breadcrumbs {...args}>
+            <Breadcrumbs.Item href="#Region">Region</Breadcrumbs.Item>
+            <Breadcrumbs.Item href="#Country" disabled>
+                Country
+            </Breadcrumbs.Item>
+            <Breadcrumbs.Item href="#City">City</Breadcrumbs.Item>
+            <Breadcrumbs.Item href="#District">District</Breadcrumbs.Item>
+            <Breadcrumbs.Item href="#Street" disabled>
+                Street
+            </Breadcrumbs.Item>
+        </Breadcrumbs>
+    ),
+} satisfies Story;
diff --git a/src/components/lab/Breadcrumbs/__stories__/Docs.mdx b/src/components/lab/Breadcrumbs/__stories__/Docs.mdx
index 12225aef2b..6de1aa1485 100644
--- a/src/components/lab/Breadcrumbs/__stories__/Docs.mdx
+++ b/src/components/lab/Breadcrumbs/__stories__/Docs.mdx
@@ -16,6 +16,7 @@ export const BreadcrumbsRootContext = () => <Canvas of={Stories.RootContext} sou
 export const BreadcrumbsSeparator = () => <Canvas of={Stories.Separator} sourceState="none" />;
 export const BreadcrumbsWithIcons = () => <Canvas of={Stories.WithIcons} sourceState="none" />;
 export const BreadcrumbsLandmarks = () => <Canvas of={Stories.Landmarks} sourceState="none" />;
+export const BreadcrumbsDisabledItems = () => <Canvas of={Stories.DisabledItems} sourceState="none" />;
 
 <Meta of={Stories} />
 
@@ -32,6 +33,7 @@ export const BreadcrumbsLandmarks = () => <Canvas of={Stories.Landmarks} sourceS
             BreadcrumbsSeparator,
             BreadcrumbsWithIcons,
             BreadcrumbsLandmarks,
+            BreadcrumbsDisabledItems,
         },
     }}
 >
diff --git a/src/components/lab/Breadcrumbs/__tests__/Breadcrumbs.test.tsx b/src/components/lab/Breadcrumbs/__tests__/Breadcrumbs.test.tsx
index f44ec07f73..43ce062bda 100644
--- a/src/components/lab/Breadcrumbs/__tests__/Breadcrumbs.test.tsx
+++ b/src/components/lab/Breadcrumbs/__tests__/Breadcrumbs.test.tsx
@@ -21,7 +21,7 @@ it('handles multiple items', () => {
         <Breadcrumbs>
             <Breadcrumbs.Item>Folder 1</Breadcrumbs.Item>
             <Breadcrumbs.Item>Folder 2</Breadcrumbs.Item>
-            <Breadcrumbs.Item>Folder 3</Breadcrumbs.Item>
+            <Breadcrumbs.Item disabled>Folder 3</Breadcrumbs.Item>
         </Breadcrumbs>,
     );
     const item1 = screen.getByText('Folder 1');
@@ -32,6 +32,7 @@ it('handles multiple items', () => {
     expect(item2).not.toHaveAttribute('aria-current');
     const item3 = screen.getByText('Folder 3');
     expect(item3.tabIndex).toBe(-1);
+    expect(item3).toHaveAttribute('aria-disabled', 'true');
     expect(item3).toHaveAttribute('aria-current', 'page');
 });
 

From 8772d1af084e2fca21e44bb2c96344de64b7d5ab Mon Sep 17 00:00:00 2001
From: Gravity UI Bot <111915794+gravity-ui-bot@users.noreply.github.com>
Date: Wed, 27 Nov 2024 12:47:12 +0300
Subject: [PATCH 7/8] chore(main): release 6.37.0 (#1964)

---
 CHANGELOG.md      | 8 ++++++++
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 066dbf9b85..c8545d1fb0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## [6.37.0](https://github.com/gravity-ui/uikit/compare/v6.36.0...v6.37.0) (2024-11-27)
+
+
+### Features
+
+* **Breadcrunbs:** allow items to be disabled independently ([#1962](https://github.com/gravity-ui/uikit/issues/1962)) ([301e4ab](https://github.com/gravity-ui/uikit/commit/301e4ab365639188e010390d5b19da1df13d75fa))
+* **Select:** new label and value resize behaviour ([#1896](https://github.com/gravity-ui/uikit/issues/1896)) ([2be5eb8](https://github.com/gravity-ui/uikit/commit/2be5eb8dc21679154bbb924af5e1e1eefa8a7a58))
+
 ## [6.36.0](https://github.com/gravity-ui/uikit/compare/v6.35.2...v6.36.0) (2024-11-25)
 
 
diff --git a/package-lock.json b/package-lock.json
index 229234b478..f46cb70378 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@gravity-ui/uikit",
-    "version": "6.36.0",
+    "version": "6.37.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@gravity-ui/uikit",
-            "version": "6.36.0",
+            "version": "6.37.0",
             "license": "MIT",
             "dependencies": {
                 "@bem-react/classname": "^1.6.0",
diff --git a/package.json b/package.json
index 6909b8cc71..a4aeb181c3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@gravity-ui/uikit",
-    "version": "6.36.0",
+    "version": "6.37.0",
     "description": "Gravity UI base styling and components",
     "keywords": [
         "component",

From e788ad66d6b2b651efea0012350c78b0575c7480 Mon Sep 17 00:00:00 2001
From: icekimi23 <icekimi23@gmail.com>
Date: Wed, 11 Dec 2024 12:59:35 +0100
Subject: [PATCH 8/8] refactor(Toaster): fix incompatibility of different
 Toaster APIs

---
 .../Toaster/Provider/ToasterProvider.tsx      | 111 +++-----------
 src/components/Toaster/README.md              |  31 +---
 src/components/Toaster/ToasterSingleton.tsx   | 143 ++++++++----------
 .../Toaster/__stories__/Toaster.stories.tsx   |   5 +-
 .../Toaster/__stories__/ToasterShowcase.tsx   |  21 ++-
 .../__tests__/ToasterProvider.test.tsx        | 112 ++++++--------
 src/components/Toaster/hooks/useToaster.ts    |  11 +-
 src/toaster-singleton-react-18.ts             |   9 --
 8 files changed, 165 insertions(+), 278 deletions(-)
 delete mode 100644 src/toaster-singleton-react-18.ts

diff --git a/src/components/Toaster/Provider/ToasterProvider.tsx b/src/components/Toaster/Provider/ToasterProvider.tsx
index f6aaf3629e..89b85adf59 100644
--- a/src/components/Toaster/Provider/ToasterProvider.tsx
+++ b/src/components/Toaster/Provider/ToasterProvider.tsx
@@ -2,105 +2,32 @@
 
 import React from 'react';
 
-import type {InternalToastProps, ToastProps, ToasterPublicMethods} from '../types';
-import {getToastIndex} from '../utilities/getToastIndex';
-import {hasToast} from '../utilities/hasToast';
-import {removeToast} from '../utilities/removeToast';
+import type {ToasterSingleton} from '../ToasterSingleton';
+import type {InternalToastProps} from '../types';
 
 import {ToasterContext} from './ToasterContext';
 import {ToastsContext} from './ToastsContext';
 
-type Props = React.PropsWithChildren<{}>;
+type Props = React.PropsWithChildren<{
+    toaster: ToasterSingleton;
+}>;
 
-export const ToasterProvider = React.forwardRef<ToasterPublicMethods, Props>(
-    function ToasterProvider({children}: Props, ref) {
-        const [toasts, setToasts] = React.useState<InternalToastProps[]>([]);
+export const ToasterProvider = ({toaster, children}: Props) => {
+    const [toasts, setToasts] = React.useState<InternalToastProps[]>([]);
 
-        const add = React.useCallback((toast: ToastProps) => {
-            const {name} = toast;
+    React.useEffect(() => {
+        const unsubscribe = toaster.subscribe(setToasts);
 
-            setToasts((toasts) => {
-                let nextToasts = toasts;
+        return () => {
+            unsubscribe();
+        };
+    }, [toaster]);
 
-                if (hasToast(toasts, name)) {
-                    nextToasts = removeToast(toasts, name);
-                }
-
-                return [
-                    ...nextToasts,
-                    {
-                        ...toast,
-                        addedAt: Date.now(),
-                        ref: React.createRef<HTMLDivElement>(),
-                    },
-                ];
-            });
-        }, []);
-
-        const remove = React.useCallback((toastName: ToastProps['name']) => {
-            setToasts((toasts) => {
-                return removeToast(toasts, toastName);
-            });
-        }, []);
-
-        const removeAll = React.useCallback(() => {
-            setToasts(() => []);
-        }, []);
-
-        const update = React.useCallback(
-            (toastName: ToastProps['name'], override: Partial<ToastProps>) => {
-                setToasts((toasts) => {
-                    if (!hasToast(toasts, toastName)) {
-                        return toasts;
-                    }
-
-                    const index = getToastIndex(toasts, toastName);
-
-                    return [
-                        ...toasts.slice(0, index),
-                        {
-                            ...toasts[index],
-                            ...override,
-                        },
-                        ...toasts.slice(index + 1),
-                    ];
-                });
-            },
-            [],
-        );
-
-        const toastsRef = React.useRef<InternalToastProps[]>(toasts);
-        React.useEffect(() => {
-            toastsRef.current = toasts;
-        }, [toasts]);
-        const has = React.useCallback((toastName: ToastProps['name']) => {
-            return toastsRef.current ? hasToast(toastsRef.current, toastName) : false;
-        }, []);
-
-        const toasterContext = React.useMemo(() => {
-            return {
-                add,
-                remove,
-                removeAll,
-                update,
-                has,
-            };
-        }, [add, remove, removeAll, update, has]);
-
-        React.useImperativeHandle(ref, () => ({
-            add,
-            remove,
-            removeAll,
-            update,
-            has,
-        }));
-
-        return (
-            <ToasterContext.Provider value={toasterContext}>
-                <ToastsContext.Provider value={toasts}>{children}</ToastsContext.Provider>
-            </ToasterContext.Provider>
-        );
-    },
-);
+    return (
+        <ToasterContext.Provider value={toaster}>
+            <ToastsContext.Provider value={toasts}>{children}</ToastsContext.Provider>
+        </ToasterContext.Provider>
+    );
+};
 
 ToasterProvider.displayName = 'ToasterProvider';
diff --git a/src/components/Toaster/README.md b/src/components/Toaster/README.md
index f4b8de7990..7f2eeb682a 100644
--- a/src/components/Toaster/README.md
+++ b/src/components/Toaster/README.md
@@ -11,11 +11,13 @@ Component for adjustable notifications.
 ```jsx
 import React from 'react';
 import ReactDOMClient from 'react-dom/client';
-import {ToasterComponent, ToasterProvider} from '@gravity-ui/uikit';
+import {Toaster, ToasterComponent, ToasterProvider} from '@gravity-ui/uikit';
+
+const toaster = new Toaster();
 
 const root = ReactDOMClient.createRoot(document.getElementById('root'));
 root.render(
-  <ToasterProvider>
+  <ToasterProvider toaster={toaster}>
     <App />
     <ToasterComponent className="optional additional classes" />
   </ToasterProvider>,
@@ -66,8 +68,6 @@ const FoobarWithToaster = withToaster()(FoobarComponent);
 Toaster has singleton, so when it is initialized in different parts of the application, the same instance will be returned.
 On initialization, it is possible to transmit a className that will be assigned to dom-element which wrap all toasts.
 
-### React < 18
-
 ```js
 import {Toaster} from '@gravity-ui/uikit';
 const toaster = new Toaster();
@@ -79,34 +79,13 @@ or
 import {toaster} from '@gravity-ui/uikit/toaster-singleton';
 ```
 
-### React 18
-
-```js
-import ReactDOMClient from 'react-dom/client';
-import {Toaster} from '@gravity-ui/uikit';
-Toaster.injectReactDOMClient(ReactDOMClient);
-const toaster = new Toaster();
-```
-
-or
-
-```js
-import {toaster} from '@gravity-ui/uikit/toaster-singleton-react-18';
-```
-
-## Constructor arguments
-
-| Parameter | Type      | Default     | Description                                         |
-| :-------- | :-------- | :---------- | :-------------------------------------------------- |
-| className | `string`  | `undefined` | Custom class name to add to the component container |
-| mobile    | `boolean` | `false`     | Configuration that manages mobile/desktop views     |
-
 ## Methods
 
 | Method name                   | Params             | Description                                                                                                                                   |
 | :---------------------------- | :----------------- | :-------------------------------------------------------------------------------------------------------------------------------------------- |
 | add(toastOptions)             | `Object`           | Creates a new notification                                                                                                                    |
 | remove(name)                  | `string`           | Manually deletes an existing notification                                                                                                     |
+| removeAll()                   |                    | Deletes all existing notifications                                                                                                            |
 | update(name, overrideOptions) | `string`, `Object` | Changes already rendered notification content. In `overrideOptions`, the following fields are optional: `title`, `type`, `content`, `actions` |
 | has(name)                     | `string`           | Checks fora toast with the given name in the list of displayed toasts                                                                         |
 
diff --git a/src/components/Toaster/ToasterSingleton.tsx b/src/components/Toaster/ToasterSingleton.tsx
index 15096e70c5..f332afebc1 100644
--- a/src/components/Toaster/ToasterSingleton.tsx
+++ b/src/components/Toaster/ToasterSingleton.tsx
@@ -1,19 +1,11 @@
 'use client';
 
-import React from 'react';
-
-import get from 'lodash/get';
-import ReactDOM from 'react-dom';
-
-import {block} from '../utils/cn';
-
-import {ToasterProvider} from './Provider/ToasterProvider';
-import {ToasterComponent} from './ToasterComponent/ToasterComponent';
-import type {ToastProps, ToasterArgs, ToasterPublicMethods} from './types';
+import type {InternalToastProps, ToastProps} from './types';
+import {getToastIndex} from './utilities/getToastIndex';
+import {hasToast} from './utilities/hasToast';
+import {removeToast} from './utilities/removeToast';
 
 const TOASTER_KEY: unique symbol = Symbol('Toaster instance key');
-const bToaster = block('toaster');
-let ReactDOMClient: any;
 
 declare global {
     interface Window {
@@ -22,95 +14,86 @@ declare global {
 }
 
 export class ToasterSingleton {
-    static injectReactDOMClient(client: any) {
-        ReactDOMClient = client;
-    }
+    private toasts: InternalToastProps[] = [];
+    private listeners: ((toasts: InternalToastProps[]) => void)[] = [];
 
-    private rootNode!: HTMLDivElement;
-    private reactRoot!: any;
-    private className = '';
-    private mobile = false;
-    private componentAPI: null | ToasterPublicMethods = null;
+    constructor() {
+        if (window[TOASTER_KEY] instanceof ToasterSingleton) {
+            return window[TOASTER_KEY];
+        }
 
-    constructor(args?: ToasterArgs) {
-        const className = get(args, ['className'], '');
-        const mobile = get(args, ['mobile'], false);
+        window[TOASTER_KEY] = this;
+    }
 
-        if (window[TOASTER_KEY] instanceof ToasterSingleton) {
-            const me = window[TOASTER_KEY];
-            me.className = className;
-            me.mobile = mobile;
-            me.setRootNodeClassName();
-            return me;
+    add(toast: ToastProps) {
+        let nextToasts = this.toasts;
+
+        if (hasToast(nextToasts, toast.name)) {
+            nextToasts = removeToast(nextToasts, toast.name);
         }
 
-        this.className = className;
-        this.mobile = mobile;
-        this.createRootNode();
-        this.createReactRoot();
-        this.render();
+        this.toasts = [
+            ...nextToasts,
+            {
+                ...toast,
+                addedAt: Date.now(),
+                ref: {current: null},
+            },
+        ];
 
-        window[TOASTER_KEY] = this;
+        this.notify();
     }
 
-    destroy() {
-        // eslint-disable-next-line react/no-deprecated
-        ReactDOM.unmountComponentAtNode(this.rootNode);
-        document.body.removeChild(this.rootNode);
+    remove(name: string) {
+        this.toasts = removeToast(this.toasts, name);
+
+        this.notify();
     }
 
-    add = (options: ToastProps) => {
-        this.componentAPI?.add(options);
-    };
+    removeAll() {
+        this.toasts = [];
 
-    remove = (name: string) => {
-        this.componentAPI?.remove(name);
-    };
+        this.notify();
+    }
 
-    removeAll = () => {
-        this.componentAPI?.removeAll();
-    };
+    update(name: string, overrideOptions: Partial<ToastProps>) {
+        if (!hasToast(this.toasts, name)) {
+            return;
+        }
 
-    update = (name: string, overrideOptions: Partial<ToastProps>) => {
-        this.componentAPI?.update(name, overrideOptions);
-    };
+        const index = getToastIndex(this.toasts, name);
 
-    has = (name: string) => {
-        return this.componentAPI?.has(name) ?? false;
-    };
+        this.toasts = [
+            ...this.toasts.slice(0, index),
+            {
+                ...this.toasts[index],
+                ...overrideOptions,
+            },
+            ...this.toasts.slice(index + 1),
+        ];
 
-    private createRootNode() {
-        this.rootNode = document.createElement('div');
-        this.setRootNodeClassName();
-        document.body.appendChild(this.rootNode);
+        this.notify();
     }
 
-    private createReactRoot() {
-        if (ReactDOMClient) {
-            this.reactRoot = ReactDOMClient.createRoot(this.rootNode);
-        }
+    has(name: string) {
+        return hasToast(this.toasts, name);
     }
 
-    private render() {
-        const container = (
-            <ToasterProvider
-                ref={(api) => {
-                    this.componentAPI = api;
-                }}
-            >
-                <ToasterComponent hasPortal={false} mobile={this.mobile} />
-            </ToasterProvider>
-        );
-
-        if (this.reactRoot) {
-            this.reactRoot.render(container);
-        } else {
-            // eslint-disable-next-line react/no-deprecated
-            ReactDOM.render(container, this.rootNode, () => Promise.resolve());
+    subscribe(listener: (toasts: InternalToastProps[]) => void) {
+        if (typeof listener === 'function') {
+            this.listeners.push(listener);
         }
+
+        return () => {
+            this.listeners = this.listeners.filter(
+                (currentListener) => listener !== currentListener,
+            );
+        };
     }
 
-    private setRootNodeClassName() {
-        this.rootNode.className = bToaster({mobile: this.mobile}, this.className);
+    private notify() {
+        for (const listener of this.listeners) {
+            listener(this.toasts);
+        }
     }
 }
diff --git a/src/components/Toaster/__stories__/Toaster.stories.tsx b/src/components/Toaster/__stories__/Toaster.stories.tsx
index 6ab0d4f961..eea7fede6c 100644
--- a/src/components/Toaster/__stories__/Toaster.stories.tsx
+++ b/src/components/Toaster/__stories__/Toaster.stories.tsx
@@ -8,6 +8,7 @@ import {BUTTON_VIEWS} from '../../Button/constants';
 import {ToasterProvider} from '../Provider/ToasterProvider';
 import {Toast} from '../Toast/Toast';
 import {ToasterComponent} from '../ToasterComponent/ToasterComponent';
+import {ToasterSingleton} from '../ToasterSingleton';
 import {TOAST_THEMES} from '../constants';
 import {useToaster} from '../hooks/useToaster';
 import type {ToastAction} from '../types';
@@ -53,13 +54,15 @@ function booleanControl(label: string) {
     };
 }
 
+const toasterInstance = new ToasterSingleton();
+
 export default {
     title: 'Components/Feedback/Toaster',
     component: Toast,
     decorators: [
         function withToasters(Story) {
             return (
-                <ToasterProvider>
+                <ToasterProvider toaster={toasterInstance}>
                     <Story />
                 </ToasterProvider>
             );
diff --git a/src/components/Toaster/__stories__/ToasterShowcase.tsx b/src/components/Toaster/__stories__/ToasterShowcase.tsx
index 8f166a51a3..2fc921bc3a 100644
--- a/src/components/Toaster/__stories__/ToasterShowcase.tsx
+++ b/src/components/Toaster/__stories__/ToasterShowcase.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {faker} from '@faker-js/faker/locale/en';
 import {CircleCheck, CircleInfo, Thunderbolt, TriangleExclamation} from '@gravity-ui/icons';
 
-import {ToasterComponent, useToaster} from '..';
+import {Toaster, ToasterComponent, useToaster} from '..';
 import type {ToastAction, ToastProps} from '..';
 import {Button} from '../../Button';
 import type {ButtonView} from '../../Button';
@@ -14,6 +14,8 @@ import './ToasterShowcase.scss';
 
 const b = cn('toaster-showcase');
 
+export const toasterInstance = new Toaster();
+
 const CONTENT = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, atque!';
 
 const ACTIONS = [
@@ -371,6 +373,22 @@ export const ToasterDemo = ({
         </Button>
     );
 
+    const singletonToasterBtn = (
+        <Button
+            size="l"
+            onClick={() => {
+                toasterInstance.add({
+                    title: 'Singleton Toast',
+                    content: 'I am separate toast, which can be added outside of react!',
+                    name: 'uniqueName' + Math.random().toString(),
+                });
+            }}
+            style={btnStyle}
+        >
+            Add toast via Toaster API
+        </Button>
+    );
+
     const component = React.useMemo(() => <ToasterComponent />, []);
 
     return (
@@ -385,6 +403,7 @@ export const ToasterDemo = ({
             <p>{toastWithLongContent}</p>
             <p>{dynamicallyUpdatingToast}</p>
             <p>{overrideToastBtn}</p>
+            <p>{singletonToasterBtn}</p>
             <p>{clearBtn}</p>
 
             {component}
diff --git a/src/components/Toaster/__tests__/ToasterProvider.test.tsx b/src/components/Toaster/__tests__/ToasterProvider.test.tsx
index 78494ae8e2..30280e99f6 100644
--- a/src/components/Toaster/__tests__/ToasterProvider.test.tsx
+++ b/src/components/Toaster/__tests__/ToasterProvider.test.tsx
@@ -7,38 +7,20 @@ import {ToasterComponent} from '../ToasterComponent/ToasterComponent';
 import {fireAnimationEndEvent} from '../__mocks__/fireAnimationEndEvent';
 import {getToast} from '../__mocks__/getToast';
 import {tick} from '../__mocks__/tick';
-import {useToaster} from '../hooks/useToaster';
-import type {ToasterPublicMethods} from '../types';
+import {Toaster} from '../index';
 
-function ToastAPI({onMount}: {onMount: (api: ToasterPublicMethods) => void}) {
-    const toaster = useToaster();
-
-    React.useEffect(() => {
-        onMount(toaster);
-    }, []);
-
-    return null;
-}
+const toasterInstance = new Toaster();
 
 function setup() {
-    let providerAPI: undefined | ToasterPublicMethods;
-
     render(
-        <ToasterProvider>
-            <ToastAPI
-                onMount={(api) => {
-                    providerAPI = api;
-                }}
-            />
+        <ToasterProvider toaster={toasterInstance}>
             <ToasterComponent />
         </ToasterProvider>,
     );
 
-    if (!providerAPI) {
+    if (!toasterInstance) {
         throw new Error('Failed to setup test');
     }
-
-    return providerAPI;
 }
 
 const toastTimeout = 1000;
@@ -54,10 +36,10 @@ describe('api.add', () => {
     // We test that after adding toast the next add will remove
     // previous toast from DOM and add it again
     it('should override already added toast', async function () {
-        const providerAPI = setup();
+        setup();
 
         act(() => {
-            providerAPI.add(toastProps);
+            toasterInstance.add(toastProps);
         });
 
         let toast = getToast();
@@ -67,7 +49,7 @@ describe('api.add', () => {
         jest.advanceTimersByTime(1);
 
         act(() => {
-            providerAPI.add(toastProps);
+            toasterInstance.add(toastProps);
         });
         fireAnimationEndEvent(toast, 'toast-hide-end');
 
@@ -81,10 +63,10 @@ describe('api.add', () => {
 
 describe('api.remove', () => {
     it('should remove toast', function () {
-        const providerAPI = setup();
+        setup();
 
         act(() => {
-            providerAPI.add({
+            toasterInstance.add({
                 ...toastProps,
                 autoHiding: toastTimeout,
             });
@@ -94,7 +76,7 @@ describe('api.remove', () => {
         expect(toast).toBeInTheDocument();
 
         act(() => {
-            providerAPI.remove(toastProps.name);
+            toasterInstance.remove(toastProps.name);
         });
         tick(toast, 0);
 
@@ -104,10 +86,10 @@ describe('api.remove', () => {
 });
 
 it('should remove toast after timeout', function () {
-    const providerAPI = setup();
+    setup();
 
     act(() => {
-        providerAPI.add({
+        toasterInstance.add({
             ...toastProps,
             autoHiding: toastTimeout,
         });
@@ -132,10 +114,10 @@ it('should remove toast after timeout', function () {
 });
 
 it('should preserve toast on hover', function () {
-    const providerAPI = setup();
+    setup();
 
     act(() => {
-        providerAPI.add({
+        toasterInstance.add({
             ...toastProps,
             autoHiding: toastTimeout,
         });
@@ -170,10 +152,10 @@ it('should preserve toast on hover', function () {
 
 describe('api.update', () => {
     it('should update toast', function () {
-        const providerAPI = setup();
+        setup();
 
         act(() => {
-            providerAPI.add({
+            toasterInstance.add({
                 ...toastProps,
                 autoHiding: toastTimeout,
             });
@@ -185,7 +167,7 @@ describe('api.update', () => {
         expect(screen.queryByRole('button', {name: 'Toast Button'})).not.toBeInTheDocument();
 
         act(() => {
-            providerAPI.update(toastProps.name, {
+            toasterInstance.update(toastProps.name, {
                 content: 'Test Content of the toast',
                 actions: [
                     {
@@ -202,10 +184,10 @@ describe('api.update', () => {
     });
 
     it('should bypass update of unexisted toasts', function () {
-        const providerAPI = setup();
+        setup();
 
         act(() => {
-            providerAPI.add({
+            toasterInstance.add({
                 ...toastProps,
                 autoHiding: toastTimeout,
             });
@@ -214,7 +196,7 @@ describe('api.update', () => {
         const toast = getToast();
 
         act(() => {
-            providerAPI.update(`unexisted ${toastProps.name}`, {
+            toasterInstance.update(`unexisted ${toastProps.name}`, {
                 content: 'Test Content of the toast',
                 actions: [
                     {
@@ -231,11 +213,11 @@ describe('api.update', () => {
 
 describe('api.removeAll', () => {
     it('should remove all toasts', function () {
-        const providerAPI = setup();
+        setup();
 
         act(() => {
-            providerAPI.add(toastProps);
-            providerAPI.add({
+            toasterInstance.add(toastProps);
+            toasterInstance.add({
                 ...toastProps,
                 name: `${toastProps.name}2`,
                 title: `${toastProps.title}2`,
@@ -249,7 +231,7 @@ describe('api.removeAll', () => {
         expect(toast2).toBeInTheDocument();
 
         act(() => {
-            providerAPI.removeAll();
+            toasterInstance.removeAll();
         });
 
         [toast1, toast2].forEach((toast) => fireAnimationEndEvent(toast, 'toast-hide-end'));
@@ -261,45 +243,45 @@ describe('api.removeAll', () => {
 
 describe('api.has', () => {
     it('should return false when toast is not added', () => {
-        const providerAPI = setup();
-        expect(providerAPI.has('unexisted toasts')).toBe(false);
+        setup();
+        expect(toasterInstance.has('unexisted toasts')).toBe(false);
     });
 
     it('should return false when toast is removed by code', () => {
-        const providerAPI = setup();
+        setup();
 
         act(() => {
-            providerAPI.add({
+            toasterInstance.add({
                 ...toastProps,
                 autoHiding: toastTimeout,
             });
         });
 
-        expect(providerAPI.has(toastProps.name)).toBe(true);
+        expect(toasterInstance.has(toastProps.name)).toBe(true);
 
         act(() => {
-            providerAPI.remove(toastProps.name);
+            toasterInstance.remove(toastProps.name);
         });
 
-        expect(providerAPI.has(toastProps.name)).toBe(false);
+        expect(toasterInstance.has(toastProps.name)).toBe(false);
     });
 
     it('should return false when toast is removed by timer', () => {
-        const providerAPI = setup();
+        setup();
 
         act(() => {
-            providerAPI.add({
+            toasterInstance.add({
                 ...toastProps,
                 autoHiding: toastTimeout,
             });
         });
 
-        expect(providerAPI.has(toastProps.name)).toBe(true);
+        expect(toasterInstance.has(toastProps.name)).toBe(true);
 
         act(() => {
             jest.advanceTimersByTime(toastTimeout);
         });
-        expect(providerAPI.has(toastProps.name)).toBe(false);
+        expect(toasterInstance.has(toastProps.name)).toBe(false);
     });
 });
 
@@ -322,16 +304,10 @@ describe('modal remains open after toaster close', () => {
     };
 
     function setup() {
-        let providerAPI: undefined | ToasterPublicMethods;
         let openModal: undefined | (() => void);
 
         render(
-            <ToasterProvider>
-                <ToastAPI
-                    onMount={(api) => {
-                        providerAPI = api;
-                    }}
-                />
+            <ToasterProvider toaster={toasterInstance}>
                 <ModalAPI
                     onMount={(_openModal) => {
                         openModal = _openModal;
@@ -341,15 +317,15 @@ describe('modal remains open after toaster close', () => {
             </ToasterProvider>,
         );
 
-        if (!providerAPI || !openModal) {
+        if (!toasterInstance || !openModal) {
             throw new Error('Failed to setup test');
         }
 
-        return {providerAPI, openModal};
+        return {openModal};
     }
 
     it('Toaster was opened after Modal', async () => {
-        const {providerAPI, openModal} = setup();
+        const {openModal} = setup();
 
         act(openModal);
 
@@ -357,7 +333,7 @@ describe('modal remains open after toaster close', () => {
         expect(modal).toBeInTheDocument();
 
         act(() => {
-            providerAPI.add({...toastProps, isClosable: true});
+            toasterInstance.add({...toastProps, isClosable: true});
         });
 
         const toast = getToast();
@@ -380,10 +356,10 @@ describe('modal remains open after toaster close', () => {
     });
 
     it('Toaster was opened before Modal', async () => {
-        const {providerAPI, openModal} = setup();
+        const {openModal} = setup();
 
         act(() => {
-            providerAPI.add({...toastProps, isClosable: true});
+            toasterInstance.add({...toastProps, isClosable: true});
         });
 
         const toast = getToast();
@@ -411,12 +387,12 @@ describe('modal remains open after toaster close', () => {
     });
 
     it('Toaster calls onClose callback when close icon is clicked', async () => {
-        const {providerAPI} = setup();
+        setup();
 
         const mockOnCloseFn = jest.fn();
 
         act(() => {
-            providerAPI.add({...toastProps, isClosable: true, onClose: mockOnCloseFn});
+            toasterInstance.add({...toastProps, isClosable: true, onClose: mockOnCloseFn});
         });
 
         const toast = getToast();
diff --git a/src/components/Toaster/hooks/useToaster.ts b/src/components/Toaster/hooks/useToaster.ts
index 4d069aaa79..527a4ec101 100644
--- a/src/components/Toaster/hooks/useToaster.ts
+++ b/src/components/Toaster/hooks/useToaster.ts
@@ -10,5 +10,14 @@ export function useToaster(): ToasterPublicMethods {
         throw new Error('Toaster: `useToaster` hook is used out of context');
     }
 
-    return React.useMemo(() => toaster, [toaster]);
+    return React.useMemo(
+        () => ({
+            add: toaster.add.bind(toaster),
+            remove: toaster.remove.bind(toaster),
+            removeAll: toaster.removeAll.bind(toaster),
+            update: toaster.update.bind(toaster),
+            has: toaster.has.bind(toaster),
+        }),
+        [toaster],
+    );
 }
diff --git a/src/toaster-singleton-react-18.ts b/src/toaster-singleton-react-18.ts
deleted file mode 100644
index 983f3594af..0000000000
--- a/src/toaster-singleton-react-18.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import ReactDOMClient from 'react-dom/client';
-
-import {ToasterSingleton} from './components/Toaster/ToasterSingleton';
-
-ToasterSingleton.injectReactDOMClient(ReactDOMClient);
-
-// in SSR case
-export const toaster =
-    typeof window === 'object' ? new ToasterSingleton() : ({} as ToasterSingleton);