@gravity-ui/navigation 3.0.0-beta.1 → 3.0.0-beta.3

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

@@ -0,0 +1,99 @@
+import React__default, { useRef, useState, useCallback, useEffect, useMemo } from 'react';
+import { Gear } from '@gravity-ui/icons';
+import { Flex, Text, Tooltip, Button, Icon, List } from '@gravity-ui/uikit';
+import { useAsideHeaderInnerContext } from '../AsideHeader/AsideHeaderContext.js';
+import { block } from '../utils/cn.js';
+import { AllPagesListItem } from './AllPagesListItem/AllPagesListItem.js';
+import { ALL_PAGES_ID } from './constants.js';
+import i18n from './i18n/index.js';
+import { useGroupedMenuItems } from './useGroupedMenuItems.js';
+import './AllPagesPanel.scss.js';
+
+const b = block('all-pages-panel');
+const AllPagesPanel = (props) => {
+    const { startEditIcon, onEditModeChanged, className } = props;
+    const { menuItems, defaultMenuItems, onMenuItemsChanged, editMenuProps } = useAsideHeaderInnerContext();
+    const menuItemsRef = useRef(menuItems);
+    menuItemsRef.current = menuItems;
+    const [isEditMode, setIsEditMode] = useState(false);
+    const [draggingItemTitle, setDraggingItemTitle] = useState(null);
+    const toggleEditMode = useCallback(() => {
+        setIsEditMode((prev) => !prev);
+    }, []);
+    const groupedItems = useGroupedMenuItems(menuItems);
+    useEffect(() => {
+        var _a;
+        onEditModeChanged === null || onEditModeChanged === undefined ? undefined : onEditModeChanged(isEditMode);
+        if (isEditMode) {
+            (_a = editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.onOpenEditMode) === null || _a === undefined ? undefined : _a.call(editMenuProps);
+        }
+    }, [isEditMode, onEditModeChanged, editMenuProps]);
+    const onItemClick = useCallback((item) => {
+        var _a;
+        //@ts-ignore TODO fix when @gravity-ui/uikit/List will provide event arg on item click
+        (_a = item.onItemClick) === null || _a === undefined ? undefined : _a.call(item, item, false);
+    }, []);
+    const togglePageVisibility = useCallback((item) => {
+        var _a;
+        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);
+        onMenuItemsChanged(originItems.map((menuItem) => {
+            if (menuItem.id !== changedItem.id) {
+                return menuItem;
+            }
+            return changedItem;
+        }));
+    }, [onMenuItemsChanged, editMenuProps]);
+    const onDragEnd = useCallback(() => {
+        setDraggingItemTitle(null);
+    }, [setDraggingItemTitle]);
+    const itemRender = useCallback((item, _isActive, _itemIndex) => {
+        const onDragStart = () => {
+            setDraggingItemTitle(item.title);
+        };
+        return (React__default.createElement(AllPagesListItem, { item: item, onDragStart: onDragStart, onDragEnd: onDragEnd, editMode: isEditMode, onToggle: () => togglePageVisibility(item), enableSorting: editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting }));
+    }, [isEditMode, togglePageVisibility, onDragEnd, setDraggingItemTitle, editMenuProps]);
+    const onResetToDefaultClick = useCallback(() => {
+        var _a;
+        if (!onMenuItemsChanged) {
+            return;
+        }
+        (_a = editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.onResetSettingsToDefault) === null || _a === undefined ? undefined : _a.call(editMenuProps);
+        const originItems = defaultMenuItems === null || defaultMenuItems === undefined ? undefined : defaultMenuItems.filter((item) => item.id !== ALL_PAGES_ID);
+        if (originItems) {
+            onMenuItemsChanged(originItems);
+        }
+    }, [onMenuItemsChanged, editMenuProps, defaultMenuItems]);
+    const changeItemsOrder = useCallback(({ oldIndex, newIndex }) => {
+        var _a;
+        const newItems = menuItemsRef.current.filter((item) => item.id !== ALL_PAGES_ID);
+        const element = newItems.splice(oldIndex, 1)[0];
+        newItems.splice(newIndex, 0, element);
+        onMenuItemsChanged === null || onMenuItemsChanged === undefined ? undefined : onMenuItemsChanged(newItems.filter((item) => item.type !== 'divider'));
+        setDraggingItemTitle(null);
+        (_a = editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.onChangeItemsOrder) === null || _a === undefined ? undefined : _a.call(editMenuProps, element, oldIndex, newIndex);
+    }, [onMenuItemsChanged, editMenuProps]);
+    const sortableItems = useMemo(() => {
+        return menuItemsRef.current.filter((item) => item.id !== ALL_PAGES_ID && !item.afterMoreButton && item.type !== 'divider');
+    }, [menuItems]);
+    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')),
+            React__default.createElement(Tooltip, { content: i18n('all-panel.title.editing') },
+                React__default.createElement(Button, { selected: isEditMode, view: "normal", onClick: toggleEditMode }, startEditIcon ? startEditIcon : React__default.createElement(Icon, { data: Gear })))),
+        React__default.createElement(Flex, { className: b('content'), gap: "5", direction: "column" }, isEditMode && (editMenuProps === null || editMenuProps === undefined ? undefined : editMenuProps.enableSorting) ? (React__default.createElement("div", null,
+            React__default.createElement(List, { itemClassName: b('item', { editMode: true }), itemHeight: 40, onSortEnd: changeItemsOrder, sortable: true, virtualized: false, filterable: false, items: sortableItems, onItemClick: onItemClick, renderItem: itemRender }),
+            draggingItemTitle && (React__default.createElement("div", { className: b('drag-placeholder') }, draggingItemTitle)))) : (Object.keys(groupedItems).map((category) => {
+            return (React__default.createElement(Flex, { key: category, direction: "column", gap: "3" },
+                React__default.createElement(Text, { className: b('category'), variant: "body-1", color: "secondary" }, category),
+                React__default.createElement(List, { virtualized: false, filterable: false, items: groupedItems[category], onItemClick: onItemClick, renderItem: itemRender })));
+        }))),
+        isEditMode && (React__default.createElement(Button, { onClick: onResetToDefaultClick }, i18n('all-panel.resetToDefault')))));
+};
+
+export { AllPagesPanel };
+//# sourceMappingURL=AllPagesPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AllPagesPanel.js","sources":["../../../../../src/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, Text, Tooltip} from '@gravity-ui/uikit';\n\nimport {useAsideHeaderInnerContext} from '../AsideHeader/AsideHeaderContext';\nimport {MenuItem} from '../types';\nimport {block} from '../utils/cn';\n\nimport {AllPagesListItem} from './AllPagesListItem';\nimport {ALL_PAGES_ID} from './constants';\nimport i18n from './i18n';\nimport {useGroupedMenuItems} from './useGroupedMenuItems';\n\nimport './AllPagesPanel.scss';\n\nconst b = block('all-pages-panel');\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((item: ListItemData<MenuItem>) => {\n        //@ts-ignore TODO fix when @gravity-ui/uikit/List will provide event arg on item click\n        item.onItemClick?.(item, false);\n    }, []);\n\n    const togglePageVisibility = useCallback(\n        (item: MenuItem) => {\n            if (!onMenuItemsChanged) {\n                return;\n            }\n            const changedItem: MenuItem = {...item, hidden: !item.hidden};\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        (item: ListItemData<MenuItem>, _isActive: boolean, _itemIndex: number) => {\n            const onDragStart = () => {\n                setDraggingItemTitle(item.title);\n            };\n\n            return (\n                <AllPagesListItem\n                    item={item}\n                    onDragStart={onDragStart}\n                    onDragEnd={onDragEnd}\n                    editMode={isEditMode}\n                    onToggle={() => togglePageVisibility(item)}\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((item) => item.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((item) => item.id !== ALL_PAGES_ID);\n\n            const element = newItems.splice(oldIndex, 1)[0];\n            newItems.splice(newIndex, 0, element);\n\n            onMenuItemsChanged?.(newItems.filter((item) => item.type !== 'divider'));\n\n            setDraggingItemTitle(null);\n            editMenuProps?.onChangeItemsOrder?.(element, oldIndex, newIndex);\n        },\n        [onMenuItemsChanged, editMenuProps],\n    );\n\n    const sortableItems = useMemo(() => {\n        return menuItemsRef.current.filter(\n            (item) => item.id !== ALL_PAGES_ID && !item.afterMoreButton && item.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')} 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":";;;;;;;;;;;AAgBA,MAAM,CAAC,GAAG,KAAK,CAAC,iBAAiB,CAAC;AAQrB,MAAA,aAAa,GAAiC,CAAC,KAAK,KAAI;IACjE,MAAM,EAAC,aAAa,EAAE,iBAAiB,EAAE,SAAS,EAAC,GAAG,KAAK;AAC3D,IAAA,MAAM,EAAC,SAAS,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,aAAa,EAAC,GAClE,0BAA0B,EAAE;AAEhC,IAAA,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC;AACtC,IAAA,YAAY,CAAC,OAAO,GAAG,SAAS;IAEhC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAEnD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAmB,IAAI,CAAC;AAElF,IAAA,MAAM,cAAc,GAAG,WAAW,CAAC,MAAK;QACpC,aAAa,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC;KACjC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,YAAY,GAAG,mBAAmB,CAAC,SAAS,CAAC;IAEnD,SAAS,CAAC,MAAK;;AACX,QAAA,iBAAiB,aAAjB,iBAAiB,KAAA,SAAA,GAAA,SAAA,GAAjB,iBAAiB,CAAG,UAAU,CAAC;QAE/B,IAAI,UAAU,EAAE;YACZ,CAAA,EAAA,GAAA,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,cAAc,mEAAI;;KAExC,EAAE,CAAC,UAAU,EAAE,iBAAiB,EAAE,aAAa,CAAC,CAAC;AAElD,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,IAA4B,KAAI;;;QAE7D,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,EAAG,IAAI,EAAE,KAAK,CAAC;KAClC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,oBAAoB,GAAG,WAAW,CACpC,CAAC,IAAc,KAAI;;QACf,IAAI,CAAC,kBAAkB,EAAE;YACrB;;QAEJ,MAAM,WAAW,GAAiB,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,CAAE,EAAA,EAAA,MAAM,EAAE,CAAC,IAAI,CAAC,MAAM,EAAA,CAAC;AAE7D,QAAA,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC,MAAM,CAC3C,CAAC,QAAQ,KAAK,QAAQ,CAAC,EAAE,KAAK,YAAY,CAC7C;QACD,CAAA,EAAA,GAAA,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,gBAAgB,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,IAAA,CAAA,aAAA,EAAG,WAAW,CAAC;QAC9C,kBAAkB,CACd,WAAW,CAAC,GAAG,CAAC,CAAC,QAAQ,KAAI;YACzB,IAAI,QAAQ,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,EAAE;AAChC,gBAAA,OAAO,QAAQ;;AAEnB,YAAA,OAAO,WAAW;SACrB,CAAC,CACL;AACL,KAAC,EACD,CAAC,kBAAkB,EAAE,aAAa,CAAC,CACtC;AAED,IAAA,MAAM,SAAS,GAAG,WAAW,CAAC,MAAK;QAC/B,oBAAoB,CAAC,IAAI,CAAC;AAC9B,KAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC;IAE1B,MAAM,UAAU,GAAG,WAAW,CAC1B,CAAC,IAA4B,EAAE,SAAkB,EAAE,UAAkB,KAAI;QACrE,MAAM,WAAW,GAAG,MAAK;AACrB,YAAA,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC;AACpC,SAAC;AAED,QAAA,QACIA,cAAC,CAAA,aAAA,CAAA,gBAAgB,IACb,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,MAAM,oBAAoB,CAAC,IAAI,CAAC,EAC1C,aAAa,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,aAAa,EAAA,CAC7C;AAEV,KAAC,EACD,CAAC,UAAU,EAAE,oBAAoB,EAAE,SAAS,EAAE,oBAAoB,EAAE,aAAa,CAAC,CACrF;AAED,IAAA,MAAM,qBAAqB,GAAG,WAAW,CAAC,MAAK;;QAC3C,IAAI,CAAC,kBAAkB,EAAE;YACrB;;QAEJ,CAAA,EAAA,GAAA,aAAa,aAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,wBAAwB,mEAAI;QAC3C,MAAM,WAAW,GAAG,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAhB,SAAA,GAAA,SAAA,GAAA,gBAAgB,CAAE,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE,KAAK,YAAY,CAAC;QAEhF,IAAI,WAAW,EAAE;YACb,kBAAkB,CAAC,WAAW,CAAC;;KAEtC,EAAE,CAAC,kBAAkB,EAAE,aAAa,EAAE,gBAAgB,CAAC,CAAC;IAEzD,MAAM,gBAAgB,GAAG,WAAW,CAChC,CAAC,EAAC,QAAQ,EAAE,QAAQ,EAAuC,KAAI;;AAC3D,QAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE,KAAK,YAAY,CAAC;AAEhF,QAAA,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/C,QAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,EAAE,OAAO,CAAC;QAErC,kBAAkB,KAAA,IAAA,IAAlB,kBAAkB,KAAlB,SAAA,GAAA,SAAA,GAAA,kBAAkB,CAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC;QAExE,oBAAoB,CAAC,IAAI,CAAC;AAC1B,QAAA,CAAA,EAAA,GAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,kBAAkB,MAAG,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,IAAA,CAAA,aAAA,EAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC;AACpE,KAAC,EACD,CAAC,kBAAkB,EAAE,aAAa,CAAC,CACtC;AAED,IAAA,MAAM,aAAa,GAAG,OAAO,CAAC,MAAK;AAC/B,QAAA,OAAO,YAAY,CAAC,OAAO,CAAC,MAAM,CAC9B,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE,KAAK,YAAY,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,CACzF;AACL,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAEf,IAAA,QACIA,cAAC,CAAA,aAAA,CAAA,IAAI,IAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,GAAG,EAAC,GAAG,EAAC,SAAS,EAAC,QAAQ,EAAA;AAC3D,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,GAAG,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAA;YAC5DA,cAAC,CAAA,aAAA,CAAA,IAAI,IAAC,OAAO,EAAC,aAAa,EACtB,EAAA,UAAU,GAAG,IAAI,CAAC,yBAAyB,CAAC,GAAG,IAAI,CAAC,sBAAsB,CAAC,CACzE;AACP,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAC,EAAA,OAAO,EAAE,IAAI,CAAC,yBAAyB,CAAC,EAAA;AAC7C,gBAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,cAAc,EAC9D,EAAA,aAAa,GAAG,aAAa,GAAGA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,IAAI,EAAE,IAAI,EAAI,CAAA,CAChD,CACH,CACP;AACP,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,GAAG,EAAC,GAAG,EAAC,SAAS,EAAC,QAAQ,EAAA,EACpD,UAAU,KAAI,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,SAAA,GAAA,SAAA,GAAb,aAAa,CAAE,aAAa,CAAA,IACvCA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;YACIA,cAAC,CAAA,aAAA,CAAA,IAAI,IACD,aAAa,EAAE,CAAC,CAAC,MAAM,EAAE,EAAC,QAAQ,EAAE,IAAI,EAAC,CAAC,EAC1C,UAAU,EAAE,EAAE,EACd,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,EAAA,IAAA,EACR,WAAW,EAAE,KAAK,EAClB,UAAU,EAAE,KAAK,EACjB,KAAK,EAAE,aAAa,EACpB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACxB,CAAA;AAED,YAAA,iBAAiB,KACdA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,kBAAkB,CAAC,EAAA,EAAG,iBAAiB,CAAO,CACnE,CACC,KAEN,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,KAAI;AACvC,YAAA,QACIA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,GAAG,EAAA;AAC3C,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,EAAE,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAA,EAC7D,QAAQ,CACN;gBACPA,cAAC,CAAA,aAAA,CAAA,IAAI,EACD,EAAA,WAAW,EAAE,KAAK,EAClB,UAAU,EAAE,KAAK,EACjB,KAAK,EAAE,YAAY,CAAC,QAAQ,CAAC,EAC7B,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EAAA,CACxB,CACC;SAEd,CAAC,CACL,CACE;AACN,QAAA,UAAU,KACPA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAE,qBAAqB,EAAG,EAAA,IAAI,CAAC,0BAA0B,CAAC,CAAU,CACtF,CACE;AAEf;;;;"}

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

