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

package/dist/esm/components/PageSidebar/PageSidebar.js

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
 import { useCallback, useState } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
-import { VerticalMenuCloseSVG, VerticalMenuOpenSVG } from '@sbercloud/uikit-product-icons';
+import { VerticalMenuCloseSVG, VerticalMenuOpenSVG } from '@cloud-ru/uikit-product-icons';
 import { ButtonElevated } from '@snack-uikit/button';
 import { List } from '@snack-uikit/list';
 import { extractSupportProps } from '@snack-uikit/utils';

package/dist/esm/components/PageSidebar/helperComponents/SidebarSearch/SidebarSearch.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import { useLocale } from '@sbercloud/uikit-product-locale';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
 import { Search } from '@snack-uikit/search';
 import { useSearchContext } from '../../contexts';
 import styles from './styles.module.css';

package/dist/esm/components/PageSidebar/helperComponents/SidebarSearchToggle/SidebarSearchToggle.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { SearchSVG, VerticalMenuRightCloseSVG } from '@sbercloud/uikit-product-icons';
-import { useLocale } from '@sbercloud/uikit-product-locale';
+import { SearchSVG, VerticalMenuRightCloseSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
 import { ButtonFunction } from '@snack-uikit/button';
 import { Tooltip } from '@snack-uikit/tooltip';
 import { useSearchContext } from '../../contexts';

package/dist/esm/components/PageSidebar/hooks/useItemsCreator.js

@@ -11,8 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { ChevronLeftSVG } from '@sbercloud/uikit-product-icons';
-import { useLocale } from '@sbercloud/uikit-product-locale';
+import { ChevronLeftSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
 import { Tooltip } from '@snack-uikit/tooltip';
 import { SidebarSearchToggle } from '../helperComponents/SidebarSearchToggle';
 import { SidebarTitle } from '../helperComponents/SidebarTitle';

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.5",
+  "version": "0.22.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -30,22 +30,24 @@
     "name": "Akhremenko Grigorii",
     "url": "https://github.com/AGrigorii"
   },
-  "contributors": [],
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {},
   "dependencies": {
-    "@cloud-ru/uikit-product-copy-line": "0.7.65",
-    "@cloud-ru/uikit-product-icons": "15.1.3",
-    "@cloud-ru/uikit-product-utils": "7.0.2",
+    "@cloud-ru/uikit-product-copy-line": "0.7.66",
+    "@cloud-ru/uikit-product-icons": "15.1.4",
+    "@cloud-ru/uikit-product-utils": "7.0.3",
     "@snack-uikit/button": "0.19.13",
     "@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",
@@ -55,5 +57,5 @@
   "peerDependencies": {
     "@cloud-ru/uikit-product-locale": "*"
   },
-  "gitHead": "bf479ecf7238ef20b78f20acaef439efa535d1a1"
+  "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';