fix(Toc): correctly display content of no items.length and add event …

…forward
gravity-ui · Nov 7, 2024 · 72e3783 · 72e3783
1 parent 75be05e
commit 72e3783
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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);
     });
 });