@cloud-ru/uikit-product-page-layout 0.21.6 → 0.22.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.22.0 (2025-11-24)
+
+
+### Features
+
+* **PDS-2935:** add new component TreeNavigation for Page Layout ([ef1a595](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/ef1a595fb34619087d5930de5affe72bff4e867b))
+
+
+
+
+
 ## 0.21.6 (2025-11-13)
 
 

package/dist/cjs/components/TreeNavigation/TreeNavigation.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+import { StatusProps } from '@snack-uikit/status';
+import { TreeNodeProps } from '@snack-uikit/tree';
+export type TreeNavigationProps = {
+    header: {
+        /** Текст заголовка */
+        title: string;
+        /** Иконка */
+        icon?: ReactNode;
+        /** Текст описания */
+        description?: string;
+        /** Статус (цвет, иконка и т.п.) – любой тип, который принимает ваш <Status/> */
+        status?: StatusProps;
+        /** Раздел для действий */
+        actions?: ReactNode;
+    };
+    menu: {
+        /** Заголовок меню */
+        menuTitle?: string;
+        /** Данные для дерева меню */
+        items: TreeNodeProps[];
+        /** Управляемый режим: если передан, меню открывается как popover. */
+        isMenuOpen?: boolean;
+        /** Колбэк, вызываемый при попытке изменить состояние меню.
+         *  В контролируемом режиме обязателен, в неконтролируемом – опционален.
+         */
+        onMenuToggle?: (open: boolean) => void;
+        /** Открывать меню по умолчанию */
+        defaultMenuOpened?: boolean;
+        /** Позляет отключить кнопку "Свернуть все"*/
+        enableShrinkMenuButton?: boolean;
+        /** Открывать пункты меню по умолчанию */
+        withDefaultOpenedMenuList?: boolean;
+    };
+    /** Контентная часть страницы */
+    content: ReactNode;
+    /** Вариант отображения */
+    mode: 'popover' | 'aside';
+    /** Класс для контейнера контентной части */
+    contentClassName?: string;
+};
+export declare function TreeNavigation({ header: { title, icon, description, status, actions }, menu: { menuTitle, items, enableShrinkMenuButton, withDefaultOpenedMenuList, isMenuOpen, defaultMenuOpened, onMenuToggle, }, content, mode, contentClassName, }: TreeNavigationProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/TreeNavigation/TreeNavigation.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeNavigation = TreeNavigation;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
+const uikit_product_icons_1 = require("@cloud-ru/uikit-product-icons");
+const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const button_1 = require("@snack-uikit/button");
+const status_1 = require("@snack-uikit/status");
+const typography_1 = require("@snack-uikit/typography");
+const helper_components_1 = require("./helper-components");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function TreeNavigation({ header: { title, icon, description, status, actions }, menu: { menuTitle, items, enableShrinkMenuButton, withDefaultOpenedMenuList, isMenuOpen, defaultMenuOpened, onMenuToggle, }, content, mode, contentClassName, }) {
+    const [open, setOpen] = (0, uncontrollable_1.useUncontrolledProp)(isMenuOpen, defaultMenuOpened, onMenuToggle);
+    const { t } = (0, uikit_product_locale_1.useLocale)('PageLayout');
+    const menu = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(helper_components_1.Menu, { menuItems: items, menuTitle: menuTitle, enableShrinkMenuButton: enableShrinkMenuButton, withDefaultOpenedMenuList: withDefaultOpenedMenuList })), [items, menuTitle, enableShrinkMenuButton, withDefaultOpenedMenuList]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.titleWrapper, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.titleInner, children: [(0, jsx_runtime_1.jsx)(helper_components_1.ConditionalPopover, { isOpen: Boolean(open), onOpenChange: setOpen, tip: menu, withPopover: mode === 'popover', children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.innerElement, children: (0, jsx_runtime_1.jsx)(button_1.ButtonSimple, { size: 'xs', "aria-label": open ? t('TreeNavigation.closeMenu') : t('TreeNavigation.openMenu'), icon: open ? (0, jsx_runtime_1.jsx)(uikit_product_icons_1.CloseSVG, {}) : (0, jsx_runtime_1.jsx)(uikit_product_icons_1.BurgerSVG, {}), onClick: () => setOpen(!open) }) }) }), icon && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.innerElement, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.icon, children: icon }) })), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleL, { className: styles_module_scss_1.default.title, children: title }), status && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.innerElement, children: (0, jsx_runtime_1.jsx)(status_1.Status, Object.assign({}, status)) }))] }), description && (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { className: styles_module_scss_1.default.description, children: description })] }), actions] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.body, children: [mode === 'aside' && open && (0, jsx_runtime_1.jsx)("aside", { className: styles_module_scss_1.default.sidebar, children: menu }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.main, contentClassName), children: content })] })] }));
+}