@@ -0,0 +1,7 @@
+import styleInject from '../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".gn-all-pages-panel{box-sizing:border-box;height:100%;min-width:300px;padding:var(--g-spacing-4) var(--g-spacing-6)}.gn-all-pages-panel__content{flex:1;margin:0 calc(var(--g-spacing-6)*-1);overflow:auto}.gn-all-pages-panel__category{padding:0 var(--g-spacing-6)}.gn-all-pages-panel__discoverable-feature-wrapper{display:flex}.gn-all-pages-panel__item_editMode{padding:0 var(--g-spacing-6)}.gn-all-pages-panel__drag-placeholder{text-wrap:nowrap;padding-left:88px;padding-right:68px;visibility:hidden}";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=AllPagesPanel.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AllPagesPanel.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -0,0 +1,15 @@
+import { Ellipsis } from '@gravity-ui/icons';
+import i18n from './i18n/index.js';
+
+const ALL_PAGES_ID = 'all-pages';
+function getAllPagesMenuItem() {
+    return {
+        id: ALL_PAGES_ID,
+        title: i18n('menu-item.all-pages.title'),
+        tooltipText: i18n('menu-item.all-pages.title'),
+        icon: Ellipsis,
+    };
+}
+
+export { ALL_PAGES_ID, getAllPagesMenuItem };
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../../src/components/AllPagesPanel/constants.ts"],"sourcesContent":["import {Ellipsis} from '@gravity-ui/icons';\n\nimport {MenuItem} from '../types';\n\nimport i18n from './i18n';\n\nexport const ALL_PAGES_ID = 'all-pages' as const;\n\nexport function getAllPagesMenuItem(): MenuItem {\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;;;;"}

package/build/esm/components/AllPagesPanel/i18n/en.json.js

@@ -0,0 +1,10 @@
+var en = {
+	"menu-item.all-pages.title": "All pages",
+	"all-panel.menu.category.allOther": "All other",
+	"all-panel.resetToDefault": "Reset to default",
+	"all-panel.title.editing": "Configuring the menu bar",
+	"all-panel.title.main": "All pages"
+};
+
+export { en as default };
+//# sourceMappingURL=en.json.js.map

package/build/esm/components/AllPagesPanel/i18n/en.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/build/esm/components/AllPagesPanel/i18n/index.d.ts

@@ -1,2 +1,6 @@
-declare const _default: (key: "menu-item.all-pages.title" | "all-panel.menu.category.allOther" | "all-panel.resetToDefault" | "all-panel.title.editing" | "all-panel.title.main", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: ((key: "menu-item.all-pages.title" | "all-panel.menu.category.allOther" | "all-panel.resetToDefault" | "all-panel.title.editing" | "all-panel.title.main", params?: import("@gravity-ui/i18n").Params) => string) & {
+    keysetData: {
+        "gn-AllPagesPanel": Record<"menu-item.all-pages.title" | "all-panel.menu.category.allOther" | "all-panel.resetToDefault" | "all-panel.title.editing" | "all-panel.title.main", import("@gravity-ui/i18n").KeyData>;
+    };
+};
 export default _default;

package/build/esm/components/AllPagesPanel/i18n/index.js

@@ -0,0 +1,10 @@
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../utils/cn.js';
+import en from './en.json.js';
+import ru from './ru.json.js';
+
+const COMPONENT = 'AllPagesPanel';
+var i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}${COMPONENT}`);
+
+export { i18n as default };
+//# sourceMappingURL=index.js.map

package/build/esm/components/AllPagesPanel/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/AllPagesPanel/i18n/index.ts"],"sourcesContent":["import {addComponentKeysets} from '@gravity-ui/uikit/i18n';\n\nimport {NAMESPACE} from '../../utils/cn';\n\nimport en from './en.json';\nimport ru from './ru.json';\n\nconst COMPONENT = 'AllPagesPanel';\nexport default addComponentKeysets({en, ru}, `${NAMESPACE}${COMPONENT}`);\n"],"names":[],"mappings":";;;;;AAOA,MAAM,SAAS,GAAG,eAAe;AACjC,WAAe,mBAAmB,CAAC,EAAC,EAAE,EAAE,EAAE,EAAC,EAAE,CAAA,EAAG,SAAS,CAAA,EAAG,SAAS,CAAA,CAAE,CAAC;;;;"}

package/build/esm/components/AllPagesPanel/i18n/ru.json.js

@@ -0,0 +1,10 @@
+var ru = {
+	"menu-item.all-pages.title": "Все страницы",
+	"all-panel.menu.category.allOther": "Остальное",
+	"all-panel.resetToDefault": "Сбросить по умолчанию",
+	"all-panel.title.editing": "Настройка панели меню",
+	"all-panel.title.main": "Все страницы"
+};
+
+export { ru as default };
+//# sourceMappingURL=ru.json.js.map

package/build/esm/components/AllPagesPanel/i18n/ru.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ru.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

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

@@ -0,0 +1,31 @@
+import { useMemo } from 'react';
+import { ALL_PAGES_ID } from './constants.js';
+import i18n from './i18n/index.js';
+
+const useGroupedMenuItems = (items) => {
+    const allPagesMenuItems = useMemo(() => {
+        const filteredItems = items.filter((item) => item.type !== 'divider' && item.id !== ALL_PAGES_ID);
+        filteredItems.sort((a, b) => {
+            if (a.type === 'action') {
+                return 1;
+            }
+            if (b.type === 'action') {
+                return -1;
+            }
+            return 0;
+        });
+        const groupedItems = filteredItems.reduce((acc, item) => {
+            const category = item.category || i18n('all-panel.menu.category.allOther');
+            if (!acc[category]) {
+                acc[category] = [];
+            }
+            acc[category].push(item);
+            return acc;
+        }, {});
+        return groupedItems;
+    }, [items]);
+    return allPagesMenuItems;
+};
+
+export { useGroupedMenuItems };
+//# sourceMappingURL=useGroupedMenuItems.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useGroupedMenuItems.js","sources":["../../../../../src/components/AllPagesPanel/useGroupedMenuItems.ts"],"sourcesContent":["import {useMemo} from 'react';\n\nimport {MenuItem} from '../types';\n\nimport {ALL_PAGES_ID} from './constants';\nimport i18n from './i18n';\n\nexport const useGroupedMenuItems = (items: MenuItem[]) => {\n    const allPagesMenuItems = useMemo(() => {\n        const filteredItems = items.filter(\n            (item) => item.type !== 'divider' && item.id !== ALL_PAGES_ID,\n        );\n        filteredItems.sort((a, b) => {\n            if (a.type === 'action') {\n                return 1;\n            }\n            if (b.type === 'action') {\n                return -1;\n            }\n            return 0;\n        });\n        const groupedItems = filteredItems.reduce(\n            (acc, item) => {\n                const category = item.category || i18n('all-panel.menu.category.allOther');\n                if (!acc[category]) {\n                    acc[category] = [];\n                }\n                acc[category].push(item);\n                return acc;\n            },\n            {} as {[key: string]: MenuItem[]},\n        );\n        return groupedItems;\n    }, [items]);\n\n    return allPagesMenuItems;\n};\n"],"names":[],"mappings":";;;;AAOa,MAAA,mBAAmB,GAAG,CAAC,KAAiB,KAAI;AACrD,IAAA,MAAM,iBAAiB,GAAG,OAAO,CAAC,MAAK;QACnC,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAC9B,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,EAAE,KAAK,YAAY,CAChE;QACD,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;AACxB,YAAA,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,EAAE;AACrB,gBAAA,OAAO,CAAC;;AAEZ,YAAA,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,EAAE;gBACrB,OAAO,EAAE;;AAEb,YAAA,OAAO,CAAC;AACZ,SAAC,CAAC;QACF,MAAM,YAAY,GAAG,aAAa,CAAC,MAAM,CACrC,CAAC,GAAG,EAAE,IAAI,KAAI;YACV,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,kCAAkC,CAAC;AAC1E,YAAA,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;AAChB,gBAAA,GAAG,CAAC,QAAQ,CAAC,GAAG,EAAE;;YAEtB,GAAG,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;AACxB,YAAA,OAAO,GAAG;SACb,EACD,EAAiC,CACpC;AACD,QAAA,OAAO,YAAY;AACvB,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAEX,IAAA,OAAO,iBAAiB;AAC5B;;;;"}

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

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+import { useAsideHeaderInnerContext } from '../AsideHeader/AsideHeaderContext.js';
+
+const useVisibleMenuItems = () => {
+    const { menuItems, allPagesIsAvailable } = useAsideHeaderInnerContext();
+    return useMemo(() => {
+        if (!allPagesIsAvailable) {
+            return menuItems;
+        }
+        let lastVisibleIndex = 0;
+        return menuItems.filter((item, index, items) => {
+            if (item.hidden) {
+                return false;
+            }
+            if (index > 0 &&
+                item.type === 'divider' &&
+                (items[lastVisibleIndex].type === 'divider' || items[lastVisibleIndex].hidden)) {
+                return false;
+            }
+            lastVisibleIndex = index;
+            return true;
+        });
+    }, [allPagesIsAvailable, menuItems]);
+};
+
+export { useVisibleMenuItems };
+//# sourceMappingURL=useVisibleMenuItems.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useVisibleMenuItems.js","sources":["../../../../../src/components/AllPagesPanel/useVisibleMenuItems.ts"],"sourcesContent":["import {useMemo} from 'react';\n\nimport {useAsideHeaderInnerContext} from '../AsideHeader/AsideHeaderContext';\nimport {MenuItem} from '../types';\n\nexport const useVisibleMenuItems = (): MenuItem[] => {\n    const {menuItems, allPagesIsAvailable} = useAsideHeaderInnerContext();\n    return useMemo(() => {\n        if (!allPagesIsAvailable) {\n            return menuItems;\n        }\n        let lastVisibleIndex = 0;\n        return menuItems.filter((item: MenuItem, index: number, items: MenuItem[]): boolean => {\n            if (item.hidden) {\n                return false;\n            }\n\n            if (\n                index > 0 &&\n                item.type === 'divider' &&\n                (items[lastVisibleIndex].type === 'divider' || items[lastVisibleIndex].hidden)\n            ) {\n                return false;\n            }\n            lastVisibleIndex = index;\n            return true;\n        });\n    }, [allPagesIsAvailable, menuItems]);\n};\n"],"names":[],"mappings":";;;AAKO,MAAM,mBAAmB,GAAG,MAAiB;IAChD,MAAM,EAAC,SAAS,EAAE,mBAAmB,EAAC,GAAG,0BAA0B,EAAE;IACrE,OAAO,OAAO,CAAC,MAAK;QAChB,IAAI,CAAC,mBAAmB,EAAE;AACtB,YAAA,OAAO,SAAS;;QAEpB,IAAI,gBAAgB,GAAG,CAAC;QACxB,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC,IAAc,EAAE,KAAa,EAAE,KAAiB,KAAa;AAClF,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AACb,gBAAA,OAAO,KAAK;;YAGhB,IACI,KAAK,GAAG,CAAC;gBACT,IAAI,CAAC,IAAI,KAAK,SAAS;AACvB,iBAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,IAAI,KAAK,SAAS,IAAI,KAAK,CAAC,gBAAgB,CAAC,CAAC,MAAM,CAAC,EAChF;AACE,gBAAA,OAAO,KAAK;;YAEhB,gBAAgB,GAAG,KAAK;AACxB,YAAA,OAAO,IAAI;AACf,SAAC,CAAC;AACN,KAAC,EAAE,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;AACxC;;;;"}

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

@@ -0,0 +1,15 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { PageLayout } from './components/PageLayout/PageLayout.js';
+import { PageLayoutAside } from './components/PageLayout/PageLayoutAside.js';
+
+const AsideHeader = React__default.forwardRef((_a, ref) => {
+    var { compact, className, topAlert } = _a, props = __rest(_a, ["compact", "className", "topAlert"]);
+    return (React__default.createElement(PageLayout, { compact: compact, className: className, topAlert: topAlert },
+        React__default.createElement(PageLayoutAside, Object.assign({ ref: ref }, props)),
+        React__default.createElement(PageLayout.Content, { renderContent: props.renderContent })));
+});
+AsideHeader.displayName = 'AsideHeader';
+
+export { AsideHeader };
+//# sourceMappingURL=AsideHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AsideHeader.js","sources":["../../../../../src/components/AsideHeader/AsideHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport {PageLayout} from './components/PageLayout/PageLayout';\nimport {PageLayoutAside} from './components/PageLayout/PageLayoutAside';\nimport {AsideHeaderProps} from './types';\n\nexport const AsideHeader = React.forwardRef<HTMLDivElement, AsideHeaderProps>(\n    ({compact, className, topAlert, ...props}, ref) => {\n        return (\n            <PageLayout compact={compact} className={className} topAlert={topAlert}>\n                <PageLayoutAside ref={ref} {...props} />\n                <PageLayout.Content renderContent={props.renderContent} />\n            </PageLayout>\n        );\n    },\n);\n\nAsideHeader.displayName = 'AsideHeader';\n"],"names":["React"],"mappings":";;;;;AAMO,MAAM,WAAW,GAAGA,cAAK,CAAC,UAAU,CACvC,CAAC,EAAwC,EAAE,GAAG,KAAI;QAAjD,EAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,OAAW,EAAN,KAAK,GAAvC,MAAA,CAAA,EAAA,EAAA,CAAA,SAAA,EAAA,WAAA,EAAA,UAAA,CAAwC,CAAD;AACpC,IAAA,QACIA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAA;AAClE,QAAAA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAC,MAAA,CAAA,MAAA,CAAA,EAAA,GAAG,EAAE,GAAG,EAAA,EAAM,KAAK,CAAI,CAAA;AACxC,QAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,CAAC,OAAO,EAAA,EAAC,aAAa,EAAE,KAAK,CAAC,aAAa,EAAA,CAAI,CACjD;AAErB,CAAC;AAGL,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}

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

@@ -0,0 +1,7 @@
+import styleInject from '../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".g-root{--gn-aside-top-panel-height:0px}.g-root_theme_light{--gn-ah-background-color:var(--g-color-private-black-50-solid);--gn-ah-decoration-background-color:var(--g-color-private-yellow-200);--gn-ah-selected-item-background-color:var(--g-color-private-orange-200);--gn-ah-hovered-item-background-color:var(--g-color-private-black-50)}.g-root_theme_light-hc{--gn-ah-background-color:var(--g-color-private-black-50-solid);--gn-ah-decoration-background-color:var(--g-color-private-yellow-300);--gn-ah-selected-item-background-color:var(--g-color-private-orange-300);--gn-ah-hovered-item-background-color:var(--g-color-private-black-150)}.g-root_theme_dark{--gn-ah-background-color:#110e11;--gn-ah-decoration-background-color:var(--g-color-private-yellow-150);--gn-ah-selected-item-background-color:var(--g-color-private-orange-200);--gn-ah-hovered-item-background-color:var(--g-color-private-white-150)}.g-root_theme_dark-hc{--gn-ah-background-color:#050505;--gn-ah-decoration-background-color:var(--g-color-private-yellow-250);--gn-ah-selected-item-background-color:var(--g-color-private-orange-250);--gn-ah-hovered-item-background-color:var(--g-color-private-white-250)}.gn-aside-header{--gn-aside-header-min-width:56px;--_--item-icon-background-size:38px;--_--background-color:var(--gn-ah-background-color);--_--decoration-collapsed-background-color:var(--gn-ah-decoration-background-color);--_--decoration-expanded-background-color:var(--gn-ah-decoration-background-color);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.gn-aside-header__aside{background-color:var(--gn-aside-header-expanded-background-color,var(--gn-aside-header-background-color,var(--_--background-color)));box-sizing:border-box;display:flex;flex-direction:column;height:100vh;left:0;margin-top:var(--gn-top-alert-height,0);max-height:calc(100vh - var(--gn-top-alert-height, 0));position:sticky;top:var(--gn-top-alert-height,0);width:inherit;z-index:var(--gn-aside-header-z-index,100)}.gn-aside-header__aside:after{background-color:var(--gn-aside-header-divider-vertical-color,var(--_--vertical-divider-line-color));content:\"\";height:100%;position:absolute;right:0;top:0;width:1px;z-index:2}.gn-aside-header__aside-popup-anchor{inset:0;position:absolute;z-index:1}.gn-aside-header__aside-content{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow-x:hidden;padding-top:var(--gn-aside-header-padding-top);position:relative;user-select:none;width:inherit;z-index:2}.gn-aside-header__aside-content>.gn-aside-header-logo{margin:8px 0}.gn-aside-header__aside-content_with-decoration{background:linear-gradient(180deg,var(--gn-aside-header-decoration-expanded-background-color,var(--_--decoration-expanded-background-color)) calc(var(--gradient-height)*.33),transparent calc(var(--gradient-height)*.88))}.gn-aside-header__aside-custom-background{bottom:0;display:flex;position:absolute;top:0;width:var(--gn-aside-header-size);z-index:-1}.gn-aside-header_compact .gn-aside-header__aside{background-color:var(--gn-aside-header-collapsed-background-color,var(--gn-aside-header-background-color,var(--_--background-color)))}.gn-aside-header_compact .gn-aside-header__aside-content{background:transparent}.gn-aside-header__header{--gn-aside-header-header-divider-height:29px;box-sizing:border-box;flex:none;padding-bottom:22px;padding-top:8px;position:relative;width:100%;z-index:1}.gn-aside-header__header .gn-aside-header__header-divider{bottom:0;color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));display:none;left:0;position:absolute;z-index:-2}.gn-aside-header__header_with-decoration:before{background-color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));content:\"\";display:none;height:calc(100% - var(--gn-aside-header-header-divider-height));left:0;position:absolute;top:0;width:100%;z-index:-2}.gn-aside-header__header:after{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));bottom:12px;content:\"\";height:1px;left:0;position:absolute;width:100%;z-index:-2}.gn-aside-header_compact .gn-aside-header__header:before,.gn-aside-header_compact .gn-aside-header__header_with-decoration .gn-aside-header__header-divider{display:block}.gn-aside-header_compact .gn-aside-header__header_with-decoration:after{display:none}.gn-aside-header__logo-button .gn-aside-header__logo-icon-place{height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size));width:var(--gn-aside-header-min-width)}.gn-aside-header__menu-items{flex-grow:1}.gn-aside-header__footer{display:flex;flex-direction:column;flex-shrink:0;margin:8px 0;width:100%}.gn-aside-header__panels{inset:var(--gn-top-alert-height,0) 0 0;max-height:calc(100vh - var(--gn-top-alert-height, 0));overflow:auto;position:fixed;z-index:var(--gn-aside-header-panel-z-index,98)}.gn-aside-header__panel{height:100%}.gn-aside-header__pane-container{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.gn-aside-header__top-alert{background:var(--g-color-base-background);position:fixed;top:0;width:100%;z-index:var(--gn-aside-header-pane-top-z-index,98)}.gn-aside-header__content{margin-top:var(--gn-top-alert-height,0);overflow-x:auto;width:calc(100% - var(--gn-aside-header-size));z-index:var(--gn-aside-header-content-z-index,95)}";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=AsideHeader.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AsideHeader.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -5,7 +5,7 @@ export interface AsideHeaderInnerContextType extends AsideHeaderInnerProps {
     menuItems: MenuItem[];
     defaultMenuItems?: MenuItem[];
     allPagesIsAvailable: boolean;
-    onItemClick: (item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onItemClick: (item: MenuItem, collapsed: boolean, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 }
 export declare const AsideHeaderInnerContext: React.Context<AsideHeaderInnerContextType | undefined>;
 export declare const AsideHeaderInnerContextProvider: React.Provider<AsideHeaderInnerContextType | undefined>;

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

@@ -0,0 +1 @@
+{"version":3,"file":"AsideHeaderContext.js","sources":["../../../../../src/components/AsideHeader/AsideHeaderContext.ts"],"sourcesContent":["import React from 'react';\n\nimport {MenuItem} from '../types';\n\nimport {AsideHeaderInnerProps} from './types';\n\nexport interface AsideHeaderInnerContextType extends AsideHeaderInnerProps {\n    menuItems: MenuItem[];\n    defaultMenuItems?: MenuItem[];\n    allPagesIsAvailable: boolean;\n    onItemClick: (\n        item: MenuItem,\n        collapsed: boolean,\n        event: React.MouseEvent<HTMLElement, MouseEvent>,\n    ) => void;\n}\n\nexport const AsideHeaderInnerContext = React.createContext<AsideHeaderInnerContextType | undefined>(\n    undefined,\n);\nAsideHeaderInnerContext.displayName = 'AsideHeaderInnerContext';\n\nexport const AsideHeaderInnerContextProvider = AsideHeaderInnerContext.Provider;\n\nexport const useAsideHeaderInnerContext = (): AsideHeaderInnerContextType => {\n    const contextValue = React.useContext(AsideHeaderInnerContext);\n    if (contextValue === undefined) {\n        throw new Error(`AsideHeaderInnerContext is not initialized.\n        Please check if you wrapped your component with AsideHeaderInnerContext.Provider`);\n    }\n    return contextValue;\n};\n\nexport interface AsideHeaderContextType {\n    compact: boolean;\n    size: number;\n}\n\nexport const AsideHeaderContext = React.createContext<AsideHeaderContextType | undefined>({\n    compact: false,\n    size: 0,\n});\n\nAsideHeaderContext.displayName = 'AsideHeaderContext';\n\nexport const AsideHeaderContextProvider = AsideHeaderContext.Provider;\n\nexport const useAsideHeaderContext = (): AsideHeaderContextType => {\n    const contextValue = React.useContext(AsideHeaderContext);\n    if (contextValue === undefined) {\n        throw new Error(`AsideHeaderContext is not initialized.\n        Please check if you wrapped your component with AsideHeader\n        Context.Provider`);\n    }\n    return contextValue;\n};\n"],"names":["React"],"mappings":";;AAiBa,MAAA,uBAAuB,GAAGA,cAAK,CAAC,aAAa,CACtD,SAAS;AAEb,uBAAuB,CAAC,WAAW,GAAG,yBAAyB;AAElD,MAAA,+BAA+B,GAAG,uBAAuB,CAAC;AAEhE,MAAM,0BAA0B,GAAG,MAAkC;IACxE,MAAM,YAAY,GAAGA,cAAK,CAAC,UAAU,CAAC,uBAAuB,CAAC;AAC9D,IAAA,IAAI,YAAY,KAAK,SAAS,EAAE;QAC5B,MAAM,IAAI,KAAK,CAAC,CAAA;AACiE,wFAAA,CAAA,CAAC;;AAEtF,IAAA,OAAO,YAAY;AACvB;AAOa,MAAA,kBAAkB,GAAGA,cAAK,CAAC,aAAa,CAAqC;AACtF,IAAA,OAAO,EAAE,KAAK;AACd,IAAA,IAAI,EAAE,CAAC;AACV,CAAA;AAED,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;AAExC,MAAA,0BAA0B,GAAG,kBAAkB,CAAC;AAEtD,MAAM,qBAAqB,GAAG,MAA6B;IAC9D,MAAM,YAAY,GAAGA,cAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC;AACzD,IAAA,IAAI,YAAY,KAAK,SAAS,EAAE;QAC5B,MAAM,IAAI,KAAK,CAAC,CAAA;;AAEC,wBAAA,CAAA,CAAC;;AAEtB,IAAA,OAAO,YAAY;AACvB;;;;"}

package/build/esm/components/AsideHeader/__stories__/AsideHeader.stories.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+declare const _default: Meta;
+export default _default;
+export declare const Showcase: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
+export declare const Compact: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
+export declare const MultipleTooltip: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
+export declare const CustomTheme: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
+export declare const CustomBackground: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
+export declare const AdvancedUsage: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
+export declare const HeaderAlert: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
+export declare const HeaderAlertCentered: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
+export declare const Fallback: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
+    headerDecoration: boolean;
+    subheaderItemsCount: number;
+}>;
+/** @type {StoryFn} */
+export declare function LineClamp(): React.JSX.Element;

package/build/esm/components/AsideHeader/__stories__/AsideHeaderShowcase.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TopAlertProps } from '../..';
+import './AsideHeaderShowcase.scss';
+interface AsideHeaderShowcaseProps {
+    multipleTooltip?: boolean;
+    initialCompact?: boolean;
+    topAlert?: TopAlertProps;
+    customBackground?: React.ReactNode;
+    customBackgroundClassName?: string;
+    headerDecoration?: boolean;
+    hideCollapseButton?: boolean;
+}
+export declare const AsideHeaderShowcase: React.FC<AsideHeaderShowcaseProps>;
+export {};

package/build/esm/components/AsideHeader/__stories__/getAsideHeaderWrapper.d.ts

@@ -0,0 +1,3 @@
+import React, { FC } from 'react';
+import { AsideHeaderProps } from '../types';
+export declare function getAsideHeaderWrapper(props?: AsideHeaderProps): (Story: FC) => React.JSX.Element;

package/build/esm/components/AsideHeader/__stories__/moc.d.ts

@@ -0,0 +1,6 @@
+import { AsideHeaderContextType } from '../AsideHeaderContext';
+import { AsideHeaderProps } from '../types';
+export declare const EMPTY_CONTEXT_VALUE: AsideHeaderContextType;
+export declare const menuItemsShowcase: AsideHeaderProps['menuItems'];
+export declare const text = "\nDid you attend? He sang by grove ripe -\nThe bard of love, the singer of his mourning.\nWhen fields were silent by the early morning,\nTo sad and simple sounds of a pipe\nDid you attend?\n\nDid you behold in dark of forest leaf\nThe bard of love, the singer of his sadness?\nThe trace of tears, the smile, the utter paleness,\nThe quiet look, full of eternal grief,\nDid you behold?\n\nThen did you sigh when hearing how cries\nThe bard of love, the singer of his dole?\nWhen in the woods you saw the young man, sole,\nAnd met the look of his extinguished eyes,\nThen did you sigh?\n";
+export declare const menuItemsClamped: import("../..").MenuItem[];

package/build/esm/components/AsideHeader/__tests__/helpersPlaywright.d.ts

@@ -1,2 +1,2 @@
 import * as DefaultAsideHeaderStories from '../__stories__/AsideHeader.stories';
-export declare const AsideHeaderStories: Omit<import("@storybook/types").StoriesWithPartialProps<import("@storybook/react/dist/types-0fc72a6d").R, typeof DefaultAsideHeaderStories>, keyof import("@storybook/types").Store_CSFExports<import("@storybook/types").Renderer, import("@storybook/types").Args>>;
+export declare const AsideHeaderStories: Omit<import("@storybook/core/types").StoriesWithPartialProps<import("@storybook/react").ReactRenderer, typeof DefaultAsideHeaderStories>, keyof import("@storybook/core/types").Store_CSFExports>;

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

@@ -0,0 +1,23 @@
+import React__default, { useCallback } from 'react';
+import { Icon } from '@gravity-ui/uikit';
+import { block } from '../../../utils/cn.js';
+import { useAsideHeaderInnerContext } from '../../AsideHeaderContext.js';
+import i18n from '../../i18n/index.js';
+import SvgControlMenuButton from '../../../../assets/icons/control-menu-button.svg.js';
+import './CollapseButton.scss.js';
+
+const b = block('collapse-button');
+const CollapseButton = ({ className }) => {
+    const { onChangeCompact, compact, expandTitle, collapseTitle } = useAsideHeaderInnerContext();
+    const onCollapseButtonClick = useCallback(() => {
+        onChangeCompact === null || onChangeCompact === undefined ? undefined : onChangeCompact(!compact);
+    }, [compact, onChangeCompact]);
+    const buttonTitle = compact
+        ? expandTitle || i18n('button_expand')
+        : collapseTitle || i18n('button_collapse');
+    return (React__default.createElement("button", { className: b({ compact }, className), onClick: onCollapseButtonClick, title: buttonTitle },
+        React__default.createElement(Icon, { data: SvgControlMenuButton, className: b('icon'), width: "16", height: "10" })));
+};
+
+export { CollapseButton };
+//# sourceMappingURL=CollapseButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CollapseButton.js","sources":["../../../../../../../src/components/AsideHeader/components/CollapseButton/CollapseButton.tsx"],"sourcesContent":["import React, {useCallback} from 'react';\n\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {block} from '../../../utils/cn';\nimport {useAsideHeaderInnerContext} from '../../AsideHeaderContext';\nimport i18n from '../../i18n';\n\nimport controlMenuButtonIcon from '../../../../../assets/icons/control-menu-button.svg';\n\nimport './CollapseButton.scss';\n\nconst b = block('collapse-button');\n\nexport interface CollapseButtonProps {\n    className?: string;\n}\n\nexport const CollapseButton = ({className}: CollapseButtonProps) => {\n    const {onChangeCompact, compact, expandTitle, collapseTitle} = useAsideHeaderInnerContext();\n\n    const onCollapseButtonClick = useCallback(() => {\n        onChangeCompact?.(!compact);\n    }, [compact, onChangeCompact]);\n\n    const buttonTitle = compact\n        ? expandTitle || i18n('button_expand')\n        : collapseTitle || i18n('button_collapse');\n    return (\n        <button\n            className={b({compact}, className)}\n            onClick={onCollapseButtonClick}\n            title={buttonTitle}\n        >\n            <Icon data={controlMenuButtonIcon} className={b('icon')} width=\"16\" height=\"10\" />\n        </button>\n    );\n};\n"],"names":["React","controlMenuButtonIcon"],"mappings":";;;;;;;;AAYA,MAAM,CAAC,GAAG,KAAK,CAAC,iBAAiB,CAAC;MAMrB,cAAc,GAAG,CAAC,EAAC,SAAS,EAAsB,KAAI;AAC/D,IAAA,MAAM,EAAC,eAAe,EAAE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAC,GAAG,0BAA0B,EAAE;AAE3F,IAAA,MAAM,qBAAqB,GAAG,WAAW,CAAC,MAAK;QAC3C,eAAe,KAAA,IAAA,IAAf,eAAe,KAAf,SAAA,GAAA,SAAA,GAAA,eAAe,CAAG,CAAC,OAAO,CAAC;AAC/B,KAAC,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IAE9B,MAAM,WAAW,GAAG;AAChB,UAAE,WAAW,IAAI,IAAI,CAAC,eAAe;AACrC,UAAE,aAAa,IAAI,IAAI,CAAC,iBAAiB,CAAC;AAC9C,IAAA,QACIA,cACI,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,EAAC,OAAO,EAAC,EAAE,SAAS,CAAC,EAClC,OAAO,EAAE,qBAAqB,EAC9B,KAAK,EAAE,WAAW,EAAA;QAElBA,cAAC,CAAA,aAAA,CAAA,IAAI,IAAC,IAAI,EAAEC,oBAAqB,EAAE,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAA,CAAG,CAC7E;AAEjB;;;;"}

package/build/esm/components/AsideHeader/components/CollapseButton/CollapseButton.scss.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".gn-collapse-button{--_--focus-outline-color:var(--g-color-line-focus);--_--focus-outline-offset:0;align-items:center;background:none;border:none;border-top:1px solid var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));box-sizing:content-box;color:inherit;cursor:pointer;display:flex;font-family:var(--g-text-body-font-family);font-size:inherit;font-weight:var(--g-text-body-font-weight);justify-content:center;min-height:20px;outline:none;padding:0;position:relative;width:100%}.gn-collapse-button:before{content:\"\";inset:0 2px 2px;position:absolute;z-index:-1}.gn-collapse-button:focus-visible:before{outline:var(--_--focus-outline-color) solid 2px;outline-offset:var(--_--focus-outline-offset)}.gn-collapse-button:not(.gn-collapse-button_compact) .gn-collapse-button__icon{transform:rotate(180deg)}.gn-collapse-button:hover .gn-collapse-button__icon{color:var(--g-color-text-primary)}.gn-collapse-button__icon{color:var(--g-color-text-secondary)}";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=CollapseButton.scss.js.map

package/build/esm/components/AsideHeader/components/CollapseButton/CollapseButton.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapseButton.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -0,0 +1,40 @@
+import React__default, { useRef } from 'react';
+import { setRef } from '@gravity-ui/uikit';
+import '../../AllPagesPanel/AllPagesPanel.js';
+import '@gravity-ui/icons';
+import '../../AllPagesPanel/i18n/index.js';
+import { useVisibleMenuItems } from '../../AllPagesPanel/useVisibleMenuItems.js';
+import { CompositeBar } from '../../CompositeBar/CompositeBar.js';
+import { useAsideHeaderInnerContext } from '../AsideHeaderContext.js';
+import i18n from '../i18n/index.js';
+import { b } from '../utils.js';
+import { CollapseButton } from './CollapseButton/CollapseButton.js';
+import { Header } from './Header.js';
+import { Panels } from './Panels.js';
+
+const FirstPanel = React__default.forwardRef((_props, ref) => {
+    const { size, onItemClick, headerDecoration, multipleTooltip, menuMoreTitle, onMenuMoreClick, renderFooter, compact, customBackground, customBackgroundClassName, className, hideCollapseButton, qa, } = useAsideHeaderInnerContext();
+    const visibleMenuItems = useVisibleMenuItems();
+    const asideRef = useRef(null);
+    React__default.useEffect(() => {
+        setRef(ref, asideRef.current);
+    }, [ref]);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: b('aside', className), style: { width: size }, "data-qa": qa },
+            React__default.createElement("div", { className: b('aside-popup-anchor'), ref: asideRef }),
+            customBackground && (React__default.createElement("div", { className: b('aside-custom-background', customBackgroundClassName) }, customBackground)),
+            React__default.createElement("div", { className: b('aside-content', { ['with-decoration']: headerDecoration }) },
+                React__default.createElement(Header, null),
+                (visibleMenuItems === null || visibleMenuItems === undefined ? undefined : visibleMenuItems.length) ? (React__default.createElement(CompositeBar, { type: "menu", items: visibleMenuItems, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== undefined ? menuMoreTitle : i18n('label_more'), onItemClick: onItemClick, onMoreClick: onMenuMoreClick, multipleTooltip: multipleTooltip })) : (React__default.createElement("div", { className: b('menu-items') })),
+                React__default.createElement("div", { className: b('footer') }, renderFooter === null || renderFooter === undefined ? undefined : renderFooter({
+                    size,
+                    compact: Boolean(compact),
+                    asideRef,
+                })),
+                !hideCollapseButton && React__default.createElement(CollapseButton, null))),
+        React__default.createElement(Panels, null)));
+});
+FirstPanel.displayName = 'FirstPanel';
+
+export { FirstPanel };
+//# sourceMappingURL=FirstPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FirstPanel.js","sources":["../../../../../../src/components/AsideHeader/components/FirstPanel.tsx"],"sourcesContent":["import React, {useRef} from 'react';\n\nimport {setRef} from '@gravity-ui/uikit';\n\nimport {useVisibleMenuItems} from '../../AllPagesPanel';\nimport {CompositeBar} from '../../CompositeBar/CompositeBar';\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport i18n from '../i18n';\nimport {b} from '../utils';\n\nimport {CollapseButton} from './CollapseButton/CollapseButton';\nimport {Header} from './Header';\nimport {Panels} from './Panels';\n\nexport const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {\n    const {\n        size,\n        onItemClick,\n        headerDecoration,\n        multipleTooltip,\n        menuMoreTitle,\n        onMenuMoreClick,\n        renderFooter,\n        compact,\n        customBackground,\n        customBackgroundClassName,\n        className,\n        hideCollapseButton,\n        qa,\n    } = useAsideHeaderInnerContext();\n    const visibleMenuItems = useVisibleMenuItems();\n\n    const asideRef = useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        setRef<HTMLDivElement>(ref, asideRef.current);\n    }, [ref]);\n\n    return (\n        <React.Fragment>\n            <div className={b('aside', className)} style={{width: size}} data-qa={qa}>\n                <div className={b('aside-popup-anchor')} ref={asideRef} />\n                {customBackground && (\n                    <div className={b('aside-custom-background', customBackgroundClassName)}>\n                        {customBackground}\n                    </div>\n                )}\n\n                <div className={b('aside-content', {['with-decoration']: headerDecoration})}>\n                    <Header />\n                    {visibleMenuItems?.length ? (\n                        <CompositeBar\n                            type=\"menu\"\n                            items={visibleMenuItems}\n                            menuMoreTitle={menuMoreTitle ?? i18n('label_more')}\n                            onItemClick={onItemClick}\n                            onMoreClick={onMenuMoreClick}\n                            multipleTooltip={multipleTooltip}\n                        />\n                    ) : (\n                        <div className={b('menu-items')} />\n                    )}\n                    <div className={b('footer')}>\n                        {renderFooter?.({\n                            size,\n                            compact: Boolean(compact),\n                            asideRef,\n                        })}\n                    </div>\n                    {!hideCollapseButton && <CollapseButton />}\n                </div>\n            </div>\n            <Panels />\n        </React.Fragment>\n    );\n});\n\nFirstPanel.displayName = 'FirstPanel';\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;AAcO,MAAM,UAAU,GAAGA,cAAK,CAAC,UAAU,CAAiB,CAAC,MAAM,EAAE,GAAG,KAAI;AACvE,IAAA,MAAM,EACF,IAAI,EACJ,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,eAAe,EACf,YAAY,EACZ,OAAO,EACP,gBAAgB,EAChB,yBAAyB,EACzB,SAAS,EACT,kBAAkB,EAClB,EAAE,GACL,GAAG,0BAA0B,EAAE;AAChC,IAAA,MAAM,gBAAgB,GAAG,mBAAmB,EAAE;AAE9C,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC;AAE7C,IAAAA,cAAK,CAAC,SAAS,CAAC,MAAK;AACjB,QAAA,MAAM,CAAiB,GAAG,EAAE,QAAQ,CAAC,OAAO,CAAC;AACjD,KAAC,EAAE,CAAC,GAAG,CAAC,CAAC;AAET,IAAA,QACIA,cAAA,CAAA,aAAA,CAACA,cAAK,CAAC,QAAQ,EAAA,IAAA;AACX,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,IAAI,EAAC,aAAW,EAAE,EAAA;YACpEA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,oBAAoB,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAI,CAAA;AACzD,YAAA,gBAAgB,KACbA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,yBAAyB,EAAE,yBAAyB,CAAC,EAClE,EAAA,gBAAgB,CACf,CACT;AAED,YAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,eAAe,EAAE,EAAC,CAAC,iBAAiB,GAAG,gBAAgB,EAAC,CAAC,EAAA;AACvE,gBAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAG,IAAA,CAAA;AACT,gBAAA,CAAA,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,KAAA,SAAA,GAAA,SAAA,GAAhB,gBAAgB,CAAE,MAAM,KACrBA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EACT,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,gBAAgB,EACvB,aAAa,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,SAAA,GAAb,aAAa,GAAI,IAAI,CAAC,YAAY,CAAC,EAClD,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,eAAe,EAC5B,eAAe,EAAE,eAAe,EAClC,CAAA,KAEFA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,EAAA,CAAI,CACtC;AACD,gBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,EAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,CAAG;oBACZ,IAAI;AACJ,oBAAA,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC;oBACzB,QAAQ;AACX,iBAAA,CAAC,CACA;AACL,gBAAA,CAAC,kBAAkB,IAAIA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA,CAAG,CACxC,CACJ;AACN,QAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,CAAG,CACG;AAEzB,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

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

@@ -0,0 +1,26 @@
+import React__default, { useCallback } from 'react';
+import { Icon } from '@gravity-ui/uikit';
+import { CompositeBar } from '../../CompositeBar/CompositeBar.js';
+import { Logo } from '../../Logo/Logo.js';
+import { ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT } from '../../constants.js';
+import { useAsideHeaderInnerContext, useAsideHeaderContext } from '../AsideHeaderContext.js';
+import { b } from '../utils.js';
+import SvgDividerCollapsed from '../../../assets/icons/divider-collapsed.svg.js';
+
+const DEFAULT_SUBHEADER_ITEMS = [];
+const Header = () => {
+    const { logo, onItemClick, onClosePanel, headerDecoration, subheaderItems } = useAsideHeaderInnerContext();
+    const { compact } = useAsideHeaderContext();
+    const onLogoClick = useCallback((event) => {
+        var _a;
+        onClosePanel === null || onClosePanel === undefined ? undefined : onClosePanel();
+        (_a = logo === null || logo === undefined ? undefined : logo.onClick) === null || _a === undefined ? undefined : _a.call(logo, event);
+    }, [onClosePanel, logo]);
+    return (React__default.createElement("div", { className: b('header', { ['with-decoration']: headerDecoration }) },
+        logo && (React__default.createElement(Logo, Object.assign({}, logo, { onClick: onLogoClick, compact: compact, buttonClassName: b('logo-button'), iconPlaceClassName: b('logo-icon-place') }))),
+        React__default.createElement(CompositeBar, { type: "subheader", items: subheaderItems || DEFAULT_SUBHEADER_ITEMS, onItemClick: onItemClick }),
+        headerDecoration && (React__default.createElement(Icon, { data: SvgDividerCollapsed, className: b('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: HEADER_DIVIDER_HEIGHT }))));
+};
+
+export { Header };
+//# sourceMappingURL=Header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../../../../../../src/components/AsideHeader/components/Header.tsx"],"sourcesContent":["import React, {useCallback} from 'react';\n\nimport {Icon} from '@gravity-ui/uikit';\n\nimport {CompositeBar} from '../../CompositeBar/CompositeBar';\nimport {Logo} from '../../Logo';\nimport {ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT} from '../../constants';\nimport {SubheaderMenuItem} from '../../types';\nimport {useAsideHeaderContext, useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport {b} from '../utils';\n\nimport headerDividerCollapsedIcon from '../../../../assets/icons/divider-collapsed.svg';\n\nconst DEFAULT_SUBHEADER_ITEMS: SubheaderMenuItem[] = [];\n\nexport const Header = () => {\n    const {logo, onItemClick, onClosePanel, headerDecoration, subheaderItems} =\n        useAsideHeaderInnerContext();\n    const {compact} = useAsideHeaderContext();\n\n    const onLogoClick = useCallback(\n        (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n            onClosePanel?.();\n            logo?.onClick?.(event);\n        },\n        [onClosePanel, logo],\n    );\n\n    return (\n        <div className={b('header', {['with-decoration']: headerDecoration})}>\n            {logo && (\n                <Logo\n                    {...logo}\n                    onClick={onLogoClick}\n                    compact={compact}\n                    buttonClassName={b('logo-button')}\n                    iconPlaceClassName={b('logo-icon-place')}\n                />\n            )}\n\n            <CompositeBar\n                type=\"subheader\"\n                items={subheaderItems || DEFAULT_SUBHEADER_ITEMS}\n                onItemClick={onItemClick}\n            />\n\n            {headerDecoration && (\n                <Icon\n                    data={headerDividerCollapsedIcon}\n                    className={b('header-divider')}\n                    width={ASIDE_HEADER_COMPACT_WIDTH}\n                    height={HEADER_DIVIDER_HEIGHT}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["React","headerDividerCollapsedIcon"],"mappings":";;;;;;;;;AAaA,MAAM,uBAAuB,GAAwB,EAAE;AAEhD,MAAM,MAAM,GAAG,MAAK;AACvB,IAAA,MAAM,EAAC,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAC,GACrE,0BAA0B,EAAE;AAChC,IAAA,MAAM,EAAC,OAAO,EAAC,GAAG,qBAAqB,EAAE;AAEzC,IAAA,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,KAAgD,KAAI;;AACjD,QAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,EAAI;QAChB,CAAA,EAAA,GAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,SAAA,GAAA,SAAA,GAAA,IAAI,CAAE,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,EAAG,KAAK,CAAC;AAC1B,KAAC,EACD,CAAC,YAAY,EAAE,IAAI,CAAC,CACvB;AAED,IAAA,QACIA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,CAAC,iBAAiB,GAAG,gBAAgB,EAAC,CAAC,EAAA;AAC/D,QAAA,IAAI,KACDA,cAAC,CAAA,aAAA,CAAA,IAAI,EACG,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,IAAI,EACR,EAAA,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,CAAC,CAAC,aAAa,CAAC,EACjC,kBAAkB,EAAE,CAAC,CAAC,iBAAiB,CAAC,IAC1C,CACL;AAED,QAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EACT,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,cAAc,IAAI,uBAAuB,EAChD,WAAW,EAAE,WAAW,EAC1B,CAAA;QAED,gBAAgB,KACbA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACD,IAAI,EAAEC,mBAA0B,EAChC,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAE,0BAA0B,EACjC,MAAM,EAAE,qBAAqB,EAC/B,CAAA,CACL,CACC;AAEd;;;;"}

package/build/esm/{AsideFallback.js → components/AsideHeader/components/PageLayout/AsideFallback.js}

@@ -1,11 +1,9 @@
 import React__default from 'react';
 import { Icon } from '@gravity-ui/uikit';
-import { a as ASIDE_HEADER_COMPACT_WIDTH, H as HEADER_DIVIDER_HEIGHT, I as ITEM_HEIGHT } from './constants-b1604ff5.js';
-import { useAsideHeaderContext } from './AsideHeaderContext.js';
-import { b } from './utils-117463a5.js';
-import { h as headerDividerCollapsedIcon } from './divider-collapsed-a0ef54c3.js';
-import './cn-ffe5e9f5.js';
-import '@bem-react/classname';
+import { ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT, ITEM_HEIGHT } from '../../../constants.js';
+import { useAsideHeaderContext } from '../../AsideHeaderContext.js';
+import { b } from '../../utils.js';
+import SvgDividerCollapsed from '../../../../assets/icons/divider-collapsed.svg.js';
 
 const AsideFallback = ({ headerDecoration, subheaderItemsCount = 0, qa }) => {
     const { compact } = useAsideHeaderContext();
@@ -15,7 +13,7 @@ const AsideFallback = ({ headerDecoration, subheaderItemsCount = 0, qa }) => {
         React__default.createElement("div", { className: b('aside-content', { 'with-decoration': headerDecoration }) },
             React__default.createElement("div", { className: b('header', { 'with-decoration': headerDecoration }) },
                 React__default.createElement("div", { style: { height: subheaderHeight } }),
-                compact && headerDecoration ? (React__default.createElement(Icon, { data: headerDividerCollapsedIcon, className: b('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: HEADER_DIVIDER_HEIGHT })) : null),
+                compact && headerDecoration ? (React__default.createElement(Icon, { data: SvgDividerCollapsed, className: b('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: HEADER_DIVIDER_HEIGHT })) : null),
             React__default.createElement("div", { style: { flex: 1 } }))));
 };
 

package/build/esm/components/AsideHeader/components/PageLayout/AsideFallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsideFallback.js","sources":["../../../../../../../src/components/AsideHeader/components/PageLayout/AsideFallback.tsx"],"sourcesContent":["import React from 'react';\n\nimport {Icon, QAProps} from '@gravity-ui/uikit';\n\nimport {ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT, ITEM_HEIGHT} from '../../../constants';\nimport {useAsideHeaderContext} from '../../AsideHeaderContext';\nimport {b} from '../../utils';\n\nimport headerDividerCollapsedIcon from '../../../../../assets/icons/divider-collapsed.svg';\n\nexport interface Props extends QAProps {\n    headerDecoration?: boolean;\n    subheaderItemsCount?: number;\n}\n\nexport const AsideFallback: React.FC<Props> = ({headerDecoration, subheaderItemsCount = 0, qa}) => {\n    const {compact} = useAsideHeaderContext();\n\n    const widthVar = compact ? '--gn-aside-header-min-width' : '--gn-aside-header-size';\n\n    const subheaderHeight = (1 + subheaderItemsCount) * ITEM_HEIGHT;\n\n    return (\n        <div className={b('aside')} style={{width: `var(${widthVar})`}} data-qa={qa}>\n            <div className={b('aside-content', {'with-decoration': headerDecoration})}>\n                <div className={b('header', {'with-decoration': headerDecoration})}>\n                    <div style={{height: subheaderHeight}} />\n                    {compact && headerDecoration ? (\n                        <Icon\n                            data={headerDividerCollapsedIcon}\n                            className={b('header-divider')}\n                            width={ASIDE_HEADER_COMPACT_WIDTH}\n                            height={HEADER_DIVIDER_HEIGHT}\n                        />\n                    ) : null}\n                </div>\n                <div style={{flex: 1}} />\n            </div>\n        </div>\n    );\n};\n"],"names":["React","headerDividerCollapsedIcon"],"mappings":";;;;;;;AAeO,MAAM,aAAa,GAAoB,CAAC,EAAC,gBAAgB,EAAE,mBAAmB,GAAG,CAAC,EAAE,EAAE,EAAC,KAAI;AAC9F,IAAA,MAAM,EAAC,OAAO,EAAC,GAAG,qBAAqB,EAAE;IAEzC,MAAM,QAAQ,GAAG,OAAO,GAAG,6BAA6B,GAAG,wBAAwB;IAEnF,MAAM,eAAe,GAAG,CAAC,CAAC,GAAG,mBAAmB,IAAI,WAAW;AAE/D,IAAA,QACIA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,EAAC,KAAK,EAAE,CAAA,IAAA,EAAO,QAAQ,CAAG,CAAA,CAAA,EAAC,aAAW,EAAE,EAAA;QACvEA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,eAAe,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;YACrEA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,CAAC,EAAA;AAC9D,gBAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAC,MAAM,EAAE,eAAe,EAAC,EAAI,CAAA;AACxC,gBAAA,OAAO,IAAI,gBAAgB,IACxBA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACD,IAAI,EAAEC,mBAA0B,EAChC,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAC9B,KAAK,EAAE,0BAA0B,EACjC,MAAM,EAAE,qBAAqB,GAC/B,IACF,IAAI,CACN;YACND,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAC,IAAI,EAAE,CAAC,EAAC,EAAI,CAAA,CACvB,CACJ;AAEd;;;;"}