From d7dd3164efeaa95178c16c701cf2c63ac4e5d05b Mon Sep 17 00:00:00 2001
From: Mikhail Lukin <mishalykin@mail.ru>
Date: Tue, 3 Dec 2024 15:56:20 +0700
Subject: [PATCH 1/2] fix(tabs): fix bottom line calculation

---
 .changeset/tender-tips-leave.md               |  5 ++++
 .../components/primary-tablist/Component.tsx  | 10 ++++++-
 .../src/components/tabs/Component.test.tsx    |  6 ++++
 .../tabs/src/components/title/Component.tsx   | 29 +++++++++++++++++--
 packages/tabs/src/hooks/use-tabs.test.tsx     |  6 ++++
 5 files changed, 53 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/tender-tips-leave.md

diff --git a/.changeset/tender-tips-leave.md b/.changeset/tender-tips-leave.md
new file mode 100644
index 0000000000..2fd21eecb3
--- /dev/null
+++ b/.changeset/tender-tips-leave.md
@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-tabs': patch
+---
+
+Исправлен расчет положения нижней линии таба
diff --git a/packages/tabs/src/components/primary-tablist/Component.tsx b/packages/tabs/src/components/primary-tablist/Component.tsx
index e52948d7ff..244421c47c 100644
--- a/packages/tabs/src/components/primary-tablist/Component.tsx
+++ b/packages/tabs/src/components/primary-tablist/Component.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';
 import cn from 'classnames';
 
@@ -55,6 +55,13 @@ export const PrimaryTabList = ({
         return fnUtils.noop;
     }, [selectedTab]);
 
+    const handleTitleResize = useCallback(() => {
+        if (selectedTab && lineRef.current) {
+            lineRef.current.style.width = `${selectedTab.offsetWidth}px`;
+            lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;
+        }
+    }, [selectedTab]);
+
     const renderContent = () => (
         <div
             role='tablist'
@@ -73,6 +80,7 @@ export const PrimaryTabList = ({
                             styles={styles}
                             showSkeleton={showSkeleton}
                             skeletonProps={skeletonProps}
+                            onResize={handleTitleResize}
                         />
                     )}
                 </KeyboardFocusable>
diff --git a/packages/tabs/src/components/tabs/Component.test.tsx b/packages/tabs/src/components/tabs/Component.test.tsx
index ab4d3bf6c6..62957d792c 100644
--- a/packages/tabs/src/components/tabs/Component.test.tsx
+++ b/packages/tabs/src/components/tabs/Component.test.tsx
@@ -21,6 +21,12 @@ Object.defineProperty(window, 'matchMedia', {
     }),
 });
 
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+
 const tabVariants: Array<
     [typeof TabsMobile | typeof TabsDesktop | typeof TabsResponsive, TabsProps['view']]
 > = [
diff --git a/packages/tabs/src/components/title/Component.tsx b/packages/tabs/src/components/title/Component.tsx
index 2cfafe1206..2a06862b1a 100644
--- a/packages/tabs/src/components/title/Component.tsx
+++ b/packages/tabs/src/components/title/Component.tsx
@@ -1,7 +1,8 @@
-import React, { ButtonHTMLAttributes, forwardRef } from 'react';
+import React, { ButtonHTMLAttributes, forwardRef, useEffect, useRef } from 'react';
 import cn from 'classnames';
 
 import { Skeleton, SkeletonProps } from '@alfalab/core-components-skeleton';
+import mergeRefs from 'react-merge-refs';
 
 import { Styles, TabListTitle } from '../../typings';
 
@@ -12,6 +13,7 @@ type Props = TabListTitle &
         isOption?: boolean;
         showSkeleton?: boolean;
         skeletonProps?: Omit<SkeletonProps, 'visible'>;
+        onResize?: () => void;
     };
 
 export const Title = forwardRef<HTMLButtonElement, Props>(
@@ -30,19 +32,42 @@ export const Title = forwardRef<HTMLButtonElement, Props>(
             isOption = false,
             showSkeleton = false,
             skeletonProps,
+            onResize,
             ...restProps
         },
         ref,
     ) => {
+        const buttonRef = useRef<HTMLButtonElement | null>(null);
+
         const titleClassName = {
             [styles.content]: true,
             [styles.focused]: focused,
         };
 
+        useEffect(() => {
+            const resizeObserver = new ResizeObserver(() => {
+                if (onResize) {
+                    onResize();
+                }
+            });
+
+            const button = buttonRef.current;
+
+            if (button) {
+                resizeObserver.observe(button);
+            }
+
+            return () => {
+                if (button) {
+                    resizeObserver.unobserve(button);
+                }
+            };
+        }, [onResize]);
+
         return hidden ? null : (
             <button
                 {...restProps}
-                ref={ref}
+                ref={mergeRefs([ref, buttonRef])}
                 disabled={disabled || showSkeleton}
                 type='button'
                 id={String(id)}
diff --git a/packages/tabs/src/hooks/use-tabs.test.tsx b/packages/tabs/src/hooks/use-tabs.test.tsx
index 63a3097a9e..407b726e38 100644
--- a/packages/tabs/src/hooks/use-tabs.test.tsx
+++ b/packages/tabs/src/hooks/use-tabs.test.tsx
@@ -5,6 +5,12 @@ import userEvent from '@testing-library/user-event';
 import { TabsDesktop } from '../desktop';
 import { Tab } from '../components/tab';
 
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+
 const renderTabs = async (props = { selectedId: 'tab-1' }) => {
     const renderResult = render(
         <TabsDesktop {...props}>

From c967439e454131d7e3607bacb7ee69b582669546 Mon Sep 17 00:00:00 2001
From: Mikhail Lukin <mishalykin@mail.ru>
Date: Tue, 3 Dec 2024 18:46:22 +0700
Subject: [PATCH 2/2] fix(tabs): fix lint

---
 packages/tabs/src/components/title/Component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/tabs/src/components/title/Component.tsx b/packages/tabs/src/components/title/Component.tsx
index 2a06862b1a..4b6d2d5603 100644
--- a/packages/tabs/src/components/title/Component.tsx
+++ b/packages/tabs/src/components/title/Component.tsx
@@ -1,8 +1,8 @@
 import React, { ButtonHTMLAttributes, forwardRef, useEffect, useRef } from 'react';
+import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
 import { Skeleton, SkeletonProps } from '@alfalab/core-components-skeleton';
-import mergeRefs from 'react-merge-refs';
 
 import { Styles, TabListTitle } from '../../typings';