Merge branch 'main' into release-please--branches--main--components--navigation

Author: Lunory

src/components/AllPagesPanel/AllPagesListItem/AllPagesListItem.scss

@@ -12,6 +12,8 @@
     padding: 0 var(--g-spacing-6);
     column-gap: var(--g-spacing-4);
 
+    cursor: pointer;
+
     &__text {
         flex: 1;
         text-align: initial;

src/components/AllPagesPanel/AllPagesListItem/AllPagesListItem.tsx

@@ -1,9 +1,9 @@
-import React, {MouseEvent, useCallback} from 'react';
+import React, {MouseEvent, useCallback, useRef} from 'react';
 
 import {Pin, PinFill} from '@gravity-ui/icons';
 import {Button, Icon} from '@gravity-ui/uikit';
 
-import {MenuItem} from '../../types';
+import {MakeItemParams, MenuItem} from '../../types';
 import {block} from '../../utils/cn';
 
 import './AllPagesListItem.scss';
@@ -21,6 +21,8 @@ interface AllPagesListItemProps {
 
 export const AllPagesListItem: React.FC<AllPagesListItemProps> = (props) => {
     const {item, editMode, onToggle} = props;
+    const ref = useRef<HTMLAnchorElement & HTMLButtonElement>(null);
+
     const onPinButtonClick = useCallback(
         (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
             e.stopPropagation();
@@ -39,20 +41,36 @@ export const AllPagesListItem: React.FC<AllPagesListItemProps> = (props) => {
 
     const [Tag, tagProps] = item.link ? ['a' as const, {href: item.link}] : ['button' as const, {}];
 
-    return (
-        <Tag {...tagProps} className={b()} onClick={onItemClick}>
-            {item.icon ? (
-                <Icon className={b('icon')} data={item.icon} size={item.iconSize} />
-            ) : null}
-            <span className={b('text')}>{item.title}</span>
-            {editMode && !item.preventUserRemoving && (
-                <Button
-                    onClick={onPinButtonClick}
-                    view={item.hidden ? 'flat-secondary' : 'flat-action'}
-                >
-                    <Button.Icon>{item.hidden ? <Pin /> : <PinFill />}</Button.Icon>
-                </Button>
-            )}
-        </Tag>
+    const makeNode = useCallback(
+        (params: MakeItemParams) => {
+            return (
+                <Tag {...tagProps} className={b()} onClick={onItemClick} ref={ref}>
+                    {params.icon}
+                    <span className={b('text')}>{params.title}</span>
+                    {editMode && !item.preventUserRemoving && (
+                        <Button
+                            onClick={onPinButtonClick}
+                            view={item.hidden ? 'flat-secondary' : 'flat-action'}
+                        >
+                            <Button.Icon>{item.hidden ? <Pin /> : <PinFill />}</Button.Icon>
+                        </Button>
+                    )}
+                </Tag>
+            );
+        },
+        [Tag, tagProps, onItemClick, editMode, item, onPinButtonClick],
     );
+
+    const iconNode = item.icon ? (
+        <Icon className={b('icon')} data={item.icon} size={item.iconSize} />
+    ) : null;
+    const titleNode = item.title;
+    const params: MakeItemParams = {icon: iconNode, title: titleNode};
+    const opts = {collapsed: false, compact: false, item, ref};
+
+    if (typeof item.itemWrapper === 'function') {
+        return item.itemWrapper(params, makeNode, opts) as React.ReactElement;
+    }
+
+    return makeNode(params);
 };

src/components/AllPagesPanel/AllPagesPanel.tsx

@@ -48,10 +48,17 @@ export const AllPagesPanel: React.FC<AllPagesPanelProps> = (props) => {
         }
     }, [isEditMode, onEditModeChanged, editMenuProps]);
 
-    const onItemClick = useCallback((item: ListItemData<MenuItem>) => {
-        //@ts-ignore TODO fix when @gravity-ui/uikit/List will provide event arg on item click
-        item.onItemClick?.(item, false);
-    }, []);
+    const onItemClick = useCallback(
+        (
+            item: ListItemData<MenuItem>,
+            _index: number,
+            _fromKeyboard?: boolean,
+            event?: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLElement>,
+        ) => {
+            item.onItemClick?.(item, false, event as React.MouseEvent<HTMLDivElement, MouseEvent>);
+        },
+        [],
+    );
 
     const togglePageVisibility = useCallback(
         (item: MenuItem) => {