package/dist/cjs/components/TreeNavigation/helper-components/ConditionalPopover/ConditionalPopover.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+type ConditionalPopoverProps = {
+    isOpen: boolean;
+    onOpenChange: (value: boolean) => void;
+    tip: ReactNode;
+    withPopover?: boolean;
+    children: ReactNode;
+};
+export declare function ConditionalPopover({ tip, withPopover, isOpen, onOpenChange, children }: ConditionalPopoverProps): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};

package/dist/cjs/components/TreeNavigation/helper-components/ConditionalPopover/ConditionalPopover.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConditionalPopover = ConditionalPopover;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const popover_1 = require("@snack-uikit/popover");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ConditionalPopover({ tip, withPopover, isOpen, onOpenChange, children }) {
+    if (withPopover) {
+        return ((0, jsx_runtime_1.jsx)(popover_1.Popover, { className: styles_module_scss_1.default.popover, open: isOpen, onOpenChange: () => {
+                if (!open)
+                    onOpenChange(false);
+            }, tip: tip, trigger: 'click', placement: 'bottom-start', children: children }));
+    }
+    return children;
+}

package/dist/cjs/components/TreeNavigation/helper-components/ConditionalPopover/styles.module.css

@@ -0,0 +1,6 @@
+.popover{
+  max-height:80%;
+}
+.popover > div{
+  overflow:auto;
+}

package/dist/cjs/components/TreeNavigation/helper-components/Menu/Menu.d.ts

@@ -0,0 +1,9 @@
+import { TreeNodeProps } from '@snack-uikit/tree';
+type MenuProps = {
+    menuTitle?: string;
+    menuItems: TreeNodeProps[];
+    enableShrinkMenuButton?: boolean;
+    withDefaultOpenedMenuList?: boolean;
+};
+export declare function Menu({ menuTitle, menuItems, enableShrinkMenuButton, withDefaultOpenedMenuList }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/TreeNavigation/helper-components/Menu/Menu.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = Menu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_icons_1 = require("@cloud-ru/uikit-product-icons");
+const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const button_1 = require("@snack-uikit/button");
+const tree_1 = require("@snack-uikit/tree");
+const typography_1 = require("@snack-uikit/typography");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_1 = require("./utils");
+function Menu({ menuTitle, menuItems, enableShrinkMenuButton = true, withDefaultOpenedMenuList }) {
+    const { t } = (0, uikit_product_locale_1.useLocale)('PageLayout');
+    const allExpandedNodes = (0, react_1.useMemo)(() => (0, utils_1.getExpandedNodes)(menuItems), [menuItems]);
+    const [expandedNodes, setExpandedNodes] = (0, react_1.useState)(withDefaultOpenedMenuList ? allExpandedNodes : []);
+    const isExpanded = expandedNodes.length > 0;
+    const handleExpandAll = () => setExpandedNodes((0, utils_1.getExpandedNodes)(menuItems));
+    const handleCollapseAll = () => setExpandedNodes([]);
+    const showSubheader = Boolean(menuTitle || enableShrinkMenuButton);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.sidebar, children: [showSubheader && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.subheader, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleM, { children: menuTitle }), enableShrinkMenuButton && ((0, jsx_runtime_1.jsx)(button_1.ButtonSimple, { label: isExpanded ? t('TreeNavigation.collapseAll') : t('TreeNavigation.expandAll'), icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.HorizontalMenuCloseSVG, {}), onClick: isExpanded ? handleCollapseAll : handleExpandAll }))] })), (0, jsx_runtime_1.jsx)(tree_1.Tree, { data: menuItems, selectionMode: 'single', expandedNodes: expandedNodes, onExpand: setExpandedNodes })] }));
+}

package/dist/cjs/components/TreeNavigation/helper-components/Menu/styles.module.css

@@ -0,0 +1,12 @@
+.sidebar{
+  min-width:292px;
+  display:flex;
+  flex-direction:column;
+  gap:12px;
+}
+
+.subheader{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+}

package/dist/cjs/components/TreeNavigation/helper-components/Menu/utils.d.ts

@@ -0,0 +1,7 @@
+import { TreeNodeProps } from '@snack-uikit/tree';
+/**
+ * Рекурсивно собирает все ID узлов дерева для их разворачивания
+ * @param nodes - Массив узлов дерева
+ * @returns Массив ID всех узлов (включая вложенные)
+ */
+export declare const getExpandedNodes: (nodes: TreeNodeProps[]) => string[];

