@cloud-ru/uikit-product-page-layout 0.21.3 → 0.21.4

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

@@ -0,0 +1,18 @@
+import { PropsWithChildren } from 'react';
+import { WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { HeadlineProps } from '../Headline';
+import { PageSidebarProps } from '../PageSidebar';
+export type PageServicesProps = WithSupportProps<PropsWithChildren<Pick<HeadlineProps, 'title' | 'actions' | 'subHeader' | 'afterHeadline' | 'beforeHeadline' | 'truncateTitle'> & {
+    className?: string;
+    sidebar?: PageSidebarProps;
+    autoHeight?: boolean;
+}>>;
+export declare const PageServices: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string;
+} & import("react").AriaAttributes & Pick<HeadlineProps, "title" | "actions" | "beforeHeadline" | "afterHeadline" | "subHeader" | "truncateTitle"> & {
+    className?: string;
+    sidebar?: PageSidebarProps;
+    autoHeight?: boolean;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,39 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { forwardRef, useEffect, useState } from 'react';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { Headline } from '../Headline';
+import { PageSidebar } from '../PageSidebar';
+import styles from './styles.module.css';
+const GLOBAL_CONTAINER_ID = 'single-spa-wrapper';
+export const PageServices = forwardRef((_a, ref) => {
+    var { children, title, actions, className, sidebar, beforeHeadline, subHeader, afterHeadline, truncateTitle, autoHeight } = _a, rest = __rest(_a, ["children", "title", "actions", "className", "sidebar", "beforeHeadline", "subHeader", "afterHeadline", "truncateTitle", "autoHeight"]);
+    const [height, setHeight] = useState(0);
+    useEffect(() => {
+        if (autoHeight)
+            return;
+        const container = document.getElementById(GLOBAL_CONTAINER_ID);
+        if (container) {
+            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 (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, (!autoHeight && { style: { height } }), extractSupportProps(rest), { children: [_jsx("div", { className: styles.tempContainer, ref: ref, children: _jsxs("div", { className: styles.container, children: [_jsx(Headline, { title: title, actions: actions, beforeHeadline: beforeHeadline, afterHeadline: afterHeadline, subHeader: subHeader, truncateTitle: truncateTitle }), _jsx("div", { className: styles.childWrapper, children: children })] }) }), sidebar && (_jsx("div", { className: styles.sidebar, children: _jsx(PageSidebar, Object.assign({}, sidebar)) }))] })));
+});

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

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

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

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

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

@@ -0,0 +1,44 @@
+.wrapper{
+  display:flex;
+  flex-direction:row-reverse;
+  min-width:100%;
+  height:100%;
+  justify-content:flex-end;
+}
+
+.sidebar{
+  flex-shrink:0;
+  flex-grow:0;
+  max-width:256px;
+  width:-moz-fit-content;
+  width:fit-content;
+  position:relative;
+  box-sizing:border-box;
+}
+
+.tempContainer{
+  position:relative;
+  box-sizing:border-box;
+  min-width:992px;
+  flex-shrink:1;
+  flex-grow:1;
+  overflow-y:auto;
+}
+
+.container{
+  position:relative;
+  min-height:100%;
+  display:flex;
+  flex-direction:column;
+  padding:var(--dimension-3m, 24px);
+  gap:var(--dimension-2m, 16px);
+  box-sizing:border-box;
+}
+
+.childWrapper{
+  flex-shrink:1;
+  flex-grow:1;
+  display:flex;
+  flex-direction:column;
+  box-sizing:border-box;
+}

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

@@ -0,0 +1,19 @@
+import { ListProps } from '@snack-uikit/list';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Documentation, HeaderProps, SidebarItem } from './types';
+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,49 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useCallback, useState } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { VerticalMenuCloseSVG, VerticalMenuOpenSVG } from '@sbercloud/uikit-product-icons';
+import { ButtonElevated } from '@snack-uikit/button';
+import { List } from '@snack-uikit/list';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { SearchContextProvider } from './contexts';
+import { SidebarSearch } from './helperComponents/SidebarSearch';
+import { useItemsContent, useTopPinnedContent } from './hooks/useItemsCreator';
+import { useSearchFilter } from './hooks/useSearchFilter';
+import styles from './styles.module.css';
+function PrivateSideBar(_a) {
+    var { open: openProp, defaultOpen, onOpenChanged, className, items, footerItems = [], header, selected, onSelect, hasSearch, collapse } = _a, otherProps = __rest(_a, ["open", "defaultOpen", "onOpenChanged", "className", "items", "footerItems", "header", "selected", "onSelect", "hasSearch", "collapse"]);
+    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, searchOpened, searchValue, searchCollapseState } = useSearchFilter(items);
+    const list = useItemsContent(filteredList, onSelect);
+    const footerList = useItemsContent(footerItems);
+    const { pinTop } = useTopPinnedContent(header, hasSearch);
+    return (_jsxs("div", Object.assign({}, extractSupportProps(otherProps), { "data-collapsed": !open || undefined, className: cn(styles.wrapper, className), children: [!open && (_jsx(ButtonElevated, { className: styles.expandButton, 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: [_jsxs("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, barHideStrategy: 'leave' }), hasSearch && searchOpened && (_jsx("div", { className: styles.searchWrapper, children: _jsx(SidebarSearch, {}) }))] }), _jsx("div", { className: styles.toggler, children: _jsx(ButtonElevated, { icon: open ? _jsx(VerticalMenuCloseSVG, {}) : _jsx(VerticalMenuOpenSVG, {}), onClick: () => toggleOpen() }) })] }) })] })));
+}
+export function PageSidebar(props) {
+    return (_jsx(SearchContextProvider, { children: _jsx(PrivateSideBar, Object.assign({}, props)) }));
+}

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

@@ -0,0 +1,13 @@
+import { SetStateAction } from 'react';
+type SearchContextValue = {
+    searchValue: string;
+    setSearchValue(searchValue: string): void;
+    searchOpened: boolean;
+    setSearchOpened: React.Dispatch<SetStateAction<boolean>>;
+};
+export declare const SearchContext: import("react").Context<SearchContextValue>;
+export declare function useSearchContext(): SearchContextValue;
+export declare function SearchContextProvider({ children }: {
+    children: React.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,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { Search } from '@snack-uikit/search';
+import { useSearchContext } from '../../contexts';
+import styles from './styles.module.css';
+export function SidebarSearch() {
+    const { searchValue, setSearchValue, searchOpened } = useSearchContext();
+    const ref = useRef(null);
+    const { t } = useLocale('PageLayout');
+    useEffect(() => {
+        var _a;
+        if (searchOpened) {
+            (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [searchOpened]);
+    if (!searchOpened)
+        return null;
+    return (_jsx(Search, { ref: ref, className: styles.searchItem, size: 'm', placeholder: t('PageSidebar.searchByServices'), value: searchValue, onChange: setSearchValue }));
+}

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

@@ -0,0 +1 @@
+export { SidebarSearch } from './SidebarSearch';

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

@@ -0,0 +1 @@
+export { SidebarSearch } from './SidebarSearch';

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

@@ -0,0 +1,23 @@
+.searchItem{
+  background-color:var(--sys-neutral-background, #eeeff3);
+}
+
+.button{
+  cursor:pointer;
+  position:relative;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
+  background:none;
+  border:none;
+}
+.button:focus, .button:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  border-radius:var(--dimension-050m, 4px);
+  outline-color:var(--sys-available-complementary, #15151b);
+}
+.button:active{
+  outline:none;
+}

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,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SearchSVG, VerticalMenuRightCloseSVG } from '@sbercloud/uikit-product-icons';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { ButtonFunction } from '@snack-uikit/button';
+import { Tooltip } from '@snack-uikit/tooltip';
+import { useSearchContext } from '../../contexts';
+export function SidebarSearchToggle() {
+    const { searchOpened, setSearchValue, setSearchOpened } = useSearchContext();
+    const { t } = useLocale('PageLayout');
+    const toggle = () => {
+        setSearchValue('');
+        setSearchOpened(prev => !prev);
+    };
+    return (_jsx(Tooltip, { tip: searchOpened ? t('PageSidebar.closeSearch') : t('PageSidebar.openSearch'), children: _jsx(ButtonFunction, { size: 's', onClick: toggle, icon: searchOpened ? _jsx(VerticalMenuRightCloseSVG, {}) : _jsx(SearchSVG, {}) }) }));
+}

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { IconPredefined } from '@snack-uikit/icon-predefined';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+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: 'neutral', size: 's', shape: 'square', icon: icon }) }), _jsx("div", { className: styles.title, children: _jsx(Typography.SansLabelL, { children: _jsx(TruncateString, { text: title }) }) }), afterContent] }));
+}

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

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

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

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

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

@@ -0,0 +1,18 @@
+.wrapper{
+  display:flex;
+  flex-direction:row;
+  gap:var(--dimension-1m, 8px);
+  align-items:center;
+}
+
+.icon{
+  flex-grow:0;
+  flex-shrink:0;
+}
+
+.title{
+  overflow:hidden;
+  flex-grow:1;
+  flex-shrink:1;
+  color:var(--sys-neutral-text-main, #41424e);
+}

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

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { ItemProps } from '@snack-uikit/list';
+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/esm/components/PageSidebar/hooks/useItemsCreator.js

@@ -0,0 +1,91 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { ChevronLeftSVG } from '@sbercloud/uikit-product-icons';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { Tooltip } from '@snack-uikit/tooltip';
+import { SidebarSearchToggle } from '../helperComponents/SidebarSearchToggle';
+import { SidebarTitle } from '../helperComponents/SidebarTitle';
+const EMPTY_LIST = [];
+export function useTopPinnedContent(header, hasSearch) {
+    const { t } = useLocale('PageLayout');
+    return useMemo(() => {
+        switch (header === null || header === void 0 ? void 0 : header.type) {
+            case 'title':
+                return {
+                    pinTop: [
+                        {
+                            content: _jsx(SidebarTitle, { title: header.label, icon: header.icon, afterContent: header.afterContent }),
+                            afterContent: hasSearch ? _jsx(SidebarSearchToggle, {}) : null,
+                            inactive: true,
+                        },
+                    ],
+                };
+            case 'back':
+                return {
+                    pinTop: [
+                        {
+                            content: { option: `${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]);
+}
+export function useItemsContent(items, onSelect) {
+    return useMemo(() => {
+        const getItemsContent = (items, onSelect) => items.map((_a) => {
+            var { id, label, beforeContent, onClick, afterContent, disabledReason, disabledReasonPlacement } = _a, rest = __rest(_a, ["id", "label", "beforeContent", "onClick", "afterContent", "disabledReason", "disabledReasonPlacement"]);
+            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 === null || event === void 0 ? void 0 : event.metaKey) || (event === null || event === void 0 ? void 0 : event.button) === 1)) {
+                    return;
+                }
+                event.preventDefault();
+                onClick === null || onClick === void 0 ? void 0 : onClick(event);
+                onSelect === null || onSelect === void 0 ? void 0 : onSelect(id);
+            };
+            if (type === 'group') {
+                return Object.assign(Object.assign({}, rest), { label, type: 'group', items: getItemsContent(newItems || [], onSelect) });
+            }
+            const newItem = {
+                id,
+                content: { option: 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 === null || newItems === void 0 ? void 0 : newItems.length) {
+                return Object.assign(Object.assign({}, newItem), { 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';
+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,43 @@
+import { useMemo } from 'react';
+import { useSearchContext } from '../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) => {
+        var _a;
+        if (service.label && matchString(service.label, searchValue)) {
+            result.push(service);
+            return result;
+        }
+        if ('items' in service && ((_a = service.items) === null || _a === void 0 ? void 0 : _a.length)) {
+            const items = filterService(service.items, searchValue);
+            if (items.length) {
+                result.push(Object.assign(Object.assign({}, service), { items }));
+            }
+            return result;
+        }
+        return result;
+    }, []);
+};
+const getSidebarItemIds = (list) => list.reduce((result, el) => {
+    var _a;
+    result.push(el.id);
+    if ('items' in el && ((_a = el.items) === null || _a === void 0 ? void 0 : _a.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,2 @@
+export * from './PageSidebar';
+export { type SidebarItem } from './types';

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

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

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

@@ -0,0 +1,76 @@
+.wrapper{
+  width:256px;
+}
+.wrapper[data-collapsed]{
+  width:0;
+}
+.wrapper .body{
+  position:absolute;
+  height:100%;
+  width:256px;
+  display:flex;
+  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{
+  position:absolute;
+  content:" ";
+  height:100%;
+  right:calc(-1 * var(--dimension-050m, 4px));
+  width:var(--dimension-050m, 4px);
+}
+.wrapper .body[data-collapsed]:hover{
+  transition:left 0.15s ease-in-out;
+  left:0;
+}
+.wrapper .body[data-collapsed]:hover::before{
+  right:calc(-4 * var(--dimension-050m, 4px));
+  width:calc(4 * var(--dimension-050m, 4px));
+}
+.wrapper .content{
+  flex-grow:1;
+  display:flex;
+  overflow:hidden;
+  box-sizing:border-box;
+  padding:4px 0;
+  flex-direction:column;
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-right:1px solid var(--sys-neutral-decor-default, #dde0ea);
+}
+.wrapper .content[data-collapsed]{
+  box-shadow:var(--box-shadow-elevation-level3, 0px 0px 8px 0px rgba(0, 0, 0, 0.0784313725), 0px 8px 16px 0px rgba(0, 0, 0, 0.0784313725));
+  border-right:none;
+  margin:4px;
+}
+.wrapper .list{
+  flex-grow:1;
+  flex-shrink:1;
+  overflow-y:auto;
+  display:flex;
+  flex-direction:column-reverse;
+  position:relative;
+}
+.wrapper .searchWrapper{
+  position:absolute;
+  right:42px;
+  top:4px;
+  width:204px;
+}
+.wrapper .toggler{
+  display:flex;
+  justify-content:end;
+  flex-shrink:0;
+  flex-grow:0;
+  padding:0 4px;
+}
+.wrapper .expandButton{
+  position:fixed;
+  bottom:8px;
+  left:8px;
+}

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

@@ -0,0 +1,40 @@
+import { AnchorHTMLAttributes, MouseEvent, MouseEventHandler, ReactNode } from 'react';
+import { IconPredefinedProps } from '@snack-uikit/icon-predefined';
+import { TooltipProps } from '@snack-uikit/tooltip';
+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?: 'collapse' | 'group';
+    divider?: boolean;
+    items?: SidebarItem[];
+};
+export type SidebarItem = SidebarItemWithHref | SidebarItemWithItems;
+export type Icon = IconPredefinedProps['icon'];
+export type HeaderProps = {
+    type: 'title';
+    label: string;
+    icon: Icon;
+    afterContent?: ReactNode;
+} | {
+    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/index.d.ts

@@ -0,0 +1,6 @@
+export * from './PageCatalog';
+export * from './PageForm';
+export * from './PageLoading';
+export * from './PageServices';
+export * from './DefaultSubHeader';
+export * from './PageSidebar';

package/dist/esm/components/index.js

@@ -0,0 +1,6 @@
+export * from './PageCatalog';
+export * from './PageForm';
+export * from './PageLoading';
+export * from './PageServices';
+export * from './DefaultSubHeader';
+export * from './PageSidebar';

package/dist/esm/index.d.ts

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

package/dist/esm/index.js

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