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

package/dist/cjs/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/cjs/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';
+import { SidebarItemType } from '../../types';
+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/cjs/components/PageSidebar/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,2 @@
+import { TreeNavigationProps } from './types';
+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/cjs/components/TreeNavigation/TreeNavigation.js

@@ -0,0 +1,27 @@
+"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 button_1 = require("@cloud-ru/ds-button");
+const product_1 = require("@cloud-ru/ds-icons/interface/product");
+const status_1 = require("@cloud-ru/ds-status");
+const typography_1 = require("@cloud-ru/ds-typography");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const locale_1 = require("../../locale");
+const helperComponents_1 = require("./helperComponents");
+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, selected, onSelect, }, content, mode, contentClassName, }) {
+    const [open, setOpen] = (0, utils_1.useUncontrolledProp)(isMenuOpen, defaultMenuOpened, onMenuToggle);
+    const { t } = locale_1.pageLayoutLocale.useTranslations();
+    // В режиме `fixed` aside-меню всегда раскрыто, переключатель неактуален.
+    const isFixed = mode === constants_1.TREE_NAVIGATION_MODE.Fixed;
+    const isAsideOpen = isFixed || (mode === constants_1.TREE_NAVIGATION_MODE.Aside && Boolean(open));
+    const menu = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(helperComponents_1.Menu, { menuItems: items, menuTitle: menuTitle, enableShrinkMenuButton: enableShrinkMenuButton, withDefaultOpenedMenuList: withDefaultOpenedMenuList, selected: selected, onSelect: onSelect })), [onSelect, selected, 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: [!isFixed && ((0, jsx_runtime_1.jsx)(helperComponents_1.ConditionalPopover, { isOpen: Boolean(open), onOpenChange: setOpen, tip: menu, withPopover: mode === constants_1.TREE_NAVIGATION_MODE.Popover, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.innerElement, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Simple, appearance: button_1.APPEARANCE.Neutral, size: button_1.SIZE.S, "aria-label": open ? t('TreeNavigation.closeMenu') : t('TreeNavigation.openMenu'), icon: open ? (0, jsx_runtime_1.jsx)(product_1.CloseSVG, {}) : (0, jsx_runtime_1.jsx)(product_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, { variant: typography_1.VARIANT.title, size: typography_1.SIZE.l, 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, { ...status }) }))] }), description && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.body, size: typography_1.SIZE.s, className: styles_module_scss_1.default.description, children: description }))] }), actions && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.headerActions, children: actions })] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.body, children: [isAsideOpen && (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/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/cjs/components/TreeNavigation/helperComponents/ConditionalPopover/ConditionalPopover.js

@@ -0,0 +1,15 @@
+"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("@cloud-ru/ds-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: nextOpen => onOpenChange(nextOpen), content: tip, trigger: popover_1.TRIGGER.Click, placement: popover_1.PLACEMENT.BottomStart, children: children }));
+    }
+    return children;
+}

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

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

package/dist/cjs/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/cjs/components/TreeNavigation/helperComponents/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 button_1 = require("@cloud-ru/ds-button");
+const product_1 = require("@cloud-ru/ds-icons/interface/product");
+const tree_1 = require("@cloud-ru/ds-tree");
+const typography_1 = require("@cloud-ru/ds-typography");
+const react_1 = require("react");
+const locale_1 = require("../../../../locale");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_1 = require("./utils");
+function Menu({ menuTitle, menuItems, enableShrinkMenuButton = true, withDefaultOpenedMenuList, selected, onSelect, }) {
+    const { t } = locale_1.pageLayoutLocale.useTranslations();
+    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, { variant: typography_1.VARIANT.title, size: typography_1.SIZE.m, children: menuTitle }), enableShrinkMenuButton && ((0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Simple, appearance: button_1.APPEARANCE.Neutral, label: isExpanded ? t('TreeNavigation.collapseAll') : t('TreeNavigation.expandAll'), icon: isExpanded ? (0, jsx_runtime_1.jsx)(product_1.HorizontalMenuCloseSVG, {}) : (0, jsx_runtime_1.jsx)(product_1.HorizontalMenuOpenSVG, {}), onClick: isExpanded ? handleCollapseAll : handleExpandAll }))] })), (0, jsx_runtime_1.jsx)(tree_1.Tree, { data: menuItems, selectionMode: 'single', expandedNodes: expandedNodes, onExpand: setExpandedNodes, selected: selected, onSelect: onSelect })] }));
+}

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

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

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

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

@@ -0,0 +1,18 @@
+"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("./Menu/Menu"), exports);
+__exportStar(require("./ConditionalPopover/ConditionalPopover"), exports);

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

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

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

@@ -0,0 +1,18 @@
+"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);
+__exportStar(require("./types"), exports);

package/dist/cjs/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/cjs/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';
+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/cjs/components/TreeNavigation/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

package/dist/cjs/components/index.js

@@ -0,0 +1,25 @@
+"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("./Headline"), exports);
+__exportStar(require("./PageLoading"), exports);
+__exportStar(require("./DefaultSubtitle"), exports);
+__exportStar(require("./PageCatalog"), exports);
+__exportStar(require("./PageSidebar"), exports);
+__exportStar(require("./TreeNavigation"), exports);
+__exportStar(require("./PageForm"), exports);
+__exportStar(require("./PageServices"), exports);
+__exportStar(require("./Actions"), exports);