package/dist/cjs/components/TreeNavigation/helper-components/Menu/utils.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getExpandedNodes = void 0;
+/**
+ * Рекурсивно собирает все ID узлов дерева для их разворачивания
+ * @param nodes - Массив узлов дерева
+ * @returns Массив ID всех узлов (включая вложенные)
+ */
+const getExpandedNodes = (nodes) => {
+    if (!nodes || nodes.length === 0) {
+        return [];
+    }
+    const ids = [];
+    nodes.forEach(el => {
+        const children = el.nested ? (0, exports.getExpandedNodes)(el.nested) : [];
+        ids.push(el.id, ...children);
+    });
+    return ids;
+};
+exports.getExpandedNodes = getExpandedNodes;

package/dist/cjs/components/TreeNavigation/helper-components/index.d.ts

@@ -0,0 +1,2 @@
+export { Menu } from './Menu/Menu';
+export { ConditionalPopover } from './ConditionalPopover/ConditionalPopover';

package/dist/cjs/components/TreeNavigation/helper-components/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConditionalPopover = exports.Menu = void 0;
+var Menu_1 = require("./Menu/Menu");
+Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return Menu_1.Menu; } });
+var ConditionalPopover_1 = require("./ConditionalPopover/ConditionalPopover");
+Object.defineProperty(exports, "ConditionalPopover", { enumerable: true, get: function () { return ConditionalPopover_1.ConditionalPopover; } });

package/dist/cjs/components/TreeNavigation/index.d.ts

@@ -0,0 +1 @@
+export * from './TreeNavigation';

package/dist/cjs/components/TreeNavigation/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TreeNavigation"), exports);

package/dist/cjs/components/TreeNavigation/styles.module.css

