@gravity-ui/navigation 6.0.0-beta.0 → 6.0.0-beta.2

package/build/esm/components/AsideHeader/components/AllPagesPanel/AllPagesPanel.js

@@ -4,8 +4,11 @@ import { Gear } from '@gravity-ui/icons';
 import { Flex, Text, Tooltip, Button, Icon, List } from '@gravity-ui/uikit';
 import { createBlock } from '../../../utils/cn.js';
 import { useAsideHeaderInnerContext } from '../../AsideHeaderContext.js';
+import { buildCompositeBarRows } from '../CompositeBar/grouping.js';
 import { AllPagesListItem } from './AllPagesListItem/AllPagesListItem.js';
-import { ALL_PAGES_ID } from './constants.js';
+import { getCompositeBarHeaderGroupId, rowsToAllPagesDisplayItems, reorderMenuItemsByCompositeBarRows, getAllPagesEditModeFlatItems, ALL_PAGES_PANEL_ROW_BUILD_OPTIONS } from './allPagesEditDisplay.js';
+import { isAllPagesSortableItem, reorderAllPagesSortableItems } from './allPagesSortable.js';
+import { ALL_PAGES_ID } from '../../types.js';
 import i18n from './i18n/index.js';
 import { useGroupedMenuItems } from './useGroupedMenuItems.js';
 import styles from './AllPagesPanel.module.scss.js';
