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

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

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarSearchToggle = SidebarSearchToggle;
+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 system_1 = require("@cloud-ru/ds-icons/interface/system");
+const tooltip_1 = require("@cloud-ru/ds-tooltip");
+const constants_1 = require("../../../../constants");
+const locale_1 = require("../../../../locale");
+const contexts_1 = require("../../contexts");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function SidebarSearchToggle() {
+    const { searchOpened, setSearchValue, setSearchOpened } = (0, contexts_1.useSearchContext)();
+    const { t } = locale_1.pageLayoutLocale.useTranslations();
+    const toggle = () => {
+        setSearchValue('');
+        setSearchOpened(prev => !prev);
+    };
+    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: searchOpened ? t('PageSidebar.closeSearch') : t('PageSidebar.openSearch'), triggerClassName: styles_module_scss_1.default.trigger, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: button_1.VIEW.Function, appearance: button_1.APPEARANCE.Neutral, size: button_1.SIZE.M, "data-test-id": constants_1.TEST_IDS.sidebarSearch.trigger, onClick: toggle, icon: searchOpened ? (0, jsx_runtime_1.jsx)(product_1.VerticalMenuRightCloseSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.SearchSVG, {}) }) }));
+}

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSearchToggle/index.d.ts

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

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSearchToggle/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("./SidebarSearchToggle"), exports);

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSearchToggle/styles.module.css

@@ -0,0 +1,4 @@
+.trigger{
+  display:flex;
+  align-items:center;
+}

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSelect/SidebarSelect.d.ts

@@ -0,0 +1,20 @@
+import { DroplistProps } from '@cloud-ru/ds-list';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { SidebarItem } from './types';
+export type SidebarSelectProps = WithSupportProps<{
+    items: SidebarItem[];
+    footerItems?: SidebarItem[];
+    selected?: string | number;
+    onSelect?(id: string | number): void;
+    className?: string;
+    collapse?: DroplistProps['collapse'];
+    hasSearch?: boolean;
+}>;
+/**
+ * Мобильный select-сайдбар. Форсирует `mobile`-раскладку через `withLayoutType`, чтобы адаптивный
+ * `Droplist` всегда открывал `BottomSheet` (мобильный паттерн сайдбара), независимо от провайдера.
+ */
+export declare const SidebarSelect: {
+    (props: SidebarSelectProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSelect/SidebarSelect.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarSelect = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const adaptive_1 = require("@cloud-ru/ds-adaptive");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const list_1 = require("@cloud-ru/ds-list");
+const truncate_string_1 = require("@cloud-ru/ds-truncate-string");
+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 hooks_1 = require("./hooks");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function SidebarSelectBase({ className, items, footerItems = [], selected, onSelect, collapse, hasSearch, ...otherProps }) {
+    const [searchValue, setSearchValue] = (0, react_1.useState)('');
+    const { filteredList, searchCollapseState } = (0, hooks_1.useSearchFilter)(items, searchValue);
+    const list = (0, hooks_1.useItemsContent)(filteredList, onSelect);
+    const footerList = (0, hooks_1.useItemsContent)(footerItems);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const selectedItem = (0, hooks_1.useSelectedItem)(items, selected);
+    const selectedCollapsedState = (0, react_1.useMemo)(() => {
+        if (selectedItem.item) {
+            return { defaultValue: selectedItem.path };
+        }
+    }, [selectedItem.item, selectedItem.path]);
+    const handleSelect = (value) => {
+        if (value) {
+            onSelect?.(value);
+        }
+        setIsOpen(false);
+    };
+    const allItems = (0, react_1.useMemo)(() => [...list, ...footerList], [list, footerList]);
+    const shouldShowSearch = hasSearch ?? (allItems.length > 15 || Boolean(searchValue));
+    return ((0, jsx_runtime_1.jsx)(list_1.Droplist, { size: 'm', selection: { mode: 'single', value: selected, onChange: handleSelect }, items: allItems, open: isOpen, onOpenChange: setIsOpen, collapse: searchValue ? searchCollapseState : collapse || selectedCollapsedState, search: shouldShowSearch ? { value: searchValue, onChange: setSearchValue } : undefined, scrollToSelectedItem: true, children: (0, jsx_runtime_1.jsxs)("div", { role: 'button', tabIndex: 0, className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), "data-test-id": constants_1.TEST_IDS.sidebarSelect.trigger, ...(0, utils_1.extractSupportProps)(otherProps), children: [(0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { className: styles_module_scss_1.default.triggerText, text: selectedItem.item?.label || '' }), selectedItem.item?.afterContent, isOpen ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {})] }) }));
+}
+/**
+ * Мобильный select-сайдбар. Форсирует `mobile`-раскладку через `withLayoutType`, чтобы адаптивный
+ * `Droplist` всегда открывал `BottomSheet` (мобильный паттерн сайдбара), независимо от провайдера.
+ */
+exports.SidebarSelect = (0, adaptive_1.withLayoutType)(SidebarSelectBase, adaptive_1.LAYOUT_TYPE.Mobile);

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSelect/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useItemsContent } from './useItemsContent';
+export { useSelectedItem } from './useSelectedItem';
+export { useSearchFilter } from './useSearchFilter';

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSelect/hooks/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearchFilter = exports.useSelectedItem = exports.useItemsContent = void 0;
+var useItemsContent_1 = require("./useItemsContent");
+Object.defineProperty(exports, "useItemsContent", { enumerable: true, get: function () { return useItemsContent_1.useItemsContent; } });
+var useSelectedItem_1 = require("./useSelectedItem");
+Object.defineProperty(exports, "useSelectedItem", { enumerable: true, get: function () { return useSelectedItem_1.useSelectedItem; } });
+var useSearchFilter_1 = require("./useSearchFilter");
+Object.defineProperty(exports, "useSearchFilter", { enumerable: true, get: function () { return useSearchFilter_1.useSearchFilter; } });

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSelect/hooks/useItemsContent.d.ts