@@ -0,0 +1,82 @@
+.root{
+  display:flex;
+  flex-direction:column;
+  height:100%;
+  width:100%;
+}
+
+.header{
+  width:100%;
+  display:flex;
+  justify-content:space-between;
+  align-items:flex-start;
+  gap:40px;
+  padding:8px 24px;
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-bottom:1px solid var(--sys-neutral-decor-default, #dde0ea);
+  box-sizing:border-box;
+}
+
+.description{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.body{
+  display:flex;
+  gap:16px;
+  padding:0 24px;
+  box-sizing:border-box;
+  width:100%;
+}
+
+.sidebar{
+  border-radius:12px;
+  padding:16px;
+  height:-moz-max-content;
+  height:max-content;
+  background:var(--sys-neutral-background1-level, #fdfdfd);
+}
+
+.main{
+  padding-top:16px;
+  width:100%;
+  box-sizing:border-box;
+}
+
+.titleWrapper{
+  display:flex;
+  align-items:center;
+  flex-wrap:wrap;
+  -moz-column-gap:16px;
+       column-gap:16px;
+  row-gap:8px;
+}
+
+.titleInner{
+  display:flex;
+  gap:8px;
+}
+
+.title{
+  box-sizing:border-box;
+  max-width:100%;
+  margin:0;
+  padding:0;
+  overflow-wrap:break-word;
+}
+
+.innerElement{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  height:var(--sans-title-l-line-height, 28px);
+}
+
+.icon{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  width:24px;
+  height:24px;
+  flex-shrink:0;
+}

package/dist/cjs/components/index.d.ts

@@ -4,3 +4,4 @@ export * from './PageLoading';
 export * from './PageServices';
 export * from './DefaultSubHeader';
 export * from './PageSidebar';
+export * from './TreeNavigation';

package/dist/cjs/components/index.js

@@ -20,3 +20,4 @@ __exportStar(require("./PageLoading"), exports);
 __exportStar(require("./PageServices"), exports);
 __exportStar(require("./DefaultSubHeader"), exports);
 __exportStar(require("./PageSidebar"), exports);
+__exportStar(require("./TreeNavigation"), exports);

package/dist/esm/components/TreeNavigation/TreeNavigation.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+import { StatusProps } from '@snack-uikit/status';
+import { TreeNodeProps } from '@snack-uikit/tree';
+export type TreeNavigationProps = {
+    header: {
+        /** Текст заголовка */
+        title: string;
+        /** Иконка */
+        icon?: ReactNode;
+        /** Текст описания */
+        description?: string;
+        /** Статус (цвет, иконка и т.п.) – любой тип, который принимает ваш <Status/> */
+        status?: StatusProps;
+        /** Раздел для действий */
+        actions?: ReactNode;
+    };
+    menu: {
+        /** Заголовок меню */
+        menuTitle?: string;
+        /** Данные для дерева меню */
+        items: TreeNodeProps[];
+        /** Управляемый режим: если передан, меню открывается как popover. */
+        isMenuOpen?: boolean;
+        /** Колбэк, вызываемый при попытке изменить состояние меню.
+         *  В контролируемом режиме обязателен, в неконтролируемом – опционален.
+         */
+        onMenuToggle?: (open: boolean) => void;
+        /** Открывать меню по умолчанию */
+        defaultMenuOpened?: boolean;
+        /** Позляет отключить кнопку "Свернуть все"*/
+        enableShrinkMenuButton?: boolean;
+        /** Открывать пункты меню по умолчанию */
+        withDefaultOpenedMenuList?: boolean;
+    };
+    /** Контентная часть страницы */
+    content: ReactNode;
+    /** Вариант отображения */
+    mode: 'popover' | 'aside';
+    /** Класс для контейнера контентной части */
+    contentClassName?: string;
+};
+export declare function TreeNavigation({ header: { title, icon, description, status, actions }, menu: { menuTitle, items, enableShrinkMenuButton, withDefaultOpenedMenuList, isMenuOpen, defaultMenuOpened, onMenuToggle, }, content, mode, contentClassName, }: TreeNavigationProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/TreeNavigation/TreeNavigation.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useMemo } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { BurgerSVG, CloseSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { ButtonSimple } from '@snack-uikit/button';
+import { Status } from '@snack-uikit/status';
+import { Typography } from '@snack-uikit/typography';
+import { ConditionalPopover, Menu } from './helper-components';
+import styles from './styles.module.css';
+export function TreeNavigation({ header: { title, icon, description, status, actions }, menu: { menuTitle, items, enableShrinkMenuButton, withDefaultOpenedMenuList, isMenuOpen, defaultMenuOpened, onMenuToggle, }, content, mode, contentClassName, }) {
+    const [open, setOpen] = useUncontrolledProp(isMenuOpen, defaultMenuOpened, onMenuToggle);
+    const { t } = useLocale('PageLayout');
+    const menu = useMemo(() => (_jsx(Menu, { menuItems: items, menuTitle: menuTitle, enableShrinkMenuButton: enableShrinkMenuButton, withDefaultOpenedMenuList: withDefaultOpenedMenuList })), [items, menuTitle, enableShrinkMenuButton, withDefaultOpenedMenuList]);
+    return (_jsxs("div", { className: styles.root, children: [_jsxs("div", { className: styles.header, children: [_jsxs("div", { className: styles.titleWrapper, children: [_jsxs("div", { className: styles.titleInner, children: [_jsx(ConditionalPopover, { isOpen: Boolean(open), onOpenChange: setOpen, tip: menu, withPopover: mode === 'popover', children: _jsx("div", { className: styles.innerElement, children: _jsx(ButtonSimple, { size: 'xs', "aria-label": open ? t('TreeNavigation.closeMenu') : t('TreeNavigation.openMenu'), icon: open ? _jsx(CloseSVG, {}) : _jsx(BurgerSVG, {}), onClick: () => setOpen(!open) }) }) }), icon && (_jsx("div", { className: styles.innerElement, children: _jsx("div", { className: styles.icon, children: icon }) })), _jsx(Typography.SansTitleL, { className: styles.title, children: title }), status && (_jsx("div", { className: styles.innerElement, children: _jsx(Status, Object.assign({}, status)) }))] }), description && _jsx(Typography.SansBodyS, { className: styles.description, children: description })] }), actions] }), _jsxs("div", { className: styles.body, children: [mode === 'aside' && open && _jsx("aside", { className: styles.sidebar, children: menu }), _jsx("div", { className: cn(styles.main, contentClassName), children: content })] })] }));
+}

package/dist/esm/components/TreeNavigation/helper-components/ConditionalPopover/ConditionalPopover.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+type ConditionalPopoverProps = {
+    isOpen: boolean;
+    onOpenChange: (value: boolean) => void;
+    tip: ReactNode;
+    withPopover?: boolean;
+    children: ReactNode;
+};
+export declare function ConditionalPopover({ tip, withPopover, isOpen, onOpenChange, children }: ConditionalPopoverProps): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};

package/dist/esm/components/TreeNavigation/helper-components/ConditionalPopover/ConditionalPopover.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover } from '@snack-uikit/popover';
+import styles from './styles.module.css';
+export function ConditionalPopover({ tip, withPopover, isOpen, onOpenChange, children }) {
+    if (withPopover) {
+        return (_jsx(Popover, { className: styles.popover, open: isOpen, onOpenChange: () => {
+                if (!open)
+                    onOpenChange(false);
+            }, tip: tip, trigger: 'click', placement: 'bottom-start', children: children }));
+    }
+    return children;
+}

package/dist/esm/components/TreeNavigation/helper-components/ConditionalPopover/styles.module.css

@@ -0,0 +1,6 @@
+.popover{
+  max-height:80%;
+}
+.popover > div{
+  overflow:auto;
+}

package/dist/esm/components/TreeNavigation/helper-components/Menu/Menu.d.ts

@@ -0,0 +1,9 @@
+import { TreeNodeProps } from '@snack-uikit/tree';
+type MenuProps = {
+    menuTitle?: string;
+    menuItems: TreeNodeProps[];
+    enableShrinkMenuButton?: boolean;
+    withDefaultOpenedMenuList?: boolean;
+};
+export declare function Menu({ menuTitle, menuItems, enableShrinkMenuButton, withDefaultOpenedMenuList }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/TreeNavigation/helper-components/Menu/Menu.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { HorizontalMenuCloseSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { ButtonSimple } from '@snack-uikit/button';
+import { Tree } from '@snack-uikit/tree';
+import { Typography } from '@snack-uikit/typography';
+import styles from './styles.module.css';
+import { getExpandedNodes } from './utils';
+export function Menu({ menuTitle, menuItems, enableShrinkMenuButton = true, withDefaultOpenedMenuList }) {
+    const { t } = useLocale('PageLayout');
+    const allExpandedNodes = useMemo(() => getExpandedNodes(menuItems), [menuItems]);
+    const [expandedNodes, setExpandedNodes] = useState(withDefaultOpenedMenuList ? allExpandedNodes : []);
+    const isExpanded = expandedNodes.length > 0;
+    const handleExpandAll = () => setExpandedNodes(getExpandedNodes(menuItems));
+    const handleCollapseAll = () => setExpandedNodes([]);
+    const showSubheader = Boolean(menuTitle || enableShrinkMenuButton);
+    return (_jsxs("div", { className: styles.sidebar, children: [showSubheader && (_jsxs("div", { className: styles.subheader, children: [_jsx(Typography.SansTitleM, { children: menuTitle }), enableShrinkMenuButton && (_jsx(ButtonSimple, { label: isExpanded ? t('TreeNavigation.collapseAll') : t('TreeNavigation.expandAll'), icon: _jsx(HorizontalMenuCloseSVG, {}), onClick: isExpanded ? handleCollapseAll : handleExpandAll }))] })), _jsx(Tree, { data: menuItems, selectionMode: 'single', expandedNodes: expandedNodes, onExpand: setExpandedNodes })] }));
+}

package/dist/esm/components/TreeNavigation/helper-components/Menu/styles.module.css

@@ -0,0 +1,12 @@
+.sidebar{
+  min-width:292px;
+  display:flex;
+  flex-direction:column;
+  gap:12px;
+}
+
+.subheader{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+}

package/dist/esm/components/TreeNavigation/helper-components/Menu/utils.d.ts

@@ -0,0 +1,7 @@
+import { TreeNodeProps } from '@snack-uikit/tree';
+/**
+ * Рекурсивно собирает все ID узлов дерева для их разворачивания
+ * @param nodes - Массив узлов дерева
+ * @returns Массив ID всех узлов (включая вложенные)
+ */
+export declare const getExpandedNodes: (nodes: TreeNodeProps[]) => string[];

package/dist/esm/components/TreeNavigation/helper-components/Menu/utils.js

@@ -0,0 +1,16 @@
+/**
+ * Рекурсивно собирает все ID узлов дерева для их разворачивания
+ * @param nodes - Массив узлов дерева
+ * @returns Массив ID всех узлов (включая вложенные)
+ */
+export const getExpandedNodes = (nodes) => {
+    if (!nodes || nodes.length === 0) {
+        return [];
+    }
+    const ids = [];
+    nodes.forEach(el => {
+        const children = el.nested ? getExpandedNodes(el.nested) : [];
+        ids.push(el.id, ...children);
+    });
+    return ids;
+};

package/dist/esm/components/TreeNavigation/helper-components/index.d.ts

@@ -0,0 +1,2 @@
+export { Menu } from './Menu/Menu';
+export { ConditionalPopover } from './ConditionalPopover/ConditionalPopover';

package/dist/esm/components/TreeNavigation/helper-components/index.js

@@ -0,0 +1,2 @@
+export { Menu } from './Menu/Menu';
+export { ConditionalPopover } from './ConditionalPopover/ConditionalPopover';

package/dist/esm/components/TreeNavigation/index.d.ts

@@ -0,0 +1 @@
+export * from './TreeNavigation';

package/dist/esm/components/TreeNavigation/index.js

@@ -0,0 +1 @@
+export * from './TreeNavigation';

package/dist/esm/components/TreeNavigation/styles.module.css

@@ -0,0 +1,82 @@
+.root{
+  display:flex;
+  flex-direction:column;
+  height:100%;
+  width:100%;
+}
+
+.header{
+  width:100%;
+  display:flex;
+  justify-content:space-between;
+  align-items:flex-start;
+  gap:40px;
+  padding:8px 24px;
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-bottom:1px solid var(--sys-neutral-decor-default, #dde0ea);
+  box-sizing:border-box;
+}
+
+.description{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.body{
+  display:flex;
+  gap:16px;
+  padding:0 24px;
+  box-sizing:border-box;
+  width:100%;
+}
+
+.sidebar{
+  border-radius:12px;
+  padding:16px;
+  height:-moz-max-content;
+  height:max-content;
+  background:var(--sys-neutral-background1-level, #fdfdfd);
+}
+
+.main{
+  padding-top:16px;
+  width:100%;
+  box-sizing:border-box;
+}
+
+.titleWrapper{
+  display:flex;
+  align-items:center;
+  flex-wrap:wrap;
+  -moz-column-gap:16px;
+       column-gap:16px;
+  row-gap:8px;
+}
+
+.titleInner{
+  display:flex;
+  gap:8px;
+}
+
+.title{
+  box-sizing:border-box;
+  max-width:100%;
+  margin:0;
+  padding:0;
+  overflow-wrap:break-word;
+}
+
+.innerElement{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  height:var(--sans-title-l-line-height, 28px);
+}
+
+.icon{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  width:24px;
+  height:24px;
+  flex-shrink:0;
+}

package/dist/esm/components/index.d.ts

@@ -4,3 +4,4 @@ export * from './PageLoading';
 export * from './PageServices';
 export * from './DefaultSubHeader';
 export * from './PageSidebar';
+export * from './TreeNavigation';

package/dist/esm/components/index.js

@@ -4,3 +4,4 @@ export * from './PageLoading';
 export * from './PageServices';
 export * from './DefaultSubHeader';
 export * from './PageSidebar';
+export * from './TreeNavigation';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-page-layout",
   "title": "Page Layout",
-  "version": "0.21.6",
+  "version": "0.22.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -43,8 +43,11 @@
     "@snack-uikit/icon-predefined": "0.7.3",
     "@snack-uikit/list": "0.26.0",
     "@snack-uikit/loaders": "0.9.4",
+    "@snack-uikit/popover": "0.10.3",
     "@snack-uikit/search": "0.12.13",
+    "@snack-uikit/status": "0.10.4",
     "@snack-uikit/tooltip": "0.16.2",
+    "@snack-uikit/tree": "0.9.30",
     "@snack-uikit/truncate-string": "0.6.9",
     "@snack-uikit/typography": "0.8.4",
     "@snack-uikit/utils": "3.7.0",
@@ -54,5 +57,5 @@
   "peerDependencies": {
     "@cloud-ru/uikit-product-locale": "*"
   },
-  "gitHead": "ce69097516055b330a0b05da5e29ac5b66e56284"
+  "gitHead": "0c7a2375e56560d287c95b9ef47c5b424cb004d6"
 }

package/src/components/TreeNavigation/TreeNavigation.tsx

@@ -0,0 +1,128 @@
+import cn from 'classnames';
+import { ReactNode, useMemo } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { BurgerSVG, CloseSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { ButtonSimple } from '@snack-uikit/button';
+import { Status, StatusProps } from '@snack-uikit/status';
+import { TreeNodeProps } from '@snack-uikit/tree';
+import { Typography } from '@snack-uikit/typography';
+
+import { ConditionalPopover, Menu } from './helper-components';
+import styles from './styles.module.scss';
+
+export type TreeNavigationProps = {
+  header: {
+    /** Текст заголовка */
+    title: string;
+    /** Иконка */
+    icon?: ReactNode;
+    /** Текст описания */
+    description?: string;
+    /** Статус (цвет, иконка и т.п.) – любой тип, который принимает ваш <Status/> */
+    status?: StatusProps;
+    /** Раздел для действий */
+    actions?: ReactNode;
+  };
+  menu: {
+    /** Заголовок меню */
+    menuTitle?: string;
+    /** Данные для дерева меню */
+    items: TreeNodeProps[];
+    /** Управляемый режим: если передан, меню открывается как popover. */
+    isMenuOpen?: boolean;
+    /** Колбэк, вызываемый при попытке изменить состояние меню.
+     *  В контролируемом режиме обязателен, в неконтролируемом – опционален.
+     */
+    onMenuToggle?: (open: boolean) => void;
+    /** Открывать меню по умолчанию */
+    defaultMenuOpened?: boolean;
+    /** Позляет отключить кнопку "Свернуть все"*/
+    enableShrinkMenuButton?: boolean;
+    /** Открывать пункты меню по умолчанию */
+    withDefaultOpenedMenuList?: boolean;
+  };
+  /** Контентная часть страницы */
+  content: ReactNode;
+  /** Вариант отображения */
+  mode: 'popover' | 'aside';
+  /** Класс для контейнера контентной части */
+  contentClassName?: string;
+};
+
+export function TreeNavigation({
+  header: { title, icon, description, status, actions },
+  menu: {
+    menuTitle,
+    items,
+    enableShrinkMenuButton,
+    withDefaultOpenedMenuList,
+    isMenuOpen,
+    defaultMenuOpened,
+    onMenuToggle,
+  },
+  content,
+  mode,
+  contentClassName,
+}: TreeNavigationProps) {
+  const [open, setOpen] = useUncontrolledProp(isMenuOpen, defaultMenuOpened, onMenuToggle);
+  const { t } = useLocale('PageLayout');
+  const menu = useMemo(
+    () => (
+      <Menu
+        menuItems={items}
+        menuTitle={menuTitle}
+        enableShrinkMenuButton={enableShrinkMenuButton}
+        withDefaultOpenedMenuList={withDefaultOpenedMenuList}
+      />
+    ),
+    [items, menuTitle, enableShrinkMenuButton, withDefaultOpenedMenuList],
+  );
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.header}>
+        <div className={styles.titleWrapper}>
+          <div className={styles.titleInner}>
+            <ConditionalPopover
+              isOpen={Boolean(open)}
+              onOpenChange={setOpen}
+              tip={menu}
+              withPopover={mode === 'popover'}
+            >
+              <div className={styles.innerElement}>
+                <ButtonSimple
+                  size='xs'
+                  aria-label={open ? t('TreeNavigation.closeMenu') : t('TreeNavigation.openMenu')}
+                  icon={open ? <CloseSVG /> : <BurgerSVG />}
+                  onClick={() => setOpen(!open)}
+                />
+              </div>
+            </ConditionalPopover>
+            {icon && (
+              <div className={styles.innerElement}>
+                <div className={styles.icon}>{icon}</div>
+              </div>
+            )}
+            <Typography.SansTitleL className={styles.title}>{title}</Typography.SansTitleL>
+
+            {status && (
+              <div className={styles.innerElement}>
+                <Status {...status} />
+              </div>
+            )}
+          </div>
+          {description && <Typography.SansBodyS className={styles.description}>{description}</Typography.SansBodyS>}
+        </div>
+
+        {actions}
+      </div>
+
+      <div className={styles.body}>
+        {mode === 'aside' && open && <aside className={styles.sidebar}>{menu}</aside>}
+        <div className={cn(styles.main, contentClassName)}>{content}</div>
+      </div>
+    </div>
+  );
+}

package/src/components/TreeNavigation/helper-components/ConditionalPopover/ConditionalPopover.tsx

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+
+import { Popover } from '@snack-uikit/popover';
+
+import styles from './styles.module.scss';
+
+type ConditionalPopoverProps = {
+  isOpen: boolean;
+  onOpenChange: (value: boolean) => void;
+  tip: ReactNode;
+  withPopover?: boolean;
+  children: ReactNode;
+};
+
+export function ConditionalPopover({ tip, withPopover, isOpen, onOpenChange, children }: ConditionalPopoverProps) {
+  if (withPopover) {
+    return (
+      <Popover
+        className={styles.popover}
+        open={isOpen}
+        onOpenChange={() => {
+          if (!open) onOpenChange(false);
+        }}
+        tip={tip}
+        trigger={'click'}
+        placement={'bottom-start'}
+      >
+        {children}
+      </Popover>
+    );
+  }
+
+  return children;
+}

package/src/components/TreeNavigation/helper-components/ConditionalPopover/styles.module.scss

@@ -0,0 +1,7 @@
+.popover {
+  max-height: 80%;
+
+  & > div {
+    overflow: auto;
+  }
+}

package/src/components/TreeNavigation/helper-components/Menu/Menu.tsx

@@ -0,0 +1,50 @@
+import { useMemo, useState } from 'react';
+
+import { HorizontalMenuCloseSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { ButtonSimple } from '@snack-uikit/button';
+import { Tree, TreeNodeProps } from '@snack-uikit/tree';
+import { Typography } from '@snack-uikit/typography';
+
+import styles from './styles.module.scss';
+import { getExpandedNodes } from './utils';
+
+type MenuProps = {
+  menuTitle?: string;
+  menuItems: TreeNodeProps[];
+  enableShrinkMenuButton?: boolean;
+  withDefaultOpenedMenuList?: boolean;
+};
+
+export function Menu({ menuTitle, menuItems, enableShrinkMenuButton = true, withDefaultOpenedMenuList }: MenuProps) {
+  const { t } = useLocale('PageLayout');
+  const allExpandedNodes = useMemo(() => getExpandedNodes(menuItems), [menuItems]);
+
+  const [expandedNodes, setExpandedNodes] = useState<string[]>(withDefaultOpenedMenuList ? allExpandedNodes : []);
+
+  const isExpanded = expandedNodes.length > 0;
+
+  const handleExpandAll = () => setExpandedNodes(getExpandedNodes(menuItems));
+  const handleCollapseAll = () => setExpandedNodes([]);
+
+  const showSubheader = Boolean(menuTitle || enableShrinkMenuButton);
+
+  return (
+    <div className={styles.sidebar}>
+      {showSubheader && (
+        <div className={styles.subheader}>
+          <Typography.SansTitleM>{menuTitle}</Typography.SansTitleM>
+          {enableShrinkMenuButton && (
+            <ButtonSimple
+              label={isExpanded ? t('TreeNavigation.collapseAll') : t('TreeNavigation.expandAll')}
+              icon={<HorizontalMenuCloseSVG />}
+              onClick={isExpanded ? handleCollapseAll : handleExpandAll}
+            />
+          )}
+        </div>
+      )}
+
+      <Tree data={menuItems} selectionMode='single' expandedNodes={expandedNodes} onExpand={setExpandedNodes} />
+    </div>
+  );
+}

package/src/components/TreeNavigation/helper-components/Menu/styles.module.scss

@@ -0,0 +1,14 @@
+$sidebar-width: 292px; // Общая ширина 324пкс из-за 16пкс paddings
+
+.sidebar {
+  min-width: $sidebar-width;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.subheader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}

package/src/components/TreeNavigation/helper-components/Menu/utils.ts

@@ -0,0 +1,22 @@
+import { TreeNodeProps } from '@snack-uikit/tree';
+
+/**
+ * Рекурсивно собирает все ID узлов дерева для их разворачивания
+ * @param nodes - Массив узлов дерева
+ * @returns Массив ID всех узлов (включая вложенные)
+ */
+export const getExpandedNodes = (nodes: TreeNodeProps[]): string[] => {
+  if (!nodes || nodes.length === 0) {
+    return [];
+  }
+
+  const ids: string[] = [];
+
+  nodes.forEach(el => {
+    const children = el.nested ? getExpandedNodes(el.nested) : [];
+
+    ids.push(el.id, ...children);
+  });
+
+  return ids;
+};

package/src/components/TreeNavigation/helper-components/index.ts

@@ -0,0 +1,2 @@
+export { Menu } from './Menu/Menu';
+export { ConditionalPopover } from './ConditionalPopover/ConditionalPopover';

package/src/components/TreeNavigation/index.ts

@@ -0,0 +1 @@
+export * from './TreeNavigation';

package/src/components/TreeNavigation/styles.module.scss

@@ -0,0 +1,86 @@
+@import '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+$page-padding: 24px;
+$main-content-padding: 8px;
+$content-gap: 16px;
+
+.root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 40px;
+  padding: $main-content-padding $page-padding;
+  background-color: $sys-neutral-background;
+  border-bottom: 1px solid $sys-neutral-decor-default;
+  box-sizing: border-box;
+}
+
+.description {
+  color: $sys-neutral-text-support;
+}
+
+.body {
+  display: flex;
+  gap: $content-gap;
+  padding: 0 $page-padding;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.sidebar {
+  border-radius: 12px;
+  padding: $content-gap;
+  height: max-content;
+  background: $sys-neutral-background1-level;
+}
+
+.main {
+  padding-top: $content-gap;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.titleWrapper {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  column-gap: $content-gap;
+  row-gap: $main-content-padding;
+}
+
+.titleInner {
+  display: flex;
+  gap: $main-content-padding;
+}
+
+.title {
+  box-sizing: border-box;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  overflow-wrap: break-word;
+}
+
+.innerElement {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: $sans-title-l-line-height;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}

package/src/components/index.ts

@@ -4,3 +4,4 @@ export * from './PageLoading';
 export * from './PageServices';
 export * from './DefaultSubHeader';
 export * from './PageSidebar';
+export * from './TreeNavigation';