feat(AsideHeader): preventUserRemoving prop for menu item and callbacks for AsideHeader

src/components/AllPagesPanel/AllPagesListItem/AllPagesListItem.tsx

@@ -39,7 +39,7 @@ export const AllPagesListItem: React.FC<AllPagesListItemProps> = (props) => {
                 <Icon className={b('icon')} data={item.icon} size={item.iconSize} />
             ) : null}
             <span className={b('text')}>{item.title}</span>
-            {editMode && (
+            {editMode && !item.preventUserRemoving && (
                 <Button
                     onClick={onPinButtonClick}
                     view={item.hidden ? 'flat-secondary' : 'flat-action'}

src/components/AllPagesPanel/AllPagesPanel.tsx

@@ -24,7 +24,14 @@
 
 export const AllPagesPanel: React.FC<AllPagesPanelProps> = (props) => {
     const {startEditIcon, onEditModeChanged, className} = props;
-    const {menuItems, onMenuItemsChanged} = useAsideHeaderInnerContext();
+    const {
+        menuItems,
+        onMenuItemsChanged,
+        onOpenEditMode,
+        onResetSettingsToDefault,
+        onToggleMenuItem,
+    } = useAsideHeaderInnerContext();
+
     const menuItemsRef = useRef(menuItems);
     menuItemsRef.current = menuItems;
 
@@ -37,7 +44,11 @@
 
     useEffect(() => {
         onEditModeChanged?.(isEditMode);
-    }, [isEditMode, onEditModeChanged]);
+
+        if (isEditMode) {
+            onOpenEditMode?.();
+        }
+    }, [isEditMode, onEditModeChanged, onOpenEditMode]);
 
     const onItemClick = useCallback((item: ListItemData<MenuItem>) => {
         //@ts-ignore TODO fix when @gravity-ui/uikit/List will provide event arg on item click
@@ -54,6 +65,7 @@
             const originItems = menuItemsRef.current.filter(
                 (menuItem) => menuItem.id !== ALL_PAGES_ID,
             );
+            onToggleMenuItem?.(changedItem);
             onMenuItemsChanged(
                 originItems.map((menuItem) => {
                     if (menuItem.id !== changedItem.id) {
@@ -63,7 +75,7 @@
                 }),
             );
         },
-        [onMenuItemsChanged],
+        [onMenuItemsChanged, onToggleMenuItem],
     );
 
     const itemRender = useCallback(
@@ -81,6 +93,7 @@
         if (!onMenuItemsChanged) {
             return;
         }
+        onResetSettingsToDefault?.();
         const originItems = menuItemsRef.current.filter((item) => item.id !== ALL_PAGES_ID);
         onMenuItemsChanged(
             originItems.map((item) => ({
@@ -88,7 +101,7 @@
                 hidden: false,
             })),
         );
     }, [onMenuItemsChanged]);
     return (
         <Flex className={b(null, className)} gap="5" direction="column">
             <Flex gap="4" alignItems="center" justifyContent="space-between">

src/components/AsideHeader/types.tsx

@@ -37,6 +37,9 @@ export interface AsideHeaderGeneralProps extends QAProps {
     }) => React.ReactNode;
     onClosePanel?: () => void;
     onChangeCompact?: (compact: boolean) => void;
+    onOpenEditMode?: () => void;
+    onToggleMenuItem?: (changedItem: MenuItem) => void;
+    onResetSettingsToDefault?: () => void;
     openModalSubscriber?: (subscriber: OpenModalSubscriber) => void;
 }
 

src/components/types.ts

@@ -39,6 +39,7 @@ export interface MenuItem extends QAProps {
             ref: React.RefObject<HTMLElement>;
         },
     ) => React.ReactNode;
+    preventUserRemoving?: boolean;
     rightAdornment?: React.ReactNode;
     type?: MenuItemType;
     afterMoreButton?: boolean;