@@ -0,0 +1,3 @@
+import { DroplistProps } from '@cloud-ru/ds-list';
+import { SidebarItem } from '../types';
+export declare function useItemsContent(items: SidebarItem[], onSelect?: (id: string | number) => void): DroplistProps['items'];

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSelect/hooks/useItemsContent.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemsContent = useItemsContent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tooltip_1 = require("@cloud-ru/ds-tooltip");
+const react_1 = require("react");
+const getItemsContent = (items, onSelect) => items.map(({ id, label, onClick, afterContent, beforeContent, 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);
+        if (!items.length) {
+            onSelect?.(id);
+        }
+    };
+    if (type === 'group') {
+        return {
+            ...rest,
+            label,
+            type: 'group',
+            items: getItemsContent(newItems || [], onSelect),
+        };
+    }
+    const newItem = {
+        id,
+        content: {
+            label: label,
+        },
+        itemWrapRender: (item) => {
+            if (!disabledReason) {
+                return href ? ((0, jsx_runtime_1.jsx)("a", { href: href, onClick: clickHandler, children: item })) : (item);
+            }
+            return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { hoverDelayOpen: 500, open: disabledReason ? undefined : false, tip: disabledReason, placement: disabledReasonPlacement, children: item }));
+        },
+        onClick: href ? undefined : clickHandler,
+        afterContent,
+        beforeContent,
+        disabled: Boolean(disabledReason),
+    };
+    if (newItems?.length) {
+        return {
+            ...newItem,
+            type: 'collapse',
+            items: getItemsContent(newItems || [], onSelect),
+        };
+    }
+    return newItem;
+});
+function useItemsContent(items, onSelect) {
+    return (0, react_1.useMemo)(() => getItemsContent(items, onSelect), [items, onSelect]);
+}

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSelect/hooks/useSearchFilter.d.ts

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

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSelect/hooks/useSearchFilter.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearchFilter = void 0;
+const react_1 = require("react");
+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 getItemIds = (list) => list.reduce((result, el) => {
+    result.push(el.id);
+    if ('items' in el && el.items?.length) {
+        const childItems = getItemIds(el.items);
+        result.push(...childItems);
+    }
+    return result;
+}, []);
+const useSearchFilter = (list, searchValue) => {
+    const filteredList = (0, react_1.useMemo)(() => filterService(list, searchValue), [list, searchValue]);
+    const searchCollapseState = (0, react_1.useMemo)(() => ({ value: getItemIds(filteredList) }), [filteredList]);
+    return {
+        filteredList,
+        searchCollapseState,
+    };
+};
+exports.useSearchFilter = useSearchFilter;

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSelect/hooks/useSelectedItem.d.ts

