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

package/dist/esm/components/PageServices/MobilePageServices.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { MobileActions } from '../Actions/index.js';
+import { Headline } from '../Headline/index.js';
+import { SidebarSelect } from '../PageSidebar/index.js';
+import styles from './mobileStyles.module.css';
+export function MobilePageServices({ children, title, actions = [], className, sidebar, slotAfterTitle, subtitle, slotBeforeTitle, maxVisibleActionsItems, ...rest }) {
+    return (_jsxs("div", { className: cn(styles.wrapper, className), ...extractSupportProps(rest), children: [sidebar && _jsx(SidebarSelect, { ...sidebar, className: styles.sidebarSelect }), _jsxs("div", { className: styles.body, children: [_jsx(Headline, { title: title, slotBeforeTitle: slotBeforeTitle, slotAfterTitle: slotAfterTitle, subtitle: subtitle }), actions.length > 0 && _jsx(MobileActions, { items: actions, maxVisibleItems: maxVisibleActionsItems }), _jsx("div", { className: styles.childWrapper, children: children })] })] }));
+}

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

@@ -0,0 +1,14 @@
+import { MobilePageServicesProps } from './MobilePageServices.js';
+import { DesktopPageServicesProps } from './types.js';
+export type PageServicesProps = Omit<DesktopPageServicesProps, 'actions'> & Pick<MobilePageServicesProps, 'actions' | 'maxVisibleActionsItems'>;
+/**
+ * Адаптивный `PageServices`: раскладку берёт из `AdaptiveProvider` (контекст). На `mobile` рендерит
+ * `MobilePageServices` и передаёт `actions` структурированным массивом; на остальных раскладках
+ * оборачивает `actions` в `DesktopActions` и отдаёт `DesktopPageServices` через слот `actions`.
+ * Форс платформы — `withLayoutType` / вложенный `<AdaptiveProvider layoutType=…>`; пропа
+ * `layoutType` у компонента нет.
+ */
+export declare function PageServices({ actions, maxVisibleActionsItems, ...props }: PageServicesProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace PageServices {
+    var displayName: string;
+}

package/dist/esm/components/PageServices/PageServices.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { DesktopActions } from '../Actions/index.js';
+import { DesktopPageServices } from './DesktopPageServices.js';
+import { MobilePageServices } from './MobilePageServices.js';
+/**
+ * Адаптивный `PageServices`: раскладку берёт из `AdaptiveProvider` (контекст). На `mobile` рендерит
+ * `MobilePageServices` и передаёт `actions` структурированным массивом; на остальных раскладках
+ * оборачивает `actions` в `DesktopActions` и отдаёт `DesktopPageServices` через слот `actions`.
+ * Форс платформы — `withLayoutType` / вложенный `<AdaptiveProvider layoutType=…>`; пропа
+ * `layoutType` у компонента нет.
+ */
+export function PageServices({ actions, maxVisibleActionsItems, ...props }) {
+    const { layoutType } = useAdaptiveLayout();
+    if (isMobileLayout(layoutType)) {
+        return _jsx(MobilePageServices, { actions: actions, maxVisibleActionsItems: maxVisibleActionsItems, ...props });
+    }
+    const actionsNode = actions ? _jsx(DesktopActions, { items: actions }) : undefined;
+    return _jsx(DesktopPageServices, { ...props, actions: actionsNode });
+}
+PageServices.displayName = 'PageServices';

package/dist/esm/components/PageServices/hooks.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Высота страницы сервиса, синхронизированная с глобальным контейнером приложения
+ * (`GLOBAL_CONTAINER_ID`) через `ResizeObserver`. При `autoHeight` наблюдение отключается —
+ * страница занимает высоту по контенту.
+ */
+export declare function usePageHeight(autoHeight?: boolean): number;

package/dist/esm/components/PageServices/hooks.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+import { GLOBAL_CONTAINER_ID } from '../../constants.js';
+/**
+ * Высота страницы сервиса, синхронизированная с глобальным контейнером приложения
+ * (`GLOBAL_CONTAINER_ID`) через `ResizeObserver`. При `autoHeight` наблюдение отключается —
+ * страница занимает высоту по контенту.
+ */
+export function usePageHeight(autoHeight) {
+    const [height, setHeight] = useState(0);
+    useEffect(() => {
+        if (autoHeight)
+            return;
+        const container = document.getElementById(GLOBAL_CONTAINER_ID);
+        if (!container)
+            return;
+        const observer = new ResizeObserver(entities => entities.forEach(entity => {
+            if (entity.target === container) {
+                const [{ blockSize }] = entity.contentBoxSize;
+                setHeight(Math.floor(blockSize));
+            }
+        }));
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, [autoHeight]);
+    return height;
+}

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

@@ -0,0 +1,4 @@
+export * from './PageServices.js';
+export * from './DesktopPageServices.js';
+export * from './MobilePageServices.js';
+export * from './types.js';

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

@@ -0,0 +1,4 @@
+export * from './PageServices.js';
+export * from './DesktopPageServices.js';
+export * from './MobilePageServices.js';
+export * from './types.js';

package/dist/esm/components/PageServices/mobileStyles.module.css

@@ -0,0 +1,28 @@
+.wrapper{
+  display:flex;
+  flex-direction:column;
+  box-sizing:border-box;
+  width:100%;
+  min-height:100%;
+}
+
+.sidebarSelect{
+  border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+
+.body{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  gap:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+  box-sizing:border-box;
+  padding:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+}
+
+.childWrapper{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  flex-shrink:1;
+  box-sizing:border-box;
+}

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

@@ -0,0 +1,48 @@
+.wrapper{
+  display:flex;
+  flex-direction:row-reverse;
+  justify-content:flex-end;
+  min-width:100%;
+  height:100%;
+}
+
+.sidebar{
+  position:relative;
+  flex-grow:0;
+  flex-shrink:0;
+  box-sizing:border-box;
+  width:-moz-fit-content;
+  width:fit-content;
+  max-width:256px;
+}
+
+.tempContainer{
+  position:relative;
+  overflow-y:auto;
+  flex-grow:1;
+  flex-shrink:1;
+  box-sizing:border-box;
+  min-width:992px;
+}
+
+.container{
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
+  box-sizing:border-box;
+  min-height:100%;
+  padding:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
+}
+.container[data-limited=true]{
+  max-width:1248px;
+  margin:0 auto;
+}
+
+.childWrapper{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  flex-shrink:1;
+  box-sizing:border-box;
+}

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

@@ -0,0 +1,10 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { PropsWithChildren } from 'react';
+import { HeadlineProps } from '../Headline/index.js';
+import { PageSidebarProps } from '../PageSidebar/index.js';
+export type DesktopPageServicesProps = WithSupportProps<PropsWithChildren<Pick<HeadlineProps, 'title' | 'actions' | 'subtitle' | 'slotAfterTitle' | 'slotBeforeTitle' | 'truncateTitle'> & {
+    className?: string;
+    sidebar?: PageSidebarProps;
+    autoHeight?: boolean;
+    limitContentMaxWidth?: boolean;
+}>>;

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

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

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

@@ -0,0 +1,21 @@
+import { ListProps } from '@cloud-ru/ds-list';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { Documentation, HeaderProps, SidebarItem } from './types.js';
+export type PageSidebarProps = WithSupportProps<{
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChanged?(open: boolean): void;
+    items: SidebarItem[];
+    footerItems?: SidebarItem[];
+    header?: HeaderProps;
+    selected?: string | number;
+    onSelect?(id: string | number): void;
+    className?: string;
+    /** Зарезервировано, в текущей реализации не используется. */
+    documentation?: Documentation;
+    /** Зарезервировано, в текущей реализации не используется. */
+    pageContainerId?: string;
+    hasSearch?: boolean;
+    collapse?: ListProps['collapse'];
+}>;
+export declare function PageSidebar(props: PageSidebarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { APPEARANCE, Button, VIEW } from '@cloud-ru/ds-button';
+import { VerticalMenuCloseSVG, VerticalMenuOpenSVG } from '@cloud-ru/ds-icons/interface/product';
+import { List } from '@cloud-ru/ds-list';
+import { extractSupportProps, useUncontrolledProp } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useCallback, useState } from 'react';
+import { TEST_IDS } from '../../constants.js';
+import { SearchContextProvider } from './contexts.js';
+import { useItemsContent, useTopPinnedContent } from './hooks/useItemsCreator.js';
+import { useSearchFilter } from './hooks/useSearchFilter.js';
+import styles from './styles.module.css';
+function PrivateSideBar({ open: openProp, defaultOpen, onOpenChanged, className, items, footerItems = [], header, selected, onSelect, hasSearch, collapse, 
+// documentation / pageContainerId — зарезервированы, в текущей реализации не используются.
+// Деструктурируем, чтобы не попадали в otherProps и не ломали extractSupportProps.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+documentation, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+pageContainerId, ...otherProps }) {
+    const [open, setOpenState] = useUncontrolledProp(openProp, defaultOpen || true, onOpenChanged);
+    const [hoverOff, setHoverOff] = useState(false);
+    const toggleOpen = useCallback((newValue = !open) => {
+        if (newValue === open) {
+            return;
+        }
+        if (!newValue) {
+            /* кнопка сворачивания внутри сайдбара, а он раскрывается по ховеру — после клика
+            на время отключаем ховер, чтобы дать ему свернуться */
+            setHoverOff(true);
+            setTimeout(() => setHoverOff(false), 300);
+        }
+        setOpenState(newValue);
+    }, [open, setOpenState]);
+    const { filteredList, searchValue, searchCollapseState } = useSearchFilter(items);
+    const list = useItemsContent(filteredList, onSelect);
+    const footerList = useItemsContent(footerItems);
+    const { pinTop } = useTopPinnedContent(header, hasSearch);
+    return (_jsxs("div", { ...extractSupportProps(otherProps), "data-collapsed": !open || undefined, className: cn(styles.wrapper, className), children: [!open && (_jsx(Button, { view: VIEW.Elevated, appearance: APPEARANCE.Neutral, className: styles.expandButton, "data-test-id": TEST_IDS.sidebarToggle.expand, icon: _jsx(VerticalMenuOpenSVG, {}), onClick: () => toggleOpen(true) })), _jsx("div", { "data-collapsed": !open || undefined, "data-hover-off": hoverOff || undefined, "data-has-search": hasSearch || undefined, className: styles.body, children: _jsxs("div", { className: styles.content, "data-collapsed": !open || undefined, children: [_jsx("div", { className: styles.list, children: _jsx(List, { selection: { mode: 'single', value: selected }, size: 'm', items: list, pinTop: pinTop, pinBottom: footerList, scroll: true, scrollToSelectedItem: true, collapse: searchValue ? searchCollapseState : collapse, 
+                                // Пустой список при активном поиске — это «ничего не найдено» (noResultsState),
+                                // а не «нет данных» (noDataState). Флаг переключает empty-state в @cloud-ru/ds-list.
+                                dataFiltered: Boolean(searchValue), barHideStrategy: 'leave' }) }), open && (_jsx("div", { className: styles.toggler, children: _jsx(Button, { view: VIEW.Elevated, appearance: APPEARANCE.Neutral, icon: _jsx(VerticalMenuCloseSVG, {}), className: styles.button, "data-test-id": TEST_IDS.sidebarToggle.collapse, onClick: () => toggleOpen(false) }) }))] }) })] }));
+}
+export function PageSidebar(props) {
+    return (_jsx(SearchContextProvider, { children: _jsx(PrivateSideBar, { ...props }) }));
+}

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

@@ -0,0 +1,13 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+type SearchContextValue = {
+    searchValue: string;
+    setSearchValue(searchValue: string): void;
+    searchOpened: boolean;
+    setSearchOpened: Dispatch<SetStateAction<boolean>>;
+};
+export declare const SearchContext: import("react").Context<SearchContextValue>;
+export declare function useSearchContext(): SearchContextValue;
+export declare function SearchContextProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from 'react';
+export const SearchContext = createContext({
+    searchValue: '',
+    searchOpened: false,
+    setSearchValue: () => { },
+    setSearchOpened: () => { },
+});
+export function useSearchContext() {
+    return useContext(SearchContext);
+}
+export function SearchContextProvider({ children }) {
+    const [searchValue, setSearchValue] = useState('');
+    const [searchOpened, setSearchOpened] = useState(false);
+    return (_jsx(SearchContext.Provider, { value: { searchValue, setSearchValue, searchOpened, setSearchOpened }, children: children }));
+}

package/dist/esm/components/PageSidebar/helperComponents/SidebarSearch/SidebarSearch.d.ts

@@ -0,0 +1 @@
+export declare function SidebarSearch(): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Search, SIZE } from '@cloud-ru/ds-search';
+import { useEffect, useRef } from 'react';
+import { pageLayoutLocale } from '../../../../locale/index.js';
+import { useSearchContext } from '../../contexts.js';
+export function SidebarSearch() {
+    const { searchValue, setSearchValue, searchOpened } = useSearchContext();
+    const ref = useRef(null);
+    const { t } = pageLayoutLocale.useTranslations();
+    useEffect(() => {
+        if (searchOpened) {
+            ref?.current?.focus();
+        }
+    }, [searchOpened]);
+    if (!searchOpened)
+        return null;
+    return (_jsx(Search, { ref: ref, size: SIZE.M, placeholder: t('PageSidebar.searchByServices'), value: searchValue, onChange: setSearchValue }));
+}

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

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

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

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

package/dist/esm/components/PageSidebar/helperComponents/SidebarSearchToggle/SidebarSearchToggle.d.ts

@@ -0,0 +1 @@
+export declare function SidebarSearchToggle(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { APPEARANCE, Button, SIZE, VIEW } from '@cloud-ru/ds-button';
+import { VerticalMenuRightCloseSVG } from '@cloud-ru/ds-icons/interface/product';
+import { SearchSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Tooltip } from '@cloud-ru/ds-tooltip';
+import { TEST_IDS } from '../../../../constants.js';
+import { pageLayoutLocale } from '../../../../locale/index.js';
+import { useSearchContext } from '../../contexts.js';
+import styles from './styles.module.css';
+export function SidebarSearchToggle() {
+    const { searchOpened, setSearchValue, setSearchOpened } = useSearchContext();
+    const { t } = pageLayoutLocale.useTranslations();
+    const toggle = () => {
+        setSearchValue('');
+        setSearchOpened(prev => !prev);
+    };
+    return (_jsx(Tooltip, { tip: searchOpened ? t('PageSidebar.closeSearch') : t('PageSidebar.openSearch'), triggerClassName: styles.trigger, children: _jsx(Button, { view: VIEW.Function, appearance: APPEARANCE.Neutral, size: SIZE.M, "data-test-id": TEST_IDS.sidebarSearch.trigger, onClick: toggle, icon: searchOpened ? _jsx(VerticalMenuRightCloseSVG, {}) : _jsx(SearchSVG, {}) }) }));
+}

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

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

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

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

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

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

package/dist/esm/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.js';
+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/esm/components/PageSidebar/helperComponents/SidebarSelect/SidebarSelect.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LAYOUT_TYPE, withLayoutType } from '@cloud-ru/ds-adaptive';
+import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Droplist } from '@cloud-ru/ds-list';
+import { TruncateString } from '@cloud-ru/ds-truncate-string';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useMemo, useState } from 'react';
+import { TEST_IDS } from '../../../../constants.js';
+import { useItemsContent, useSearchFilter, useSelectedItem } from './hooks/index.js';
+import styles from './styles.module.css';
+function SidebarSelectBase({ className, items, footerItems = [], selected, onSelect, collapse, hasSearch, ...otherProps }) {
+    const [searchValue, setSearchValue] = useState('');
+    const { filteredList, searchCollapseState } = useSearchFilter(items, searchValue);
+    const list = useItemsContent(filteredList, onSelect);
+    const footerList = useItemsContent(footerItems);
+    const [isOpen, setIsOpen] = useState(false);
+    const selectedItem = useSelectedItem(items, selected);
+    const selectedCollapsedState = useMemo(() => {
+        if (selectedItem.item) {
+            return { defaultValue: selectedItem.path };
+        }
+    }, [selectedItem.item, selectedItem.path]);
+    const handleSelect = (value) => {
+        if (value) {
+            onSelect?.(value);
+        }
+        setIsOpen(false);
+    };
+    const allItems = useMemo(() => [...list, ...footerList], [list, footerList]);
+    const shouldShowSearch = hasSearch ?? (allItems.length > 15 || Boolean(searchValue));
+    return (_jsx(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: _jsxs("div", { role: 'button', tabIndex: 0, className: cn(styles.wrapper, className), "data-test-id": TEST_IDS.sidebarSelect.trigger, ...extractSupportProps(otherProps), children: [_jsx(TruncateString, { className: styles.triggerText, text: selectedItem.item?.label || '' }), selectedItem.item?.afterContent, isOpen ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {})] }) }));
+}
+/**
+ * Мобильный select-сайдбар. Форсирует `mobile`-раскладку через `withLayoutType`, чтобы адаптивный
+ * `Droplist` всегда открывал `BottomSheet` (мобильный паттерн сайдбара), независимо от провайдера.
+ */
+export const SidebarSelect = withLayoutType(SidebarSelectBase, LAYOUT_TYPE.Mobile);

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

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

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

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

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

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

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

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from '@cloud-ru/ds-tooltip';
+import { useMemo } from '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 ? (_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,
+        afterContent,
+        beforeContent,
+        disabled: Boolean(disabledReason),
+    };
+    if (newItems?.length) {
+        return {
+            ...newItem,
+            type: 'collapse',
+            items: getItemsContent(newItems || [], onSelect),
+        };
+    }
+    return newItem;
+});
+export function useItemsContent(items, onSelect) {
+    return useMemo(() => getItemsContent(items, onSelect), [items, onSelect]);
+}

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

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

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

