@cloud-ru/ds-uikit-product-page-layout 1.0.0

package/dist/esm/components/PageSidebar/helperComponents/SidebarTitle/styles.module.css

@@ -0,0 +1,18 @@
+.wrapper{
+  display:flex;
+  flex-direction:row;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+}
+
+.icon{
+  flex-grow:0;
+  flex-shrink:0;
+}
+
+.title{
+  overflow:hidden;
+  flex-grow:1;
+  flex-shrink:1;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}

package/dist/esm/components/PageSidebar/hooks/useItemsCreator.d.ts

@@ -0,0 +1,8 @@
+import { ItemProps } from '@cloud-ru/ds-list';
+import { ReactNode } from 'react';
+import { HeaderProps, SidebarItem } from '../types.js';
+export declare function useTopPinnedContent(header?: HeaderProps, hasSearch?: boolean): {
+    title?: ReactNode;
+    pinTop: ItemProps[];
+};
+export declare function useItemsContent(items: SidebarItem[], onSelect?: (id: string | number) => void): ItemProps[];

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

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeftSVG } from '@cloud-ru/ds-icons/interface/system';
+import { ITEM_TYPE } from '@cloud-ru/ds-list';
+import { Tooltip } from '@cloud-ru/ds-tooltip';
+import cn from 'classnames';
+import { useMemo } from 'react';
+import { SIDEBAR_HEADER_TYPE, SIDEBAR_ITEM_TYPE } from '../../../constants.js';
+import { pageLayoutLocale } from '../../../locale/index.js';
+import { useSearchContext } from '../contexts.js';
+import { SidebarSearch } from '../helperComponents/SidebarSearch/index.js';
+import { SidebarSearchToggle } from '../helperComponents/SidebarSearchToggle/index.js';
+import { SidebarTitle } from '../helperComponents/SidebarTitle/index.js';
+import styles from '../styles.module.css';
+const EMPTY_LIST = [];
+export function useTopPinnedContent(header, hasSearch) {
+    const { t } = pageLayoutLocale.useTranslations();
+    const { searchOpened } = useSearchContext();
+    return useMemo(() => {
+        switch (header?.type) {
+            case SIDEBAR_HEADER_TYPE.Title:
+                return {
+                    pinTop: [
+                        {
+                            // Кнопка поиска живёт в `content` рядом с заголовком/полем, а не в `afterContent`:
+                            // отдельный слот `afterContent` центрируется по-своему и ломает вертикальное
+                            // выравнивание кнопки с полем.
+                            content: (_jsxs("div", { className: cn(styles.pinnedHeaderSlot, hasSearch && searchOpened && styles.pinnedHeaderSlotSearch), children: [_jsx("div", { className: styles.pinnedHeaderContent, children: 
+                                        // При открытом поиске строка заголовка заменяется полем поиска (без наложения).
+                                        hasSearch && searchOpened ? (_jsx(SidebarSearch, {})) : (_jsx(SidebarTitle, { title: header.label, icon: header.icon, afterContent: header.afterContent })) }), hasSearch && _jsx(SidebarSearchToggle, {})] })),
+                            inactive: true,
+                        },
+                    ],
+                };
+            case SIDEBAR_HEADER_TYPE.Back:
+                return {
+                    pinTop: [
+                        {
+                            content: { label: `${t('PageSidebar.backTo')} ${header.label}` },
+                            beforeContent: _jsx(ChevronLeftSVG, {}),
+                            onClick: header.href ? undefined : header.onClick,
+                            itemWrapRender: header.href
+                                ? item => (_jsx("a", { href: header.href, onClick: header.onClick, children: item }))
+                                : undefined,
+                        },
+                    ],
+                };
+            default:
+                return { pinTop: EMPTY_LIST };
+        }
+    }, [header, t, hasSearch, searchOpened]);
+}
+export function useItemsContent(items, onSelect) {
+    return useMemo(() => {
+        const getItemsContent = (items, onSelect) => items.map(({ id, label, beforeContent, onClick, afterContent, disabledReason, disabledReasonPlacement, ...rest }) => {
+            const href = 'href' in rest ? rest.href : undefined;
+            const newItems = 'items' in rest ? rest.items : undefined;
+            const type = 'type' in rest ? rest.type : undefined;
+            const clickHandler = (event) => {
+                if (href && (event?.metaKey || event?.button === 1)) {
+                    return;
+                }
+                event.preventDefault();
+                onClick?.(event);
+                onSelect?.(id);
+            };
+            if (type === SIDEBAR_ITEM_TYPE.Group) {
+                return {
+                    ...rest,
+                    label,
+                    type: ITEM_TYPE.Group,
+                    items: getItemsContent(newItems || [], onSelect),
+                };
+            }
+            const newItem = {
+                id,
+                content: { label: label },
+                itemWrapRender: (item) => {
+                    if (!disabledReason) {
+                        return href ? (_jsx("a", { href: href, onClick: clickHandler, children: item })) : (item);
+                    }
+                    return (_jsx(Tooltip, { hoverDelayOpen: 500, open: disabledReason ? undefined : false, tip: disabledReason, placement: disabledReasonPlacement, children: item }));
+                },
+                onClick: href ? undefined : clickHandler,
+                beforeContent,
+                afterContent,
+                disabled: Boolean(disabledReason),
+            };
+            if (newItems?.length) {
+                return {
+                    ...newItem,
+                    type: ITEM_TYPE.Collapse,
+                    items: getItemsContent(newItems || [], onSelect),
+                };
+            }
+            return newItem;
+        });
+        return getItemsContent(items, onSelect);
+    }, [items, onSelect]);
+}