@@ -0,0 +1,7 @@
+import { SidebarItem } from '../types';
+type SelectedItem = {
+    item: SidebarItem | undefined;
+    path: (string | number)[];
+};
+export declare function useSelectedItem(items: SidebarItem[], selected: string | number | undefined): SelectedItem;
+export {};

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSelect/hooks/useSelectedItem.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelectedItem = useSelectedItem;
+const react_1 = require("react");
+function findSelectedItem(items, selected) {
+    return items.reduce((result, el) => {
+        if (el.id === selected) {
+            result.path.push(el.id);
+            return { ...result, item: el };
+        }
+        if ('items' in el && el.items?.length) {
+            const child = findSelectedItem(el.items, selected);
+            if (child.item) {
+                result.path.push(el.id, ...child.path);
+                return { ...result, item: child.item };
+            }
+        }
+        return result;
+    }, { item: undefined, path: [] });
+}
+function useSelectedItem(items, selected) {
+    return (0, react_1.useMemo)(() => findSelectedItem(items, selected), [items, selected]);
+}

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSelect/index.d.ts

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

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSelect/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("./SidebarSelect"), exports);

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSelect/styles.module.css

@@ -0,0 +1,19 @@
+.wrapper{
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+  cursor:pointer;
+  display:flex;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  height:var(--sn-primitive-dimension-48, 48px);
+  padding:0 var(--sn-primitive-dimension-12, 12px);
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+
+.triggerText{
+  flex-grow:1;
+}

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSelect/types.d.ts

@@ -0,0 +1 @@
+export type { SidebarItem } from '../../types';

package/dist/cjs/components/PageSidebar/helperComponents/SidebarSelect/types.js

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

package/dist/cjs/components/PageSidebar/helperComponents/SidebarTitle/SidebarTitle.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { Icon } from '../../types';
+export type SidebarTitleProps = {
+    title: string;
+    icon: Icon;
+    className?: string;
+    afterContent?: ReactNode;
+};
+export declare function SidebarTitle({ title, className, icon, afterContent }: SidebarTitleProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/PageSidebar/helperComponents/SidebarTitle/SidebarTitle.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.SidebarTitle = SidebarTitle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icon_predefined_1 = require("@cloud-ru/ds-icon-predefined");
+const truncate_string_1 = require("@cloud-ru/ds-truncate-string");
+const typography_1 = require("@cloud-ru/ds-typography");
+const classnames_1 = __importDefault(require("classnames"));
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function SidebarTitle({ title, className, icon, afterContent }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, styles_module_scss_1.default.wrapper), children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.icon, children: (0, jsx_runtime_1.jsx)(icon_predefined_1.IconPredefined, { appearance: icon_predefined_1.APPEARANCE.Neutral, size: icon_predefined_1.SIZE.M, shape: 'squared', icon: icon }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.title, children: (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: typography_1.VARIANT.label, size: typography_1.SIZE.l, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { text: title }) }) }), afterContent] }));
+}

package/dist/cjs/components/PageSidebar/helperComponents/SidebarTitle/index.d.ts

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

package/dist/cjs/components/PageSidebar/helperComponents/SidebarTitle/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("./SidebarTitle"), exports);

package/dist/cjs/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/cjs/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';
+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/cjs/components/PageSidebar/hooks/useItemsCreator.js