@@ -0,0 +1,36 @@
+import { useMemo } from '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;
+}, []);
+export const useSearchFilter = (list, searchValue) => {
+    const filteredList = useMemo(() => filterService(list, searchValue), [list, searchValue]);
+    const searchCollapseState = useMemo(() => ({ value: getItemIds(filteredList) }), [filteredList]);
+    return {
+        filteredList,
+        searchCollapseState,
+    };
+};

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

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

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

@@ -0,0 +1,20 @@
+import { useMemo } from '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: [] });
+}
+export function useSelectedItem(items, selected) {
+    return useMemo(() => findSelectedItem(items, selected), [items, selected]);
+}

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

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

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

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

package/dist/esm/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/esm/components/PageSidebar/helperComponents/SidebarSelect/types.d.ts

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

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

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

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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { Icon } from '../../types.js';
+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/esm/components/PageSidebar/helperComponents/SidebarTitle/SidebarTitle.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { APPEARANCE, IconPredefined, SIZE } from '@cloud-ru/ds-icon-predefined';
+import { TruncateString } from '@cloud-ru/ds-truncate-string';
+import { SIZE as TYPOGRAPHY_SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+import cn from 'classnames';
+import styles from './styles.module.css';
+export function SidebarTitle({ title, className, icon, afterContent }) {
+    return (_jsxs("div", { className: cn(className, styles.wrapper), children: [_jsx("div", { className: styles.icon, children: _jsx(IconPredefined, { appearance: APPEARANCE.Neutral, size: SIZE.M, shape: 'squared', icon: icon }) }), _jsx("div", { className: styles.title, children: _jsx(Typography, { variant: VARIANT.label, size: TYPOGRAPHY_SIZE.l, children: _jsx(TruncateString, { text: title }) }) }), afterContent] }));
+}

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

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

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

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