package/dist/esm/components/PageSidebar/hooks/useSearchFilter.d.ts

@@ -0,0 +1,10 @@
+import { SidebarItem } from '../types.js';
+export declare const useSearchFilter: (list: SidebarItem[]) => {
+    searchOpened: boolean;
+    searchValue: string;
+    setSearchValue: (searchValue: string) => void;
+    filteredList: SidebarItem[];
+    searchCollapseState: {
+        value: (string | number)[];
+    };
+};

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

@@ -0,0 +1,41 @@
+import { useMemo } from 'react';
+import { useSearchContext } from '../contexts.js';
+const matchString = (value, searchValue) => value.trim().toLowerCase().includes(searchValue.trim().toLowerCase());
+const filterService = (servicesList, searchValue) => {
+    if (!searchValue)
+        return servicesList;
+    return servicesList.reduce((result, service) => {
+        if (service.label && matchString(service.label, searchValue)) {
+            result.push(service);
+            return result;
+        }
+        if ('items' in service && service.items?.length) {
+            const items = filterService(service.items, searchValue);
+            if (items.length) {
+                result.push({ ...service, items });
+            }
+            return result;
+        }
+        return result;
+    }, []);
+};
+const getSidebarItemIds = (list) => list.reduce((result, el) => {
+    result.push(el.id);
+    if ('items' in el && el.items?.length) {
+        const childItems = getSidebarItemIds(el.items);
+        result.push(...childItems);
+    }
+    return result;
+}, []);
+export const useSearchFilter = (list) => {
+    const { searchValue, setSearchValue, searchOpened } = useSearchContext();
+    const filteredList = useMemo(() => filterService(list, searchValue), [list, searchValue]);
+    const searchCollapseState = useMemo(() => ({ value: getSidebarItemIds(filteredList) }), [filteredList]);
+    return {
+        searchOpened,
+        searchValue,
+        setSearchValue,
+        filteredList,
+        searchCollapseState,
+    };
+};

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

@@ -0,0 +1,3 @@
+export * from './PageSidebar.js';
+export * from './helperComponents/SidebarSelect/index.js';
+export * from './types.js';

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

@@ -0,0 +1,3 @@
+export * from './PageSidebar.js';
+export * from './helperComponents/SidebarSelect/index.js';
+export * from './types.js';

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