@@ -0,0 +1,106 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTopPinnedContent = useTopPinnedContent;
+exports.useItemsContent = useItemsContent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const list_1 = require("@cloud-ru/ds-list");
+const tooltip_1 = require("@cloud-ru/ds-tooltip");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const constants_1 = require("../../../constants");
+const locale_1 = require("../../../locale");
+const contexts_1 = require("../contexts");
+const SidebarSearch_1 = require("../helperComponents/SidebarSearch");
+const SidebarSearchToggle_1 = require("../helperComponents/SidebarSearchToggle");
+const SidebarTitle_1 = require("../helperComponents/SidebarTitle");
+const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
+const EMPTY_LIST = [];
+function useTopPinnedContent(header, hasSearch) {
+    const { t } = locale_1.pageLayoutLocale.useTranslations();
+    const { searchOpened } = (0, contexts_1.useSearchContext)();
+    return (0, react_1.useMemo)(() => {
+        switch (header?.type) {
+            case constants_1.SIDEBAR_HEADER_TYPE.Title:
+                return {
+                    pinTop: [
+                        {
+                            // Кнопка поиска живёт в `content` рядом с заголовком/полем, а не в `afterContent`:
+                            // отдельный слот `afterContent` центрируется по-своему и ломает вертикальное
+                            // выравнивание кнопки с полем.
+                            content: ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.pinnedHeaderSlot, hasSearch && searchOpened && styles_module_scss_1.default.pinnedHeaderSlotSearch), children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.pinnedHeaderContent, children: 
+                                        // При открытом поиске строка заголовка заменяется полем поиска (без наложения).
+                                        hasSearch && searchOpened ? ((0, jsx_runtime_1.jsx)(SidebarSearch_1.SidebarSearch, {})) : ((0, jsx_runtime_1.jsx)(SidebarTitle_1.SidebarTitle, { title: header.label, icon: header.icon, afterContent: header.afterContent })) }), hasSearch && (0, jsx_runtime_1.jsx)(SidebarSearchToggle_1.SidebarSearchToggle, {})] })),
+                            inactive: true,
+                        },
+                    ],
+                };
+            case constants_1.SIDEBAR_HEADER_TYPE.Back:
+                return {
+                    pinTop: [
+                        {
+                            content: { label: `${t('PageSidebar.backTo')} ${header.label}` },
+                            beforeContent: (0, jsx_runtime_1.jsx)(system_1.ChevronLeftSVG, {}),
+                            onClick: header.href ? undefined : header.onClick,
+                            itemWrapRender: header.href
+                                ? item => ((0, jsx_runtime_1.jsx)("a", { href: header.href, onClick: header.onClick, children: item }))
+                                : undefined,
+                        },
+                    ],
+                };
+            default:
+                return { pinTop: EMPTY_LIST };
+        }
+    }, [header, t, hasSearch, searchOpened]);
+}
+function useItemsContent(items, onSelect) {
+    return (0, react_1.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 === constants_1.SIDEBAR_ITEM_TYPE.Group) {
+                return {
+                    ...rest,
+                    label,
+                    type: list_1.ITEM_TYPE.Group,
+                    items: getItemsContent(newItems || [], onSelect),
+                };
+            }
+            const newItem = {
+                id,
+                content: { label: label },
+                itemWrapRender: (item) => {
+                    if (!disabledReason) {
+                        return href ? ((0, jsx_runtime_1.jsx)("a", { href: href, onClick: clickHandler, children: item })) : (item);
+                    }
+                    return ((0, jsx_runtime_1.jsx)(tooltip_1.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: list_1.ITEM_TYPE.Collapse,
+                    items: getItemsContent(newItems || [], onSelect),
+                };
+            }
+            return newItem;
+        });
+        return getItemsContent(items, onSelect);
+    }, [items, onSelect]);
+}

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

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

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearchFilter = void 0;
+const react_1 = require("react");
+const contexts_1 = require("../contexts");
+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;
+}, []);
+const useSearchFilter = (list) => {
+    const { searchValue, setSearchValue, searchOpened } = (0, contexts_1.useSearchContext)();
+    const filteredList = (0, react_1.useMemo)(() => filterService(list, searchValue), [list, searchValue]);
+    const searchCollapseState = (0, react_1.useMemo)(() => ({ value: getSidebarItemIds(filteredList) }), [filteredList]);
+    return {
+        searchOpened,
+        searchValue,
+        setSearchValue,
+        filteredList,
+        searchCollapseState,
+    };
+};
+exports.useSearchFilter = useSearchFilter;

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

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

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

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