@@ -13,7 +16,7 @@ import styles from './AllPagesPanel.module.scss.js';
 const b = createBlock('all-pages-panel', styles);
 const AllPagesPanel = (props) => {
     const { startEditIcon, onEditModeChanged, className } = props;
-    const { menuItems, defaultMenuItems, onMenuItemsChanged, editMenuProps } = useAsideHeaderInnerContext();
+    const { menuItems, defaultMenuItems, onMenuItemsChanged, editMenuProps, menuGroups, onMenuGroupsChanged, } = useAsideHeaderInnerContext();
     const menuItemsRef = useRef(menuItems);
     menuItemsRef.current = menuItems;
     const [isEditMode, setIsEditMode] = useState(false);
@@ -21,7 +24,7 @@ const AllPagesPanel = (props) => {
     const toggleEditMode = useCallback(() => {
         setIsEditMode((prev) => !prev);
     }, []);
-    const groupedItems = useGroupedMenuItems(menuItems);
+    const groupedItems = useGroupedMenuItems(menuItems, isEditMode, menuGroups, onMenuGroupsChanged);
     useEffect(() => {
         var _a;
         onEditModeChanged === null || onEditModeChanged === undefined ? undefined : onEditModeChanged(isEditMode);
@@ -35,20 +38,31 @@ const AllPagesPanel = (props) => {
         (_a = item.onItemClick) === null || _a === undefined ? undefined : _a.call(item, item, false, event);
     }, []);
     const togglePageVisibility = useCallback((item) => {
-        var _a;
+        var _a, _b;
+        const groupIdFromHeader = getCompositeBarHeaderGroupId(item.id);
+        if (groupIdFromHeader && menuGroups && onMenuGroupsChanged) {
+            const previousGroup = menuGroups.find((g) => g.id === groupIdFromHeader);
+            if (!previousGroup) {
+                return;
+            }
+            const changedGroup = Object.assign(Object.assign({}, previousGroup), { hidden: !previousGroup.hidden });
+            (_a = editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.onToggleMenuGroup) === null || _a === undefined ? undefined : _a.call(editMenuProps, changedGroup);
+            onMenuGroupsChanged(menuGroups.map((g) => (g.id === groupIdFromHeader ? changedGroup : g)));
+            return;
+        }
         if (!onMenuItemsChanged) {
             return;
         }
         const changedItem = Object.assign(Object.assign({}, item), { hidden: !item.hidden });
         const originItems = menuItemsRef.current.filter((menuItem) => menuItem.id !== ALL_PAGES_ID);
-        (_a = editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.onToggleMenuItem) === null || _a === undefined ? undefined : _a.call(editMenuProps, changedItem);
+        (_b = editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.onToggleMenuItem) === null || _b === undefined ? undefined : _b.call(editMenuProps, changedItem);
         onMenuItemsChanged(originItems.map((menuItem) => {
             if (menuItem.id !== changedItem.id) {
                 return menuItem;
             }
             return changedItem;
         }));
-    }, [onMenuItemsChanged, editMenuProps]);
+    }, [onMenuItemsChanged, editMenuProps, menuGroups, onMenuGroupsChanged]);
     const onDragEnd = useCallback(() => {
         setDraggingItemTitle(null);
     }, [setDraggingItemTitle]);
@@ -71,16 +85,38 @@ const AllPagesPanel = (props) => {
     }, [onMenuItemsChanged, editMenuProps, defaultMenuItems]);
     const changeItemsOrder = useCallback(({ oldIndex, newIndex }) => {
         var _a;
-        const newItems = menuItemsRef.current.filter(({ id }) => id !== ALL_PAGES_ID);
-        const element = newItems.splice(oldIndex, 1)[0];
-        newItems.splice(newIndex, 0, element);
-        onMenuItemsChanged === null || onMenuItemsChanged === undefined ? undefined : onMenuItemsChanged(newItems.filter(({ type }) => type !== 'divider'));
+        const withoutAllPages = menuItemsRef.current.filter(({ id, type }) => id !== ALL_PAGES_ID && type !== 'divider');
+        let element;
+        let reordered;
+        if (menuGroups === null || menuGroups === undefined ? undefined : menuGroups.length) {
+            const rows = buildCompositeBarRows(withoutAllPages, menuGroups, ALL_PAGES_PANEL_ROW_BUILD_OPTIONS);
+            const display = rowsToAllPagesDisplayItems(rows, {
+                enableGroupHeaderPins: Boolean(onMenuGroupsChanged),
+            });
+            element = display[oldIndex];
+            reordered = reorderMenuItemsByCompositeBarRows(withoutAllPages, menuGroups, oldIndex, newIndex);
+        }
+        else {
+            const sortableBefore = withoutAllPages.filter(isAllPagesSortableItem);
+            element = sortableBefore[oldIndex];
+            reordered = reorderAllPagesSortableItems(withoutAllPages, oldIndex, newIndex);
+        }
+        onMenuItemsChanged === null || onMenuItemsChanged === undefined ? undefined : onMenuItemsChanged(reordered);
         setDraggingItemTitle(null);
-        (_a = editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.onChangeItemsOrder) === null || _a === undefined ? undefined : _a.call(editMenuProps, element, oldIndex, newIndex);
-    }, [onMenuItemsChanged, editMenuProps]);
+        if (element) {
+            (_a = editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.onChangeItemsOrder) === null || _a === undefined ? undefined : _a.call(editMenuProps, element, oldIndex, newIndex);
+        }
+    }, [onMenuItemsChanged, editMenuProps, menuGroups, onMenuGroupsChanged]);
     const sortableItems = useMemo(() => {
-        return menuItems.filter(({ id, afterMoreButton, type }) => id !== ALL_PAGES_ID && !afterMoreButton && type !== 'divider');
-    }, [menuItems]);
+        const without = menuItems.filter(({ id, type }) => id !== ALL_PAGES_ID && type !== 'divider');
+        const pinHeaders = Boolean(onMenuGroupsChanged);
+        if (menuGroups === null || menuGroups === undefined ? undefined : menuGroups.length) {
+            return getAllPagesEditModeFlatItems(without, menuGroups, {
+                enableGroupHeaderPins: pinHeaders,
+            });
+        }
+        return without.filter(isAllPagesSortableItem);
+    }, [menuItems, menuGroups, onMenuGroupsChanged]);
     return (React__default.createElement(Flex, { className: b(null, className), gap: "5", direction: "column" },
         React__default.createElement(Flex, { gap: "4", alignItems: "center", justifyContent: "space-between" },
             React__default.createElement(Text, { variant: "subheader-2" }, isEditMode ? i18n('all-panel.title.editing') : i18n('all-panel.title.main')),

package/build/esm/components/AsideHeader/components/AllPagesPanel/AllPagesPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"AllPagesPanel.js","sources":["../../../../../../../src/components/AsideHeader/components/AllPagesPanel/AllPagesPanel.tsx"],"sourcesContent":["import React, {ReactNode, useCallback, useEffect, useMemo, useRef, useState} from 'react';\n\nimport {Gear} from '@gravity-ui/icons';\nimport {Button, Flex, Icon, List, ListItemData, ListProps, Text, Tooltip} from '@gravity-ui/uikit';\n\nimport {createBlock} from '../../../utils/cn';\nimport {useAsideHeaderInnerContext} from '../../AsideHeaderContext';\nimport {AsideHeaderItem} from '../../types';\n\nimport {AllPagesListItem} from './AllPagesListItem';\nimport {ALL_PAGES_ID} from './constants';\nimport i18n from './i18n';\nimport {useGroupedMenuItems} from './useGroupedMenuItems';\n\nimport styles from './AllPagesPanel.module.scss';\n\nconst b = createBlock('all-pages-panel', styles);\n\ninterface AllPagesPanelProps {\n    className?: string;\n    startEditIcon?: React.ReactNode;\n    onEditModeChanged?: (isEditMode: boolean) => void;\n}\n\nexport const AllPagesPanel: React.FC<AllPagesPanelProps> = (props) => {\n    const {startEditIcon, onEditModeChanged, className} = props;\n    const {menuItems, defaultMenuItems, onMenuItemsChanged, editMenuProps} =\n        useAsideHeaderInnerContext();\n\n    const menuItemsRef = useRef(menuItems);\n    menuItemsRef.current = menuItems;\n\n    const [isEditMode, setIsEditMode] = useState(false);\n\n    const [draggingItemTitle, setDraggingItemTitle] = useState<ReactNode | null>(null);\n\n    const toggleEditMode = useCallback(() => {\n        setIsEditMode((prev) => !prev);\n    }, []);\n\n    const groupedItems = useGroupedMenuItems(menuItems);\n\n    useEffect(() => {\n        onEditModeChanged?.(isEditMode);\n\n        if (isEditMode) {\n            editMenuProps?.onOpenEditMode?.();\n        }\n    }, [isEditMode, onEditModeChanged, editMenuProps]);\n\n    const onItemClick = useCallback<NonNullable<ListProps<AsideHeaderItem>['onItemClick']>>(\n        (item, _index, _forwardKey, event) => {\n            // TODO: make event an optional argument\n            item.onItemClick?.(item, false, event as React.MouseEvent<HTMLElement, MouseEvent>);\n        },\n        [],\n    );\n\n    const togglePageVisibility = useCallback(\n        (item: AsideHeaderItem) => {\n            if (!onMenuItemsChanged) {\n                return;\n            }\n            const changedItem: AsideHeaderItem = {\n                ...item,\n                hidden: !item.hidden,\n            };\n\n            const originItems = menuItemsRef.current.filter(\n                (menuItem) => menuItem.id !== ALL_PAGES_ID,\n            );\n            editMenuProps?.onToggleMenuItem?.(changedItem);\n            onMenuItemsChanged(\n                originItems.map((menuItem) => {\n                    if (menuItem.id !== changedItem.id) {\n                        return menuItem;\n                    }\n                    return changedItem;\n                }),\n            );\n        },\n        [onMenuItemsChanged, editMenuProps],\n    );\n\n    const onDragEnd = useCallback(() => {\n        setDraggingItemTitle(null);\n    }, [setDraggingItemTitle]);\n\n    const itemRender = useCallback(\n        (\n            asideHeaderItem: ListItemData<AsideHeaderItem>,\n            _isActive: boolean,\n            _itemIndex: number,\n        ) => {\n            const onDragStart = () => {\n                setDraggingItemTitle(asideHeaderItem.title);\n            };\n\n            return (\n                <AllPagesListItem\n                    item={asideHeaderItem}\n                    onDragStart={onDragStart}\n                    onDragEnd={onDragEnd}\n                    editMode={isEditMode}\n                    onToggle={() => togglePageVisibility(asideHeaderItem)}\n                    enableSorting={editMenuProps?.enableSorting}\n                />\n            );\n        },\n        [isEditMode, togglePageVisibility, onDragEnd, setDraggingItemTitle, editMenuProps],\n    );\n\n    const onResetToDefaultClick = useCallback(() => {\n        if (!onMenuItemsChanged) {\n            return;\n        }\n        editMenuProps?.onResetSettingsToDefault?.();\n        const originItems = defaultMenuItems?.filter(({id}) => id !== ALL_PAGES_ID);\n\n        if (originItems) {\n            onMenuItemsChanged(originItems);\n        }\n    }, [onMenuItemsChanged, editMenuProps, defaultMenuItems]);\n\n    const changeItemsOrder = useCallback(\n        ({oldIndex, newIndex}: {oldIndex: number; newIndex: number}) => {\n            const newItems = menuItemsRef.current.filter(({id}) => id !== ALL_PAGES_ID);\n\n            const element = newItems.splice(oldIndex, 1)[0];\n            newItems.splice(newIndex, 0, element);\n\n            onMenuItemsChanged?.(newItems.filter(({type}) => type !== 'divider'));\n\n            setDraggingItemTitle(null);\n            editMenuProps?.onChangeItemsOrder?.(element, oldIndex, newIndex);\n        },\n        [onMenuItemsChanged, editMenuProps],\n    );\n\n    const sortableItems = useMemo(() => {\n        return menuItems.filter(\n            ({id, afterMoreButton, type}) =>\n                id !== ALL_PAGES_ID && !afterMoreButton && type !== 'divider',\n        );\n    }, [menuItems]);\n\n    return (\n        <Flex className={b(null, className)} gap=\"5\" direction=\"column\">\n            <Flex gap=\"4\" alignItems=\"center\" justifyContent=\"space-between\">\n                <Text variant=\"subheader-2\">\n                    {isEditMode ? i18n('all-panel.title.editing') : i18n('all-panel.title.main')}\n                </Text>\n                <Tooltip content={i18n('all-panel.title.editing')}>\n                    <Button selected={isEditMode} view=\"normal\" onClick={toggleEditMode}>\n                        {startEditIcon ? startEditIcon : <Icon data={Gear} />}\n                    </Button>\n                </Tooltip>\n            </Flex>\n            <Flex className={b('content', {editMode: isEditMode})} gap=\"5\" direction=\"column\">\n                {isEditMode && editMenuProps?.enableSorting ? (\n                    <div>\n                        <List\n                            itemClassName={b('item', {editMode: true})}\n                            itemHeight={40}\n                            onSortEnd={changeItemsOrder}\n                            sortable\n                            virtualized={false}\n                            filterable={false}\n                            items={sortableItems}\n                            onItemClick={onItemClick}\n                            renderItem={itemRender}\n                        />\n\n                        {draggingItemTitle && (\n                            <div className={b('drag-placeholder')}>{draggingItemTitle}</div>\n                        )}\n                    </div>\n                ) : (\n                    Object.keys(groupedItems).map((category) => {\n                        return (\n                            <Flex key={category} direction=\"column\" gap=\"3\">\n                                <Text className={b('category')} variant=\"body-1\" color=\"secondary\">\n                                    {category}\n                                </Text>\n                                <List\n                                    virtualized={false}\n                                    filterable={false}\n                                    items={groupedItems[category]}\n                                    onItemClick={onItemClick}\n                                    renderItem={itemRender}\n                                />\n                            </Flex>\n                        );\n                    })\n                )}\n            </Flex>\n            {isEditMode && (\n                <Button onClick={onResetToDefaultClick}>{i18n('all-panel.resetToDefault')}</Button>\n            )}\n        </Flex>\n    );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"AllPagesPanel.js","sources":["../../../../../../../src/components/AsideHeader/components/AllPagesPanel/AllPagesPanel.tsx"],"sourcesContent":["import React, {ReactNode, useCallback, useEffect, useMemo, useRef, useState} from 'react';\n\nimport {Gear} from '@gravity-ui/icons';\nimport {Button, Flex, Icon, List, ListItemData, ListProps, Text, Tooltip} from '@gravity-ui/uikit';\n\nimport type {MenuGroup} from '../../../types';\nimport {createBlock} from '../../../utils/cn';\nimport {useAsideHeaderInnerContext} from '../../AsideHeaderContext';\nimport {AsideHeaderItem} from '../../types';\nimport {buildCompositeBarRows} from '../CompositeBar/grouping';\n\nimport {AllPagesListItem} from './AllPagesListItem';\nimport {\n    ALL_PAGES_PANEL_ROW_BUILD_OPTIONS,\n    getAllPagesEditModeFlatItems,\n    getCompositeBarHeaderGroupId,\n    reorderMenuItemsByCompositeBarRows,\n    rowsToAllPagesDisplayItems,\n} from './allPagesEditDisplay';\nimport {isAllPagesSortableItem, reorderAllPagesSortableItems} from './allPagesSortable';\nimport {ALL_PAGES_ID} from './constants';\nimport i18n from './i18n';\nimport {useGroupedMenuItems} from './useGroupedMenuItems';\n\nimport styles from './AllPagesPanel.module.scss';\n\nconst b = createBlock('all-pages-panel', styles);\n\ninterface AllPagesPanelProps {\n    className?: string;\n    startEditIcon?: React.ReactNode;\n    onEditModeChanged?: (isEditMode: boolean) => void;\n}\n\nexport const AllPagesPanel: React.FC<AllPagesPanelProps> = (props) => {\n    const {startEditIcon, onEditModeChanged, className} = props;\n    const {\n        menuItems,\n        defaultMenuItems,\n        onMenuItemsChanged,\n        editMenuProps,\n        menuGroups,\n        onMenuGroupsChanged,\n    } = useAsideHeaderInnerContext();\n\n    const menuItemsRef = useRef(menuItems);\n    menuItemsRef.current = menuItems;\n\n    const [isEditMode, setIsEditMode] = useState(false);\n\n    const [draggingItemTitle, setDraggingItemTitle] = useState<ReactNode | null>(null);\n\n    const toggleEditMode = useCallback(() => {\n        setIsEditMode((prev) => !prev);\n    }, []);\n\n    const groupedItems = useGroupedMenuItems(\n        menuItems,\n        isEditMode,\n        menuGroups,\n        onMenuGroupsChanged,\n    );\n\n    useEffect(() => {\n        onEditModeChanged?.(isEditMode);\n\n        if (isEditMode) {\n            editMenuProps?.onOpenEditMode?.();\n        }\n    }, [isEditMode, onEditModeChanged, editMenuProps]);\n\n    const onItemClick = useCallback<NonNullable<ListProps<AsideHeaderItem>['onItemClick']>>(\n        (item, _index, _forwardKey, event) => {\n            // TODO: make event an optional argument\n            item.onItemClick?.(item, false, event as React.MouseEvent<HTMLElement, MouseEvent>);\n        },\n        [],\n    );\n\n    const togglePageVisibility = useCallback(\n        (item: AsideHeaderItem) => {\n            const groupIdFromHeader = getCompositeBarHeaderGroupId(item.id);\n            if (groupIdFromHeader && menuGroups && onMenuGroupsChanged) {\n                const previousGroup = menuGroups.find((g) => g.id === groupIdFromHeader);\n                if (!previousGroup) {\n                    return;\n                }\n                const changedGroup: MenuGroup = {\n                    ...previousGroup,\n                    hidden: !previousGroup.hidden,\n                };\n                editMenuProps?.onToggleMenuGroup?.(changedGroup);\n                onMenuGroupsChanged(\n                    menuGroups.map((g) => (g.id === groupIdFromHeader ? changedGroup : g)),\n                );\n                return;\n            }\n\n            if (!onMenuItemsChanged) {\n                return;\n            }\n\n            const changedItem: AsideHeaderItem = {\n                ...item,\n                hidden: !item.hidden,\n            };\n\n            const originItems = menuItemsRef.current.filter(\n                (menuItem) => menuItem.id !== ALL_PAGES_ID,\n            );\n            editMenuProps?.onToggleMenuItem?.(changedItem);\n            onMenuItemsChanged(\n                originItems.map((menuItem) => {\n                    if (menuItem.id !== changedItem.id) {\n                        return menuItem;\n                    }\n                    return changedItem;\n                }),\n            );\n        },\n        [onMenuItemsChanged, editMenuProps, menuGroups, onMenuGroupsChanged],\n    );\n\n    const onDragEnd = useCallback(() => {\n        setDraggingItemTitle(null);\n    }, [setDraggingItemTitle]);\n\n    const itemRender = useCallback(\n        (\n            asideHeaderItem: ListItemData<AsideHeaderItem>,\n            _isActive: boolean,\n            _itemIndex: number,\n        ) => {\n            const onDragStart = () => {\n                setDraggingItemTitle(asideHeaderItem.title);\n            };\n\n            return (\n                <AllPagesListItem\n                    item={asideHeaderItem}\n                    onDragStart={onDragStart}\n                    onDragEnd={onDragEnd}\n                    editMode={isEditMode}\n                    onToggle={() => togglePageVisibility(asideHeaderItem)}\n                    enableSorting={editMenuProps?.enableSorting}\n                />\n            );\n        },\n        [isEditMode, togglePageVisibility, onDragEnd, setDraggingItemTitle, editMenuProps],\n    );\n\n    const onResetToDefaultClick = useCallback(() => {\n        if (!onMenuItemsChanged) {\n            return;\n        }\n        editMenuProps?.onResetSettingsToDefault?.();\n        const originItems = defaultMenuItems?.filter(({id}) => id !== ALL_PAGES_ID);\n\n        if (originItems) {\n            onMenuItemsChanged(originItems);\n        }\n    }, [onMenuItemsChanged, editMenuProps, defaultMenuItems]);\n\n    const changeItemsOrder = useCallback(\n        ({oldIndex, newIndex}: {oldIndex: number; newIndex: number}) => {\n            const withoutAllPages = menuItemsRef.current.filter(\n                ({id, type}) => id !== ALL_PAGES_ID && type !== 'divider',\n            );\n\n            let element: AsideHeaderItem | undefined;\n            let reordered: AsideHeaderItem[];\n\n            if (menuGroups?.length) {\n                const rows = buildCompositeBarRows(\n                    withoutAllPages,\n                    menuGroups,\n                    ALL_PAGES_PANEL_ROW_BUILD_OPTIONS,\n                );\n                const display = rowsToAllPagesDisplayItems(rows, {\n                    enableGroupHeaderPins: Boolean(onMenuGroupsChanged),\n                });\n                element = display[oldIndex];\n                reordered = reorderMenuItemsByCompositeBarRows(\n                    withoutAllPages,\n                    menuGroups,\n                    oldIndex,\n                    newIndex,\n                );\n            } else {\n                const sortableBefore = withoutAllPages.filter(isAllPagesSortableItem);\n                element = sortableBefore[oldIndex];\n                reordered = reorderAllPagesSortableItems(withoutAllPages, oldIndex, newIndex);\n            }\n\n            onMenuItemsChanged?.(reordered);\n\n            setDraggingItemTitle(null);\n            if (element) {\n                editMenuProps?.onChangeItemsOrder?.(element, oldIndex, newIndex);\n            }\n        },\n        [onMenuItemsChanged, editMenuProps, menuGroups, onMenuGroupsChanged],\n    );\n\n    const sortableItems = useMemo(() => {\n        const without = menuItems.filter(({id, type}) => id !== ALL_PAGES_ID && type !== 'divider');\n        const pinHeaders = Boolean(onMenuGroupsChanged);\n        if (menuGroups?.length) {\n            return getAllPagesEditModeFlatItems(without, menuGroups, {\n                enableGroupHeaderPins: pinHeaders,\n            });\n        }\n        return without.filter(isAllPagesSortableItem);\n    }, [menuItems, menuGroups, onMenuGroupsChanged]);\n\n    return (\n        <Flex className={b(null, className)} gap=\"5\" direction=\"column\">\n            <Flex gap=\"4\" alignItems=\"center\" justifyContent=\"space-between\">\n                <Text variant=\"subheader-2\">\n                    {isEditMode ? i18n('all-panel.title.editing') : i18n('all-panel.title.main')}\n                </Text>\n                <Tooltip content={i18n('all-panel.title.editing')}>\n                    <Button selected={isEditMode} view=\"normal\" onClick={toggleEditMode}>\n                        {startEditIcon ? startEditIcon : <Icon data={Gear} />}\n                    </Button>\n                </Tooltip>\n            </Flex>\n            <Flex className={b('content', {editMode: isEditMode})} gap=\"5\" direction=\"column\">\n                {isEditMode && editMenuProps?.enableSorting ? (\n                    <div>\n                        <List\n                            itemClassName={b('item', {editMode: true})}\n                            itemHeight={40}\n                            onSortEnd={changeItemsOrder}\n                            sortable\n                            virtualized={false}\n                            filterable={false}\n                            items={sortableItems}\n                            onItemClick={onItemClick}\n                            renderItem={itemRender}\n                        />\n\n                        {draggingItemTitle && (\n                            <div className={b('drag-placeholder')}>{draggingItemTitle}</div>\n                        )}\n                    </div>\n                ) : (\n                    Object.keys(groupedItems).map((category) => {\n                        return (\n                            <Flex key={category} direction=\"column\" gap=\"3\">\n                                <Text className={b('category')} variant=\"body-1\" color=\"secondary\">\n                                    {category}\n                                </Text>\n                                <List\n                                    virtualized={false}\n                                    filterable={false}\n                                    items={groupedItems[category]}\n                                    onItemClick={onItemClick}\n                                    renderItem={itemRender}\n                                />\n                            </Flex>\n                        );\n                    })\n                )}\n            </Flex>\n            {isEditMode && (\n                <Button onClick={onResetToDefaultClick}>{i18n('all-panel.resetToDefault')}</Button>\n            )}\n        </Flex>\n    );\n};\n"],"names":["React"],"mappings":"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"}

package/build/esm/components/AsideHeader/components/AllPagesPanel/allPagesEditDisplay.d.ts

@@ -0,0 +1,20 @@
+import type { MenuGroup } from '../../../types';
+import { AsideHeaderItem } from '../../types';
+import { type CompositeBarRow } from '../CompositeBar/grouping';
+/** Options passed to {@link buildCompositeBarRows} for All pages panel (edit-mode rows). */
+export declare const ALL_PAGES_PANEL_ROW_BUILD_OPTIONS: {
+    readonly includeHidden: true;
+    readonly includeHiddenGroups: true;
+};
+export declare function isCompositeBarGroupHeaderItem(item: AsideHeaderItem): boolean;
+export declare function getCompositeBarHeaderGroupId(itemId: string): string | undefined;
+export declare function rowsToAllPagesDisplayItems(rows: CompositeBarRow[], options?: {
+    enableGroupHeaderPins?: boolean;
+}): AsideHeaderItem[];
+/**
+ * Edit-mode list: top-level items + one row per menu group (header only), same order as CompositeBar.
+ */
+export declare function getAllPagesEditModeFlatItems(asideHeaderItems: AsideHeaderItem[], menuGroups: MenuGroup[] | undefined, options?: {
+    enableGroupHeaderPins?: boolean;
+}): AsideHeaderItem[];
+export declare function reorderMenuItemsByCompositeBarRows(withoutAllPagesNoDividers: AsideHeaderItem[], menuGroups: MenuGroup[], oldIndex: number, newIndex: number): AsideHeaderItem[];

package/build/esm/components/AsideHeader/components/AllPagesPanel/allPagesEditDisplay.js

@@ -0,0 +1,50 @@
+import { COMPOSITE_BAR_GROUP_HEADER_ID_PREFIX } from '../CompositeBar/constants.js';
+import { buildCompositeBarRows, flattenCompositeBarRows } from '../CompositeBar/grouping.js';
+import { makeGroupHeaderAsideItem } from '../CompositeBar/utils.js';
+
+/** Options passed to {@link buildCompositeBarRows} for All pages panel (edit-mode rows). */
+const ALL_PAGES_PANEL_ROW_BUILD_OPTIONS = {
+    includeHidden: true,
+    includeHiddenGroups: true,
+};
+function getCompositeBarHeaderGroupId(itemId) {
+    if (!itemId.startsWith(COMPOSITE_BAR_GROUP_HEADER_ID_PREFIX)) {
+        return undefined;
+    }
+    return itemId.slice(COMPOSITE_BAR_GROUP_HEADER_ID_PREFIX.length);
+}
+function rowsToAllPagesDisplayItems(rows, options) {
+    const showPins = Boolean(options === null || options === undefined ? undefined : options.enableGroupHeaderPins);
+    return rows.map((row) => {
+        var _a;
+        if (row.kind === 'item') {
+            return row.item;
+        }
+        const header = makeGroupHeaderAsideItem(row.group);
+        const firstCategory = (_a = row.items[0]) === null || _a === undefined ? undefined : _a.category;
+        return Object.assign(Object.assign({}, header), { category: firstCategory !== null && firstCategory !== undefined ? firstCategory : row.group.title, hidden: Boolean(row.group.hidden), preventUserRemoving: !showPins });
+    });
+}
+/**
+ * Edit-mode list: top-level items + one row per menu group (header only), same order as CompositeBar.
+ */
+function getAllPagesEditModeFlatItems(asideHeaderItems, menuGroups, options) {
+    if (!(menuGroups === null || menuGroups === undefined ? undefined : menuGroups.length)) {
+        return asideHeaderItems.filter((item) => !item.groupId);
+    }
+    const rows = buildCompositeBarRows(asideHeaderItems, menuGroups, ALL_PAGES_PANEL_ROW_BUILD_OPTIONS);
+    return rowsToAllPagesDisplayItems(rows, options);
+}
+function reorderMenuItemsByCompositeBarRows(withoutAllPagesNoDividers, menuGroups, oldIndex, newIndex) {
+    const rows = buildCompositeBarRows(withoutAllPagesNoDividers, menuGroups, ALL_PAGES_PANEL_ROW_BUILD_OPTIONS);
+    const reordered = [...rows];
+    const [moved] = reordered.splice(oldIndex, 1);
+    if (moved === undefined) {
+        return flattenCompositeBarRows(rows);
+    }
+    reordered.splice(newIndex, 0, moved);
+    return flattenCompositeBarRows(reordered);
+}
+
+export { ALL_PAGES_PANEL_ROW_BUILD_OPTIONS, getAllPagesEditModeFlatItems, getCompositeBarHeaderGroupId, reorderMenuItemsByCompositeBarRows, rowsToAllPagesDisplayItems };
+//# sourceMappingURL=allPagesEditDisplay.js.map

package/build/esm/components/AsideHeader/components/AllPagesPanel/allPagesEditDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"allPagesEditDisplay.js","sources":["../../../../../../../src/components/AsideHeader/components/AllPagesPanel/allPagesEditDisplay.ts"],"sourcesContent":["import type {MenuGroup} from '../../../types';\nimport {AsideHeaderItem} from '../../types';\nimport {COMPOSITE_BAR_GROUP_HEADER_ID_PREFIX} from '../CompositeBar/constants';\nimport {\n    type CompositeBarRow,\n    buildCompositeBarRows,\n    flattenCompositeBarRows,\n} from '../CompositeBar/grouping';\nimport {makeGroupHeaderAsideItem} from '../CompositeBar/utils';\n\n/** Options passed to {@link buildCompositeBarRows} for All pages panel (edit-mode rows). */\nexport const ALL_PAGES_PANEL_ROW_BUILD_OPTIONS = {\n    includeHidden: true,\n    includeHiddenGroups: true,\n} as const;\n\nexport function isCompositeBarGroupHeaderItem(item: AsideHeaderItem): boolean {\n    return item.id.startsWith(COMPOSITE_BAR_GROUP_HEADER_ID_PREFIX);\n}\n\nexport function getCompositeBarHeaderGroupId(itemId: string): string | undefined {\n    if (!itemId.startsWith(COMPOSITE_BAR_GROUP_HEADER_ID_PREFIX)) {\n        return undefined;\n    }\n    return itemId.slice(COMPOSITE_BAR_GROUP_HEADER_ID_PREFIX.length);\n}\n\nexport function rowsToAllPagesDisplayItems(\n    rows: CompositeBarRow[],\n    options?: {enableGroupHeaderPins?: boolean},\n): AsideHeaderItem[] {\n    const showPins = Boolean(options?.enableGroupHeaderPins);\n    return rows.map((row) => {\n        if (row.kind === 'item') {\n            return row.item;\n        }\n        const header = makeGroupHeaderAsideItem(row.group);\n        const firstCategory = row.items[0]?.category;\n        return {\n            ...header,\n            category: firstCategory ?? row.group.title,\n            hidden: Boolean(row.group.hidden),\n            preventUserRemoving: !showPins,\n        };\n    });\n}\n\n/**\n * Edit-mode list: top-level items + one row per menu group (header only), same order as CompositeBar.\n */\nexport function getAllPagesEditModeFlatItems(\n    asideHeaderItems: AsideHeaderItem[],\n    menuGroups: MenuGroup[] | undefined,\n    options?: {enableGroupHeaderPins?: boolean},\n): AsideHeaderItem[] {\n    if (!menuGroups?.length) {\n        return asideHeaderItems.filter((item) => !item.groupId);\n    }\n    const rows = buildCompositeBarRows(\n        asideHeaderItems,\n        menuGroups,\n        ALL_PAGES_PANEL_ROW_BUILD_OPTIONS,\n    );\n    return rowsToAllPagesDisplayItems(rows, options);\n}\n\nexport function reorderMenuItemsByCompositeBarRows(\n    withoutAllPagesNoDividers: AsideHeaderItem[],\n    menuGroups: MenuGroup[],\n    oldIndex: number,\n    newIndex: number,\n): AsideHeaderItem[] {\n    const rows = buildCompositeBarRows(\n        withoutAllPagesNoDividers,\n        menuGroups,\n        ALL_PAGES_PANEL_ROW_BUILD_OPTIONS,\n    );\n    const reordered = [...rows];\n    const [moved] = reordered.splice(oldIndex, 1);\n\n    if (moved === undefined) {\n        return flattenCompositeBarRows(rows);\n    }\n\n    reordered.splice(newIndex, 0, moved);\n\n    return flattenCompositeBarRows(reordered);\n}\n"],"names":[],"mappings":";;;;AAUA;AACa,MAAA,iCAAiC,GAAG;AAC7C,IAAA,aAAa,EAAE,IAAI;AACnB,IAAA,mBAAmB,EAAE,IAAI;;AAOvB,SAAU,4BAA4B,CAAC,MAAc,EAAA;IACvD,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,oCAAoC,CAAC,EAAE;AAC1D,QAAA,OAAO,SAAS;;IAEpB,OAAO,MAAM,CAAC,KAAK,CAAC,oCAAoC,CAAC,MAAM,CAAC;AACpE;AAEgB,SAAA,0BAA0B,CACtC,IAAuB,EACvB,OAA2C,EAAA;AAE3C,IAAA,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,SAAA,GAAA,SAAA,GAAP,OAAO,CAAE,qBAAqB,CAAC;AACxD,IAAA,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,KAAI;;AACpB,QAAA,IAAI,GAAG,CAAC,IAAI,KAAK,MAAM,EAAE;YACrB,OAAO,GAAG,CAAC,IAAI;;QAEnB,MAAM,MAAM,GAAG,wBAAwB,CAAC,GAAG,CAAC,KAAK,CAAC;QAClD,MAAM,aAAa,GAAG,CAAA,EAAA,GAAA,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,QAAQ;AAC5C,QAAA,OAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACO,MAAM,CAAA,EAAA,EACT,QAAQ,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,SAAA,GAAb,aAAa,GAAI,GAAG,CAAC,KAAK,CAAC,KAAK,EAC1C,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,EACjC,mBAAmB,EAAE,CAAC,QAAQ,EAChC,CAAA;AACN,KAAC,CAAC;AACN;AAEA;;AAEG;SACa,4BAA4B,CACxC,gBAAmC,EACnC,UAAmC,EACnC,OAA2C,EAAA;IAE3C,IAAI,EAAC,UAAU,KAAV,IAAA,IAAA,UAAU,KAAV,SAAA,GAAA,SAAA,GAAA,UAAU,CAAE,MAAM,CAAA,EAAE;AACrB,QAAA,OAAO,gBAAgB,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;;IAE3D,MAAM,IAAI,GAAG,qBAAqB,CAC9B,gBAAgB,EAChB,UAAU,EACV,iCAAiC,CACpC;AACD,IAAA,OAAO,0BAA0B,CAAC,IAAI,EAAE,OAAO,CAAC;AACpD;AAEM,SAAU,kCAAkC,CAC9C,yBAA4C,EAC5C,UAAuB,EACvB,QAAgB,EAChB,QAAgB,EAAA;IAEhB,MAAM,IAAI,GAAG,qBAAqB,CAC9B,yBAAyB,EACzB,UAAU,EACV,iCAAiC,CACpC;AACD,IAAA,MAAM,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC;AAC3B,IAAA,MAAM,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;AAE7C,IAAA,IAAI,KAAK,KAAK,SAAS,EAAE;AACrB,QAAA,OAAO,uBAAuB,CAAC,IAAI,CAAC;;IAGxC,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,CAAC;AAEpC,IAAA,OAAO,uBAAuB,CAAC,SAAS,CAAC;AAC7C;;;;"}

package/build/esm/components/AsideHeader/components/AllPagesPanel/allPagesSortable.d.ts

@@ -0,0 +1,7 @@
+import { AsideHeaderItem } from '../../types';
+export declare function isAllPagesSortableItem(item: AsideHeaderItem): boolean;
+/**
+ * Reorders only {@link isAllPagesSortableItem} entries; every other row stays in place.
+ * Indices refer to the contiguous sortable subset (same order as in the drag-and-drop list).
+ */
+export declare function reorderAllPagesSortableItems(withoutAllPagesItem: AsideHeaderItem[], oldIndex: number, newIndex: number): AsideHeaderItem[];

package/build/esm/components/AsideHeader/components/AllPagesPanel/allPagesSortable.js

@@ -0,0 +1,23 @@
+import { ALL_PAGES_ID } from '../../types.js';
+
+function isAllPagesSortableItem(item) {
+    return (item.id !== ALL_PAGES_ID &&
+        !item.afterMoreButton &&
+        item.type !== 'divider' &&
+        !item.groupId);
+}
+/**
+ * Reorders only {@link isAllPagesSortableItem} entries; every other row stays in place.
+ * Indices refer to the contiguous sortable subset (same order as in the drag-and-drop list).
+ */
+function reorderAllPagesSortableItems(withoutAllPagesItem, oldIndex, newIndex) {
+    const sortable = withoutAllPagesItem.filter(isAllPagesSortableItem);
+    const reordered = [...sortable];
+    const [moved] = reordered.splice(oldIndex, 1);
+    reordered.splice(newIndex, 0, moved);
+    let i = 0;
+    return withoutAllPagesItem.map((item) => isAllPagesSortableItem(item) ? reordered[i++] : item);
+}
+
+export { isAllPagesSortableItem, reorderAllPagesSortableItems };
+//# sourceMappingURL=allPagesSortable.js.map

package/build/esm/components/AsideHeader/components/AllPagesPanel/allPagesSortable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"allPagesSortable.js","sources":["../../../../../../../src/components/AsideHeader/components/AllPagesPanel/allPagesSortable.ts"],"sourcesContent":["import {ALL_PAGES_ID, AsideHeaderItem} from '../../types';\n\nexport function isAllPagesSortableItem(item: AsideHeaderItem): boolean {\n    return (\n        item.id !== ALL_PAGES_ID &&\n        !item.afterMoreButton &&\n        item.type !== 'divider' &&\n        !item.groupId\n    );\n}\n\n/**\n * Reorders only {@link isAllPagesSortableItem} entries; every other row stays in place.\n * Indices refer to the contiguous sortable subset (same order as in the drag-and-drop list).\n */\nexport function reorderAllPagesSortableItems(\n    withoutAllPagesItem: AsideHeaderItem[],\n    oldIndex: number,\n    newIndex: number,\n): AsideHeaderItem[] {\n    const sortable = withoutAllPagesItem.filter(isAllPagesSortableItem);\n    const reordered = [...sortable];\n    const [moved] = reordered.splice(oldIndex, 1);\n    reordered.splice(newIndex, 0, moved);\n\n    let i = 0;\n    return withoutAllPagesItem.map((item) =>\n        isAllPagesSortableItem(item) ? reordered[i++]! : item,\n    );\n}\n"],"names":[],"mappings":";;AAEM,SAAU,sBAAsB,CAAC,IAAqB,EAAA;AACxD,IAAA,QACI,IAAI,CAAC,EAAE,KAAK,YAAY;QACxB,CAAC,IAAI,CAAC,eAAe;QACrB,IAAI,CAAC,IAAI,KAAK,SAAS;AACvB,QAAA,CAAC,IAAI,CAAC,OAAO;AAErB;AAEA;;;AAGG;SACa,4BAA4B,CACxC,mBAAsC,EACtC,QAAgB,EAChB,QAAgB,EAAA;IAEhB,MAAM,QAAQ,GAAG,mBAAmB,CAAC,MAAM,CAAC,sBAAsB,CAAC;AACnE,IAAA,MAAM,SAAS,GAAG,CAAC,GAAG,QAAQ,CAAC;AAC/B,IAAA,MAAM,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC7C,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,CAAC;IAEpC,IAAI,CAAC,GAAG,CAAC;IACT,OAAO,mBAAmB,CAAC,GAAG,CAAC,CAAC,IAAI,KAChC,sBAAsB,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC,CAAC,EAAE,CAAE,GAAG,IAAI,CACxD;AACL;;;;"}

package/build/esm/components/AsideHeader/components/AllPagesPanel/constants.d.ts

@@ -1,3 +1,3 @@
 import { AsideHeaderItem } from '../../types';
-export declare const ALL_PAGES_ID: "all-pages";
+export { ALL_PAGES_ID } from '../../types';
 export declare function getAllPagesMenuItem(): AsideHeaderItem;

package/build/esm/components/AsideHeader/components/AllPagesPanel/constants.js

@@ -1,7 +1,7 @@
 import { Ellipsis } from '@gravity-ui/icons';
+import { ALL_PAGES_ID } from '../../types.js';
 import i18n from './i18n/index.js';
 
-const ALL_PAGES_ID = 'all-pages';
 function getAllPagesMenuItem() {
     return {
         id: ALL_PAGES_ID,

package/build/esm/components/AsideHeader/components/AllPagesPanel/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../../../../src/components/AsideHeader/components/AllPagesPanel/constants.ts"],"sourcesContent":["import {Ellipsis} from '@gravity-ui/icons';\n\nimport {AsideHeaderItem} from '../../types';\n\nimport i18n from './i18n';\n\nexport const ALL_PAGES_ID = 'all-pages' as const;\n\nexport function getAllPagesMenuItem(): AsideHeaderItem {\n    return {\n        id: ALL_PAGES_ID,\n        title: i18n('menu-item.all-pages.title'),\n        tooltipText: i18n('menu-item.all-pages.title'),\n        icon: Ellipsis,\n    };\n}\n"],"names":[],"mappings":";;;AAMO,MAAM,YAAY,GAAG;SAEZ,mBAAmB,GAAA;IAC/B,OAAO;AACH,QAAA,EAAE,EAAE,YAAY;AAChB,QAAA,KAAK,EAAE,IAAI,CAAC,2BAA2B,CAAC;AACxC,QAAA,WAAW,EAAE,IAAI,CAAC,2BAA2B,CAAC;AAC9C,QAAA,IAAI,EAAE,QAAQ;KACjB;AACL;;;;"}
+{"version":3,"file":"constants.js","sources":["../../../../../../../src/components/AsideHeader/components/AllPagesPanel/constants.ts"],"sourcesContent":["import {Ellipsis} from '@gravity-ui/icons';\n\nimport {ALL_PAGES_ID, AsideHeaderItem} from '../../types';\n\nimport i18n from './i18n';\n\nexport {ALL_PAGES_ID} from '../../types';\n\nexport function getAllPagesMenuItem(): AsideHeaderItem {\n    return {\n        id: ALL_PAGES_ID,\n        title: i18n('menu-item.all-pages.title'),\n        tooltipText: i18n('menu-item.all-pages.title'),\n        icon: Ellipsis,\n    };\n}\n"],"names":[],"mappings":";;;;SAQgB,mBAAmB,GAAA;IAC/B,OAAO;AACH,QAAA,EAAE,EAAE,YAAY;AAChB,QAAA,KAAK,EAAE,IAAI,CAAC,2BAA2B,CAAC;AACxC,QAAA,WAAW,EAAE,IAAI,CAAC,2BAA2B,CAAC;AAC9C,QAAA,IAAI,EAAE,QAAQ;KACjB;AACL;;;;"}

package/build/esm/components/AsideHeader/components/AllPagesPanel/useGroupedMenuItems.d.ts

@@ -1,4 +1,13 @@
+import type { MenuGroup } from '../../../types';
 import { AsideHeaderItem } from '../../types';
-export declare const useGroupedMenuItems: (asideHeaderItems: AsideHeaderItem[]) => {
+/**
+ * Group menu items by category for the All pages panel.
+ *
+ * @param asideHeaderItems — items from context (includes synthetic All pages row).
+ * @param editMode — when true, applies edit-mode row selection (headers when `menuGroups` is set).
+ * @param menuGroups — when provided with edit mode, inserts one CompositeBar-style header per group.
+ * @returns Items grouped by `category` key for rendering sections.
+ */
+export declare const useGroupedMenuItems: (asideHeaderItems: AsideHeaderItem[], editMode?: boolean, menuGroups?: MenuGroup[], onMenuGroupsChanged?: (menuGroups: MenuGroup[]) => void) => {
     [key: string]: AsideHeaderItem[];
 };

package/build/esm/components/AsideHeader/components/AllPagesPanel/useGroupedMenuItems.js

@@ -1,11 +1,33 @@
 import { useMemo } from 'react';
-import { ALL_PAGES_ID } from './constants.js';
+import { ALL_PAGES_ID } from '../../types.js';
+import { getAllPagesEditModeFlatItems } from './allPagesEditDisplay.js';
 import i18n from './i18n/index.js';
 
-const useGroupedMenuItems = (asideHeaderItems) => {
+/**
+ * Group menu items by category for the All pages panel.
+ *
+ * @param asideHeaderItems — items from context (includes synthetic All pages row).
+ * @param editMode — when true, applies edit-mode row selection (headers when `menuGroups` is set).
+ * @param menuGroups — when provided with edit mode, inserts one CompositeBar-style header per group.
+ * @returns Items grouped by `category` key for rendering sections.
+ */
+const useGroupedMenuItems = (asideHeaderItems, editMode, menuGroups, onMenuGroupsChanged) => {
     const allPagesMenuItems = useMemo(() => {
-        const filteredItems = asideHeaderItems.filter(({ id, type }) => type !== 'divider' && id !== ALL_PAGES_ID);
-        filteredItems.sort(({ type: typeA }, { type: typeB }) => {
+        const base = asideHeaderItems.filter(({ id, type }) => type !== 'divider' && id !== ALL_PAGES_ID);
+        const groupHeaderPins = Boolean(onMenuGroupsChanged);
+        let flatForGrouping;
+        if (!editMode) {
+            flatForGrouping = base;
+        }
+        else if (menuGroups === null || menuGroups === undefined ? undefined : menuGroups.length) {
+            flatForGrouping = getAllPagesEditModeFlatItems(base, menuGroups, {
+                enableGroupHeaderPins: groupHeaderPins,
+            });
+        }
+        else {
+            flatForGrouping = base.filter((item) => !item.groupId);
+        }
+        flatForGrouping.sort(({ type: typeA }, { type: typeB }) => {
             if (typeA === 'action') {
                 return 1;
             }
@@ -14,7 +36,7 @@ const useGroupedMenuItems = (asideHeaderItems) => {
             }
             return 0;
         });
-        const groupedItems = filteredItems.reduce((acc, asideHeaderItem) => {
+        const groupedItems = flatForGrouping.reduce((acc, asideHeaderItem) => {
             const category = asideHeaderItem.category || i18n('all-panel.menu.category.allOther');
             if (!acc[category]) {
                 acc[category] = [];
@@ -23,7 +45,7 @@ const useGroupedMenuItems = (asideHeaderItems) => {
             return acc;
         }, {});
         return groupedItems;
-    }, [asideHeaderItems]);
+    }, [asideHeaderItems, editMode, menuGroups, onMenuGroupsChanged]);
     return allPagesMenuItems;
 };
 

package/build/esm/components/AsideHeader/components/AllPagesPanel/useGroupedMenuItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGroupedMenuItems.js","sources":["../../../../../../../src/components/AsideHeader/components/AllPagesPanel/useGroupedMenuItems.ts"],"sourcesContent":["import {useMemo} from 'react';\n\nimport {AsideHeaderItem} from '../../types';\n\nimport {ALL_PAGES_ID} from './constants';\nimport i18n from './i18n';\n\nexport const useGroupedMenuItems = (asideHeaderItems: AsideHeaderItem[]) => {\n    const allPagesMenuItems = useMemo(() => {\n        const filteredItems = asideHeaderItems.filter(\n            ({id, type}) => type !== 'divider' && id !== ALL_PAGES_ID,\n        );\n        filteredItems.sort(({type: typeA}, {type: typeB}) => {\n            if (typeA === 'action') {\n                return 1;\n            }\n            if (typeB === 'action') {\n                return -1;\n            }\n            return 0;\n        });\n        const groupedItems = filteredItems.reduce(\n            (acc, asideHeaderItem) => {\n                const category =\n                    asideHeaderItem.category || i18n('all-panel.menu.category.allOther');\n                if (!acc[category]) {\n                    acc[category] = [];\n                }\n                acc[category].push(asideHeaderItem);\n                return acc;\n            },\n            {} as {[key: string]: AsideHeaderItem[]},\n        );\n        return groupedItems;\n    }, [asideHeaderItems]);\n\n    return allPagesMenuItems;\n};\n"],"names":[],"mappings":";;;;AAOa,MAAA,mBAAmB,GAAG,CAAC,gBAAmC,KAAI;AACvE,IAAA,MAAM,iBAAiB,GAAG,OAAO,CAAC,MAAK;QACnC,MAAM,aAAa,GAAG,gBAAgB,CAAC,MAAM,CACzC,CAAC,EAAC,EAAE,EAAE,IAAI,EAAC,KAAK,IAAI,KAAK,SAAS,IAAI,EAAE,KAAK,YAAY,CAC5D;AACD,QAAA,aAAa,CAAC,IAAI,CAAC,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,EAAE,EAAC,IAAI,EAAE,KAAK,EAAC,KAAI;AAChD,YAAA,IAAI,KAAK,KAAK,QAAQ,EAAE;AACpB,gBAAA,OAAO,CAAC;;AAEZ,YAAA,IAAI,KAAK,KAAK,QAAQ,EAAE;gBACpB,OAAO,EAAE;;AAEb,YAAA,OAAO,CAAC;AACZ,SAAC,CAAC;QACF,MAAM,YAAY,GAAG,aAAa,CAAC,MAAM,CACrC,CAAC,GAAG,EAAE,eAAe,KAAI;YACrB,MAAM,QAAQ,GACV,eAAe,CAAC,QAAQ,IAAI,IAAI,CAAC,kCAAkC,CAAC;AACxE,YAAA,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;AAChB,gBAAA,GAAG,CAAC,QAAQ,CAAC,GAAG,EAAE;;YAEtB,GAAG,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;AACnC,YAAA,OAAO,GAAG;SACb,EACD,EAAwC,CAC3C;AACD,QAAA,OAAO,YAAY;AACvB,KAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;AAEtB,IAAA,OAAO,iBAAiB;AAC5B;;;;"}
+{"version":3,"file":"useGroupedMenuItems.js","sources":["../../../../../../../src/components/AsideHeader/components/AllPagesPanel/useGroupedMenuItems.ts"],"sourcesContent":["import {useMemo} from 'react';\n\nimport type {MenuGroup} from '../../../types';\nimport {ALL_PAGES_ID, AsideHeaderItem} from '../../types';\n\nimport {getAllPagesEditModeFlatItems} from './allPagesEditDisplay';\nimport i18n from './i18n';\n\n/**\n * Group menu items by category for the All pages panel.\n *\n * @param asideHeaderItems — items from context (includes synthetic All pages row).\n * @param editMode — when true, applies edit-mode row selection (headers when `menuGroups` is set).\n * @param menuGroups — when provided with edit mode, inserts one CompositeBar-style header per group.\n * @returns Items grouped by `category` key for rendering sections.\n */\nexport const useGroupedMenuItems = (\n    asideHeaderItems: AsideHeaderItem[],\n    editMode?: boolean,\n    menuGroups?: MenuGroup[],\n    onMenuGroupsChanged?: (menuGroups: MenuGroup[]) => void,\n) => {\n    const allPagesMenuItems = useMemo(() => {\n        const base = asideHeaderItems.filter(\n            ({id, type}) => type !== 'divider' && id !== ALL_PAGES_ID,\n        );\n\n        const groupHeaderPins = Boolean(onMenuGroupsChanged);\n\n        let flatForGrouping: AsideHeaderItem[];\n\n        if (!editMode) {\n            flatForGrouping = base;\n        } else if (menuGroups?.length) {\n            flatForGrouping = getAllPagesEditModeFlatItems(base, menuGroups, {\n                enableGroupHeaderPins: groupHeaderPins,\n            });\n        } else {\n            flatForGrouping = base.filter((item) => !item.groupId);\n        }\n\n        flatForGrouping.sort(({type: typeA}, {type: typeB}) => {\n            if (typeA === 'action') {\n                return 1;\n            }\n            if (typeB === 'action') {\n                return -1;\n            }\n            return 0;\n        });\n        const groupedItems = flatForGrouping.reduce(\n            (acc, asideHeaderItem) => {\n                const category =\n                    asideHeaderItem.category || i18n('all-panel.menu.category.allOther');\n                if (!acc[category]) {\n                    acc[category] = [];\n                }\n                acc[category].push(asideHeaderItem);\n                return acc;\n            },\n            {} as {[key: string]: AsideHeaderItem[]},\n        );\n        return groupedItems;\n    }, [asideHeaderItems, editMode, menuGroups, onMenuGroupsChanged]);\n\n    return allPagesMenuItems;\n};\n"],"names":[],"mappings":";;;;;AAQA;;;;;;;AAOG;AACI,MAAM,mBAAmB,GAAG,CAC/B,gBAAmC,EACnC,QAAkB,EAClB,UAAwB,EACxB,mBAAuD,KACvD;AACA,IAAA,MAAM,iBAAiB,GAAG,OAAO,CAAC,MAAK;QACnC,MAAM,IAAI,GAAG,gBAAgB,CAAC,MAAM,CAChC,CAAC,EAAC,EAAE,EAAE,IAAI,EAAC,KAAK,IAAI,KAAK,SAAS,IAAI,EAAE,KAAK,YAAY,CAC5D;AAED,QAAA,MAAM,eAAe,GAAG,OAAO,CAAC,mBAAmB,CAAC;AAEpD,QAAA,IAAI,eAAkC;QAEtC,IAAI,CAAC,QAAQ,EAAE;YACX,eAAe,GAAG,IAAI;;aACnB,IAAI,UAAU,aAAV,UAAU,KAAA,SAAA,GAAA,SAAA,GAAV,UAAU,CAAE,MAAM,EAAE;AAC3B,YAAA,eAAe,GAAG,4BAA4B,CAAC,IAAI,EAAE,UAAU,EAAE;AAC7D,gBAAA,qBAAqB,EAAE,eAAe;AACzC,aAAA,CAAC;;aACC;AACH,YAAA,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;;AAG1D,QAAA,eAAe,CAAC,IAAI,CAAC,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,EAAE,EAAC,IAAI,EAAE,KAAK,EAAC,KAAI;AAClD,YAAA,IAAI,KAAK,KAAK,QAAQ,EAAE;AACpB,gBAAA,OAAO,CAAC;;AAEZ,YAAA,IAAI,KAAK,KAAK,QAAQ,EAAE;gBACpB,OAAO,EAAE;;AAEb,YAAA,OAAO,CAAC;AACZ,SAAC,CAAC;QACF,MAAM,YAAY,GAAG,eAAe,CAAC,MAAM,CACvC,CAAC,GAAG,EAAE,eAAe,KAAI;YACrB,MAAM,QAAQ,GACV,eAAe,CAAC,QAAQ,IAAI,IAAI,CAAC,kCAAkC,CAAC;AACxE,YAAA,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;AAChB,gBAAA,GAAG,CAAC,QAAQ,CAAC,GAAG,EAAE;;YAEtB,GAAG,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;AACnC,YAAA,OAAO,GAAG;SACb,EACD,EAAwC,CAC3C;AACD,QAAA,OAAO,YAAY;KACtB,EAAE,CAAC,gBAAgB,EAAE,QAAQ,EAAE,UAAU,EAAE,mBAAmB,CAAC,CAAC;AAEjE,IAAA,OAAO,iBAAiB;AAC5B;;;;"}

package/build/esm/components/AsideHeader/components/CompositeBar/CompositeBar.css

@@ -1 +1 @@
-.CompositeBar-module__gn-composite-bar___WoCDY{flex:1 0 auto;min-height:40px;width:100%}.CompositeBar-module__gn-composite-bar___WoCDY .CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF[class]{background-color:transparent}
+.CompositeBar-module__gn-composite-bar___WoCDY{flex:1 0 auto;min-height:40px;width:100%}.CompositeBar-module__gn-composite-bar___WoCDY .CompositeBar-module__gn-composite-bar__root-menu-item___oxCuF[class]{background-color:transparent}.CompositeBar-module__gn-composite-bar__menu-group___3hCzS{display:flex;flex-direction:column;width:100%}.CompositeBar-module__gn-composite-bar__menu-group-header___Yvr21[class]{box-sizing:border-box;flex:0 0 auto;min-height:40px;width:100%}.CompositeBar-module__gn-composite-bar__menu-group-nested-item___9gea-[class]{padding-inline-start:var(--g-spacing-3);position:relative}.CompositeBar-module__gn-composite-bar__menu-group-nested-list-item___-IygH[class]{background-color:transparent;overflow:visible;position:relative}.CompositeBar-module__gn-composite-bar__menu-group-nested-connector___uiegb{box-sizing:content-box;display:flex;pointer-events:none;position:relative;width:16px}.CompositeBar-module__gn-composite-bar__menu-group-nested-connector___uiegb:before{background:var(--gn-aside-header-menu-group-tree-line-color,#c1c3c7);bottom:0;content:"";height:100%;inset-inline-start:calc(50% - .5px);pointer-events:none;position:absolute;top:0;width:1px}.CompositeBar-module__gn-composite-bar__menu-group-nested-connector_spine-active___qVoAX:before{background:var(--gn-aside-header-menu-group-tree-line-active-color,var(--g-color-base-brand));z-index:1}.CompositeBar-module__gn-composite-bar__menu-group-nested-list-item___-IygH:last-child .CompositeBar-module__gn-composite-bar__menu-group-nested-connector___uiegb:before{display:none}.CompositeBar-module__gn-composite-bar__menu-group-nested-tree-svg___FJny7{fill:none;stroke:var(--gn-aside-header-menu-group-tree-line-color,#c1c3c7);display:block;flex-shrink:0;height:40px;max-width:16px;min-width:16px;position:relative}.CompositeBar-module__gn-composite-bar__menu-group-nested-tree-svg_active___Gmthf{stroke:var(--gn-aside-header-menu-group-tree-line-active-color,var(--g-color-base-brand))}.CompositeBar-module__gn-composite-bar__menu-group-nested-row-inner___jJLTe{height:100%;min-width:0;width:100%}

package/build/esm/components/AsideHeader/components/CompositeBar/CompositeBar.d.ts

@@ -1,9 +1,10 @@
 import React, { FC } from 'react';
 import { MenuGroup } from '../../../types';
-import { AsideHeaderItem } from '../../types';
+import { AsideHeaderItem, AsideHeaderMenuOverflow } from '../../types';
 type CompositeBarProps = {
     type: 'menu' | 'subheader';
     items: AsideHeaderItem[];
+    className?: string;
     menuGroups?: MenuGroup[];
     onItemClick?: (item: AsideHeaderItem, collapsed: boolean, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
     menuMoreTitle?: string;
@@ -11,6 +12,13 @@ type CompositeBarProps = {
     compact: boolean;
     compositeId?: string;
     menuItemClassName?: string;
+    /**
+     * @see AsideHeaderMenuOverflow
+     */
+    menuOverflow?: AsideHeaderMenuOverflow;
+    collapsedMenuGroupIds?: Record<string, boolean>;
+    defaultCollapsedMenuGroupIds?: Record<string, boolean>;
+    onToggleMenuGroupCollapsed?: (groupId: string) => void;
 };
 export declare const CompositeBar: FC<CompositeBarProps>;
 export {};