@@ -0,0 +1,92 @@
+.wrapper{
+  width:256px;
+}
+.wrapper[data-collapsed]{
+  width:0;
+}
+.wrapper .body{
+  position:absolute;
+  display:flex;
+  width:256px;
+  height:100%;
+  transition:left 0.15s 0.35s ease-in-out;
+}
+.wrapper .body[data-hover-off]{
+  pointer-events:none;
+  transition:left 0.15s ease-in-out;
+}
+.wrapper .body[data-collapsed]{
+  left:-256px;
+}
+.wrapper .body[data-collapsed]::before{
+  content:" ";
+  position:absolute;
+  right:calc(-1 * var(--sn-primitive-dimension-4, 4px));
+  width:var(--sn-primitive-dimension-4, 4px);
+  height:100%;
+}
+.wrapper .body[data-collapsed]:hover{
+  left:0;
+  transition:left 0.15s ease-in-out;
+}
+.wrapper .body[data-collapsed]:hover::before{
+  right:calc(-4 * var(--sn-primitive-dimension-4, 4px));
+  width:calc(4 * var(--sn-primitive-dimension-4, 4px));
+}
+.wrapper .content{
+  overflow:hidden;
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  box-sizing:border-box;
+  padding:var(--sn-primitive-dimension-4, 4px) 0;
+  border-right:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+}
+.wrapper .content[data-collapsed]{
+  margin:var(--sn-primitive-dimension-4, 4px);
+  border-right:none;
+  box-shadow:var(--sn-boxShadow-elevation-level3, var(--sn-theme-effect-shadow-level3-layer1-positionX, 0) var(--sn-theme-effect-shadow-level3-layer1-positionY, 0) var(--sn-theme-effect-shadow-level3-layer1-blur, 8px) var(--sn-theme-effect-shadow-level3-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level3-layer2-positionX, 0) var(--sn-theme-effect-shadow-level3-layer2-positionY, 8px) var(--sn-theme-effect-shadow-level3-layer2-blur, 16px) var(--sn-theme-effect-shadow-level3-layer2-speed, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
+}
+.wrapper .list{
+  position:relative;
+  overflow-y:auto;
+  display:flex;
+  flex-direction:column-reverse;
+  flex-grow:1;
+  flex-shrink:1;
+}
+.wrapper .toggler{
+  display:flex;
+  flex-grow:0;
+  flex-shrink:0;
+  justify-content:end;
+  padding:0 var(--sn-primitive-dimension-4, 4px);
+}
+.wrapper .expandButton{
+  position:fixed;
+  bottom:var(--sn-primitive-dimension-8, 8px);
+  left:var(--sn-primitive-dimension-8, 8px);
+}
+
+.button{
+  background-color:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
+}
+
+.pinnedHeaderSlot{
+  display:flex;
+  flex-direction:row;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  min-height:calc(var(--sn-primitive-dimension-44, 44px) - var(--sn-primitive-strokeWeight-strokeRegular, 1px));
+}
+
+.pinnedHeaderContent{
+  display:flex;
+  flex-grow:1;
+  min-width:0;
+}
+
+.pinnedHeaderSlotSearch{
+  padding-inline:var(--sn-primitive-dimension-4, 4px);
+}

package/dist/esm/components/PageSidebar/types.d.ts

@@ -0,0 +1,42 @@
+import { IconPredefinedProps } from '@cloud-ru/ds-icon-predefined';
+import { TooltipProps } from '@cloud-ru/ds-tooltip';
+import { AnchorHTMLAttributes, MouseEvent, MouseEventHandler, ReactNode } from 'react';
+import { SIDEBAR_HEADER_TYPE } from '../../constants.js';
+import { SidebarItemType } from '../../types.js';
+export type SidebarItemBase = {
+    id: string | number;
+    label: string;
+    'data-test-id'?: string;
+    onClick?(e: MouseEvent<HTMLElement>): void;
+    afterContent?: ReactNode;
+    disabledReason?: ReactNode;
+    disabledReasonPlacement?: TooltipProps['placement'];
+    beforeContent?: ReactNode;
+};
+export type SidebarItemWithHref = SidebarItemBase & {
+    href: string;
+};
+export type SidebarItemWithItems = SidebarItemBase & {
+    /** @default collapse */
+    type?: SidebarItemType;
+    divider?: boolean;
+    items?: SidebarItem[];
+};
+export type SidebarItem = SidebarItemWithHref | SidebarItemWithItems;
+export type Icon = IconPredefinedProps['icon'];
+export type HeaderProps = {
+    type: typeof SIDEBAR_HEADER_TYPE.Title;
+    label: string;
+    icon: Icon;
+    afterContent?: ReactNode;
+} | {
+    type: typeof SIDEBAR_HEADER_TYPE.Back;
+    label: string;
+    href?: string;
+    onClick?: MouseEventHandler;
+};
+export type Documentation = {
+    href?: string;
+    onClick?: MouseEventHandler;
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+import { TreeNavigationProps } from './types.js';
+export declare function TreeNavigation({ header: { title, icon, description, status, actions }, menu: { menuTitle, items, enableShrinkMenuButton, withDefaultOpenedMenuList, isMenuOpen, defaultMenuOpened, onMenuToggle, selected, onSelect, }, content, mode, contentClassName, }: TreeNavigationProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { APPEARANCE, Button, SIZE, VIEW } from '@cloud-ru/ds-button';
+import { BurgerSVG, CloseSVG } from '@cloud-ru/ds-icons/interface/product';
+import { Status } from '@cloud-ru/ds-status';
+import { SIZE as TYPOGRAPHY_SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+import { useUncontrolledProp } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useMemo } from 'react';
+import { TREE_NAVIGATION_MODE } from '../../constants.js';
+import { pageLayoutLocale } from '../../locale/index.js';
+import { ConditionalPopover, Menu } from './helperComponents/index.js';
+import styles from './styles.module.css';
+export function TreeNavigation({ header: { title, icon, description, status, actions }, menu: { menuTitle, items, enableShrinkMenuButton, withDefaultOpenedMenuList, isMenuOpen, defaultMenuOpened, onMenuToggle, selected, onSelect, }, content, mode, contentClassName, }) {
+    const [open, setOpen] = useUncontrolledProp(isMenuOpen, defaultMenuOpened, onMenuToggle);
+    const { t } = pageLayoutLocale.useTranslations();
+    // В режиме `fixed` aside-меню всегда раскрыто, переключатель неактуален.
+    const isFixed = mode === TREE_NAVIGATION_MODE.Fixed;
+    const isAsideOpen = isFixed || (mode === TREE_NAVIGATION_MODE.Aside && Boolean(open));
+    const menu = useMemo(() => (_jsx(Menu, { menuItems: items, menuTitle: menuTitle, enableShrinkMenuButton: enableShrinkMenuButton, withDefaultOpenedMenuList: withDefaultOpenedMenuList, selected: selected, onSelect: onSelect })), [onSelect, selected, 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: [!isFixed && (_jsx(ConditionalPopover, { isOpen: Boolean(open), onOpenChange: setOpen, tip: menu, withPopover: mode === TREE_NAVIGATION_MODE.Popover, children: _jsx("div", { className: styles.innerElement, children: _jsx(Button, { view: VIEW.Simple, appearance: APPEARANCE.Neutral, size: SIZE.S, "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, { variant: VARIANT.title, size: TYPOGRAPHY_SIZE.l, className: styles.title, children: title }), status && (_jsx("div", { className: styles.innerElement, children: _jsx(Status, { ...status }) }))] }), description && (_jsx(Typography, { variant: VARIANT.body, size: TYPOGRAPHY_SIZE.s, className: styles.description, children: description }))] }), actions && _jsx("div", { className: styles.headerActions, children: actions })] }), _jsxs("div", { className: styles.body, children: [isAsideOpen && _jsx("aside", { className: styles.sidebar, children: menu }), _jsx("div", { className: cn(styles.main, contentClassName), children: content })] })] }));
+}

package/dist/esm/components/TreeNavigation/helperComponents/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/helperComponents/ConditionalPopover/ConditionalPopover.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PLACEMENT, Popover, TRIGGER } from '@cloud-ru/ds-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: nextOpen => onOpenChange(nextOpen), content: tip, trigger: TRIGGER.Click, placement: PLACEMENT.BottomStart, children: children }));
+    }
+    return children;
+}

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

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

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

@@ -0,0 +1,11 @@
+import { TreeNodeId, TreeNodeProps } from '@cloud-ru/ds-tree';
+type MenuProps = {
+    menuTitle?: string;
+    menuItems: TreeNodeProps[];
+    enableShrinkMenuButton?: boolean;
+    withDefaultOpenedMenuList?: boolean;
+    selected?: TreeNodeId;
+    onSelect?(selectedKey: TreeNodeId | undefined, node: TreeNodeProps): void;
+};
+export declare function Menu({ menuTitle, menuItems, enableShrinkMenuButton, withDefaultOpenedMenuList, selected, onSelect, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { APPEARANCE, Button, VIEW } from '@cloud-ru/ds-button';
+import { HorizontalMenuCloseSVG, HorizontalMenuOpenSVG } from '@cloud-ru/ds-icons/interface/product';
+import { Tree } from '@cloud-ru/ds-tree';
+import { SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+import { useMemo, useState } from 'react';
+import { pageLayoutLocale } from '../../../../locale/index.js';
+import styles from './styles.module.css';
+import { getExpandedNodes } from './utils.js';
+export function Menu({ menuTitle, menuItems, enableShrinkMenuButton = true, withDefaultOpenedMenuList, selected, onSelect, }) {
+    const { t } = pageLayoutLocale.useTranslations();
+    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, { variant: VARIANT.title, size: SIZE.m, children: menuTitle }), enableShrinkMenuButton && (_jsx(Button, { view: VIEW.Simple, appearance: APPEARANCE.Neutral, label: isExpanded ? t('TreeNavigation.collapseAll') : t('TreeNavigation.expandAll'), icon: isExpanded ? _jsx(HorizontalMenuCloseSVG, {}) : _jsx(HorizontalMenuOpenSVG, {}), onClick: isExpanded ? handleCollapseAll : handleExpandAll }))] })), _jsx(Tree, { data: menuItems, selectionMode: 'single', expandedNodes: expandedNodes, onExpand: setExpandedNodes, selected: selected, onSelect: onSelect })] }));
+}

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

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

package/dist/esm/components/TreeNavigation/helperComponents/Menu/utils.d.ts

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

package/dist/esm/components/TreeNavigation/helperComponents/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 = 'nested' in el && el.nested ? getExpandedNodes(el.nested) : [];
+        ids.push(el.id, ...children);
+    });
+    return ids;
+};

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

@@ -0,0 +1,2 @@
+export * from './Menu/Menu.js';
+export * from './ConditionalPopover/ConditionalPopover.js';

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

@@ -0,0 +1,2 @@
+export * from './Menu/Menu.js';
+export * from './ConditionalPopover/ConditionalPopover.js';

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

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

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

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

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

@@ -0,0 +1,89 @@
+.root{
+  display:flex;
+  flex-direction:column;
+  width:100%;
+  height:100%;
+}
+
+.header{
+  display:flex;
+  gap:var(--sn-primitive-dimension-40, 40px);
+  align-items:flex-start;
+  justify-content:space-between;
+  box-sizing:border-box;
+  width:100%;
+  padding:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)) var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+  border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+}
+
+.description{
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+
+.body{
+  display:flex;
+  gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
+  box-sizing:border-box;
+  width:100%;
+  padding:0 var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+}
+
+.sidebar{
+  height:-moz-max-content;
+  height:max-content;
+  padding:var(--sn-primitive-dimension-16, 16px);
+  border-radius:var(--sn-brand-anatomy-radius-block-m, var(--sn-primitive-dimension-4, 4px));
+  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+
+.main{
+  box-sizing:border-box;
+  width:100%;
+  padding-top:var(--sn-primitive-dimension-16, 16px);
+}
+
+.titleWrapper{
+  display:flex;
+  flex:1 1 auto;
+  flex-wrap:wrap;
+  gap:var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-16, 16px);
+  align-items:center;
+  min-width:0;
+}
+
+.headerActions{
+  display:flex;
+  flex-shrink:0;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+}
+
+.titleInner{
+  display:flex;
+  gap:var(--sn-primitive-dimension-8, 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(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+}
+
+.icon{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  width:var(--sn-primitive-dimension-24, 24px);
+  height:var(--sn-primitive-dimension-24, 24px);
+}

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

@@ -0,0 +1,46 @@
+import { StatusProps } from '@cloud-ru/ds-status';
+import { TreeNodeId, TreeNodeProps } from '@cloud-ru/ds-tree';
+import { ReactNode } from 'react';
+import { TreeNavigationMode } from '../../types.js';
+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;
+        /** Выбранный элемент меню  */
+        selected?: TreeNodeId;
+        /** Колбэк, вызываемый при попытке изменить состояние селекта. */
+        onSelect?(selectedKey: TreeNodeId | undefined, node: TreeNodeProps): void;
+    };
+    /** Контентная часть страницы */
+    content: ReactNode;
+    /** Вариант отображения */
+    mode: TreeNavigationMode;
+    /** Класс для контейнера контентной части */
+    contentClassName?: string;
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+export * from './Headline/index.js';
+export * from './PageLoading/index.js';
+export * from './DefaultSubtitle/index.js';
+export * from './PageCatalog/index.js';
+export * from './PageSidebar/index.js';
+export * from './TreeNavigation/index.js';
+export * from './PageForm/index.js';
+export * from './PageServices/index.js';
+export * from './Actions/index.js';

package/dist/esm/components/index.js

@@ -0,0 +1,9 @@
+export * from './Headline/index.js';
+export * from './PageLoading/index.js';
+export * from './DefaultSubtitle/index.js';
+export * from './PageCatalog/index.js';
+export * from './PageSidebar/index.js';
+export * from './TreeNavigation/index.js';
+export * from './PageForm/index.js';
+export * from './PageServices/index.js';
+export * from './Actions/index.js';