package/dist/cjs/constants.d.ts

@@ -0,0 +1,57 @@
+/** id глобального хост-контейнера single-spa, по которому PageServices считает высоту */
+export declare const GLOBAL_CONTAINER_ID = "single-spa-wrapper";
+/** Варианты основной кнопки футера PageForm. Лейбл резолвится через locale `PageForm.<variant>`. */
+export declare const BUTTON_PRIMARY_VARIANT: {
+    readonly Continue: "continue";
+    readonly Create: "create";
+    readonly Save: "save";
+    readonly Rent: "rent";
+    readonly Send: "send";
+    readonly Restore: "restore";
+    readonly Add: "add";
+};
+/** Варианты вторичной кнопки футера PageForm. */
+export declare const BUTTON_SECONDARY_VARIANT: {
+    readonly Cancel: "cancel";
+    readonly Back: "back";
+};
+/**
+ * Режим отображения меню TreeNavigation.
+ * `fixed` соответствует Figma-состоянию `treeMenu=fixed` (постоянно раскрытый aside).
+ */
+export declare const TREE_NAVIGATION_MODE: {
+    readonly Popover: "popover";
+    readonly Aside: "aside";
+    readonly Fixed: "fixed";
+};
+/** Тип элемента сайдбара с вложенностью. */
+export declare const SIDEBAR_ITEM_TYPE: {
+    readonly Collapse: "collapse";
+    readonly Group: "group";
+};
+/** Тип шапки сайдбара. */
+export declare const SIDEBAR_HEADER_TYPE: {
+    readonly Title: "title";
+    readonly Back: "back";
+};
+/** data-test-id mobile-триггеров, которые компонент ставит сам (публичны для stories и e2e). */
+export declare const TEST_IDS: {
+    readonly mobileActions: {
+        readonly root: "page-layout__mobile-actions";
+        readonly trigger: "page-layout__mobile-actions-trigger";
+    };
+    readonly sidebarSelect: {
+        readonly trigger: "page-layout__sidebar-select-trigger";
+    };
+    readonly sidebarSearch: {
+        readonly trigger: "page-layout__sidebar-search-trigger";
+    };
+    readonly sidebarToggle: {
+        readonly collapse: "page-layout__sidebar-collapse";
+        readonly expand: "page-layout__sidebar-expand";
+    };
+    readonly pageForm: {
+        readonly priceSummaryTrigger: "page-form__price-summary-trigger";
+        readonly priceSummarySheet: "page-form__price-summary-sheet";
+    };
+};

package/dist/cjs/constants.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TEST_IDS = exports.SIDEBAR_HEADER_TYPE = exports.SIDEBAR_ITEM_TYPE = exports.TREE_NAVIGATION_MODE = exports.BUTTON_SECONDARY_VARIANT = exports.BUTTON_PRIMARY_VARIANT = exports.GLOBAL_CONTAINER_ID = void 0;
+/** id глобального хост-контейнера single-spa, по которому PageServices считает высоту */
+exports.GLOBAL_CONTAINER_ID = 'single-spa-wrapper';
+/** Варианты основной кнопки футера PageForm. Лейбл резолвится через locale `PageForm.<variant>`. */
+exports.BUTTON_PRIMARY_VARIANT = {
+    Continue: 'continue',
+    Create: 'create',
+    Save: 'save',
+    Rent: 'rent',
+    Send: 'send',
+    Restore: 'restore',
+    Add: 'add',
+};
+/** Варианты вторичной кнопки футера PageForm. */
+exports.BUTTON_SECONDARY_VARIANT = {
+    Cancel: 'cancel',
+    Back: 'back',
+};
+/**
+ * Режим отображения меню TreeNavigation.
+ * `fixed` соответствует Figma-состоянию `treeMenu=fixed` (постоянно раскрытый aside).
+ */
+exports.TREE_NAVIGATION_MODE = {
+    Popover: 'popover',
+    Aside: 'aside',
+    Fixed: 'fixed',
+};
+/** Тип элемента сайдбара с вложенностью. */
+exports.SIDEBAR_ITEM_TYPE = {
+    Collapse: 'collapse',
+    Group: 'group',
+};
+/** Тип шапки сайдбара. */
+exports.SIDEBAR_HEADER_TYPE = {
+    Title: 'title',
+    Back: 'back',
+};
+/** data-test-id mobile-триггеров, которые компонент ставит сам (публичны для stories и e2e). */
+exports.TEST_IDS = {
+    mobileActions: { root: 'page-layout__mobile-actions', trigger: 'page-layout__mobile-actions-trigger' },
+    sidebarSelect: { trigger: 'page-layout__sidebar-select-trigger' },
+    sidebarSearch: { trigger: 'page-layout__sidebar-search-trigger' },
+    sidebarToggle: {
+        collapse: 'page-layout__sidebar-collapse',
+        expand: 'page-layout__sidebar-expand',
+    },
+    pageForm: {
+        priceSummaryTrigger: 'page-form__price-summary-trigger',
+        priceSummarySheet: 'page-form__price-summary-sheet',
+    },
+};

package/dist/cjs/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './constants';
+export * from './locale';
+export * from './types';