From 72e3783b62b8d6de112f9f222c2ce5b759012a69 Mon Sep 17 00:00:00 2001
From: Sofiya Pavlenko <sofiushko@yandex-team.ru>
Date: Thu, 7 Nov 2024 16:38:46 +0300
Subject: [PATCH] fix(Toc): correctly display content of no items.length and
 add event forward

---
 src/components/Toc/Toc.tsx                |  4 ++--
 src/components/Toc/TocItem/TocItem.tsx    | 17 ++++++++++-------
 src/components/Toc/__tests__/Toc.test.tsx | 10 +++++-----
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/Toc/Toc.tsx b/src/components/Toc/Toc.tsx
index a29575dbe1..b96ab6ec1b 100644
--- a/src/components/Toc/Toc.tsx
+++ b/src/components/Toc/Toc.tsx
@@ -14,7 +14,7 @@ export interface TocProps extends QAProps {
     className?: string;
     items: TocItemType[];
     value?: string;
-    onUpdate?: (value: string) => void;
+    onUpdate?: (value: string, event?: React.MouseEvent) => void;
 }
 
 export const Toc = React.forwardRef<HTMLElement, TocProps>(function Toc(props, ref) {
@@ -32,7 +32,7 @@ export const Toc = React.forwardRef<HTMLElement, TocProps>(function Toc(props, r
                             active={activeValue === value}
                             onClick={onUpdate}
                         />
-                        {childrenItems?.length && (
+                        {childrenItems && childrenItems.length > 0 && (
                             <ul className={b('subsections')}>
                                 {childrenItems?.map(
                                     ({
diff --git a/src/components/Toc/TocItem/TocItem.tsx b/src/components/Toc/TocItem/TocItem.tsx
index d67c0cf3df..ee5275c91d 100644
--- a/src/components/Toc/TocItem/TocItem.tsx
+++ b/src/components/Toc/TocItem/TocItem.tsx
@@ -13,19 +13,22 @@ const b = block('toc-item');
 export interface TocItemProps extends TocItemType {
     childItem?: boolean;
     active?: boolean;
-    onClick?: (value: string) => void;
+    onClick?: (value: string, 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;
-        }
+    const handleClick = React.useCallback(
+        (event: React.MouseEvent) => {
+            if (value === undefined || !onClick) {
+                return;
+            }
 
-        onClick(value);
-    }, [onClick, value]);
+            onClick(value, event);
+        },
+        [onClick, 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..f846272b84 100644
--- a/src/components/Toc/__tests__/Toc.test.tsx
+++ b/src/components/Toc/__tests__/Toc.test.tsx
@@ -58,7 +58,7 @@ describe('Toc', () => {
         const nextItem = screen.getByText(nextTitle);
         await user.click(nextItem);
 
-        expect(onUpdateFn).toBeCalledWith(nextValue);
+        expect(onUpdateFn).toHaveBeenCalledWith(nextValue, expect.objectContaining({}));
     });
 
     test('calls onUpdate with correct item with link', async () => {
@@ -71,7 +71,7 @@ describe('Toc', () => {
         const nextItem = screen.getByText(nextTitle);
         await user.click(nextItem);
 
-        expect(onUpdateFn).toBeCalledWith(nextValue);
+        expect(onUpdateFn).toBeCalledWith(nextValue, expect.objectContaining({}));
     });
 
     test('accessible for keyboard', async () => {
@@ -86,7 +86,7 @@ describe('Toc', () => {
         await user.tab();
         await user.keyboard('{Enter}');
 
-        expect(onUpdateFn).toBeCalledWith(secondValue);
+        expect(onUpdateFn).toHaveBeenCalledWith(secondValue, expect.objectContaining({}));
     });
 
     test('accessible for keyboard with links', async () => {
@@ -101,7 +101,7 @@ describe('Toc', () => {
         await user.tab();
         await user.keyboard('{Enter}');
 
-        expect(onUpdateFn).toBeCalledWith(secondValue);
+        expect(onUpdateFn).toHaveBeenCalledWith(secondValue, expect.objectContaining({}));
     });
 
     test('add className', () => {
@@ -148,6 +148,6 @@ describe('Toc', () => {
 
         const currentItem = screen.getByRole('listitem', {current: true});
 
-        expect(currentItem.textContent).toContain(content);
+        expect(currentItem.textContent).toBe(content);
     });
 });