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

package/dist/cjs/components/PageServices/PageServices.js

@@ -0,0 +1,45 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageServices = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const utils_1 = require("@snack-uikit/utils");
+const Headline_1 = require("../Headline");
+const PageSidebar_1 = require("../PageSidebar");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const GLOBAL_CONTAINER_ID = 'single-spa-wrapper';
+exports.PageServices = (0, react_1.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] = (0, react_1.useState)(0);
+    (0, react_1.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 ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className) }, (!autoHeight && { style: { height } }), (0, utils_1.extractSupportProps)(rest), { children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.tempContainer, ref: ref, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, children: [(0, jsx_runtime_1.jsx)(Headline_1.Headline, { title: title, actions: actions, beforeHeadline: beforeHeadline, afterHeadline: afterHeadline, subHeader: subHeader, truncateTitle: truncateTitle }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.childWrapper, children: children })] }) }), sidebar && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.sidebar, children: (0, jsx_runtime_1.jsx)(PageSidebar_1.PageSidebar, Object.assign({}, sidebar)) }))] })));
+});

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

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

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

package/dist/cjs/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/cjs/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/cjs/components/PageSidebar/PageSidebar.js

@@ -0,0 +1,55 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageSidebar = PageSidebar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
+const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const button_1 = require("@snack-uikit/button");
+const list_1 = require("@snack-uikit/list");
+const utils_1 = require("@snack-uikit/utils");
+const contexts_1 = require("./contexts");
+const SidebarSearch_1 = require("./helperComponents/SidebarSearch");
+const useItemsCreator_1 = require("./hooks/useItemsCreator");
+const useSearchFilter_1 = require("./hooks/useSearchFilter");
+const styles_module_scss_1 = __importDefault(require('./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] = (0, uncontrollable_1.useUncontrolledProp)(openProp, defaultOpen || true, onOpenChanged);
+    const [hoverOff, setHoverOff] = (0, react_1.useState)(false);
+    const toggleOpen = (0, react_1.useCallback)((newValue = !open) => {
+        if (newValue === open) {
+            return;
+        }
+        if (!newValue) {
+            /* кнопка сворачивания находится внутри сайдбара, а он открывается по ховеру на него,
+            поэтому после клика на время отключаем ховер, чтоб дать ему закрыться */
+            setHoverOff(true);
+            setTimeout(() => setHoverOff(false), 300);
+        }
+        setOpenState(newValue);
+    }, [open, setOpenState]);
+    const { filteredList, searchOpened, searchValue, searchCollapseState } = (0, useSearchFilter_1.useSearchFilter)(items);
+    const list = (0, useItemsCreator_1.useItemsContent)(filteredList, onSelect);
+    const footerList = (0, useItemsCreator_1.useItemsContent)(footerItems);
+    const { pinTop } = (0, useItemsCreator_1.useTopPinnedContent)(header, hasSearch);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, (0, utils_1.extractSupportProps)(otherProps), { "data-collapsed": !open || undefined, className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), children: [!open && ((0, jsx_runtime_1.jsx)(button_1.ButtonElevated, { className: styles_module_scss_1.default.expandButton, icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.VerticalMenuOpenSVG, {}), onClick: () => toggleOpen(true) })), (0, jsx_runtime_1.jsx)("div", { "data-collapsed": !open || undefined, "data-hover-off": hoverOff || undefined, "data-has-search": hasSearch || undefined, className: styles_module_scss_1.default.body, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, "data-collapsed": !open || undefined, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.list, children: [(0, jsx_runtime_1.jsx)(list_1.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 && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.searchWrapper, children: (0, jsx_runtime_1.jsx)(SidebarSearch_1.SidebarSearch, {}) }))] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.toggler, children: (0, jsx_runtime_1.jsx)(button_1.ButtonElevated, { icon: open ? (0, jsx_runtime_1.jsx)(uikit_product_icons_1.VerticalMenuCloseSVG, {}) : (0, jsx_runtime_1.jsx)(uikit_product_icons_1.VerticalMenuOpenSVG, {}), onClick: () => toggleOpen() }) })] }) })] })));
+}
+function PageSidebar(props) {
+    return ((0, jsx_runtime_1.jsx)(contexts_1.SearchContextProvider, { children: (0, jsx_runtime_1.jsx)(PrivateSideBar, Object.assign({}, props)) }));
+}

package/dist/cjs/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/cjs/components/PageSidebar/contexts.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchContext = void 0;
+exports.useSearchContext = useSearchContext;
+exports.SearchContextProvider = SearchContextProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.SearchContext = (0, react_1.createContext)({
+    searchValue: '',
+    searchOpened: false,
+    setSearchValue: () => { },
+    setSearchOpened: () => { },
+});
+function useSearchContext() {
+    return (0, react_1.useContext)(exports.SearchContext);
+}
+function SearchContextProvider({ children }) {
+    const [searchValue, setSearchValue] = (0, react_1.useState)('');
+    const [searchOpened, setSearchOpened] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsx)(exports.SearchContext.Provider, { value: { searchValue, setSearchValue, searchOpened, setSearchOpened }, children: children }));
+}

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

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

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

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarSearch = SidebarSearch;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_locale_1 = require("@sbercloud/uikit-product-locale");
+const search_1 = require("@snack-uikit/search");
+const contexts_1 = require("../../contexts");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function SidebarSearch() {
+    const { searchValue, setSearchValue, searchOpened } = (0, contexts_1.useSearchContext)();
+    const ref = (0, react_1.useRef)(null);
+    const { t } = (0, uikit_product_locale_1.useLocale)('PageLayout');
+    (0, react_1.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 ((0, jsx_runtime_1.jsx)(search_1.Search, { ref: ref, className: styles_module_scss_1.default.searchItem, size: 'm', placeholder: t('PageSidebar.searchByServices'), value: searchValue, onChange: setSearchValue }));
+}

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarSearch = void 0;
+var SidebarSearch_1 = require("./SidebarSearch");
+Object.defineProperty(exports, "SidebarSearch", { enumerable: true, get: function () { return SidebarSearch_1.SidebarSearch; } });

package/dist/cjs/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/cjs/components/PageSidebar/helperComponents/SidebarSearchToggle/SidebarSearchToggle.d.ts

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

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarSearchToggle = SidebarSearchToggle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const uikit_product_locale_1 = require("@sbercloud/uikit-product-locale");
+const button_1 = require("@snack-uikit/button");
+const tooltip_1 = require("@snack-uikit/tooltip");
+const contexts_1 = require("../../contexts");
+function SidebarSearchToggle() {
+    const { searchOpened, setSearchValue, setSearchOpened } = (0, contexts_1.useSearchContext)();
+    const { t } = (0, uikit_product_locale_1.useLocale)('PageLayout');
+    const toggle = () => {
+        setSearchValue('');
+        setSearchOpened(prev => !prev);
+    };
+    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: searchOpened ? t('PageSidebar.closeSearch') : t('PageSidebar.openSearch'), children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { size: 's', onClick: toggle, icon: searchOpened ? (0, jsx_runtime_1.jsx)(uikit_product_icons_1.VerticalMenuRightCloseSVG, {}) : (0, jsx_runtime_1.jsx)(uikit_product_icons_1.SearchSVG, {}) }) }));
+}

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarSearchToggle = void 0;
+var SidebarSearchToggle_1 = require("./SidebarSearchToggle");
+Object.defineProperty(exports, "SidebarSearchToggle", { enumerable: true, get: function () { return SidebarSearchToggle_1.SidebarSearchToggle; } });

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 classnames_1 = __importDefault(require("classnames"));
+const icon_predefined_1 = require("@snack-uikit/icon-predefined");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const typography_1 = require("@snack-uikit/typography");
+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: 'neutral', size: 's', shape: 'square', icon: icon }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.title, children: (0, jsx_runtime_1.jsx)(typography_1.Typography.SansLabelL, { 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(--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/cjs/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/cjs/components/PageSidebar/hooks/useItemsCreator.js

@@ -0,0 +1,95 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTopPinnedContent = useTopPinnedContent;
+exports.useItemsContent = useItemsContent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const uikit_product_locale_1 = require("@sbercloud/uikit-product-locale");
+const tooltip_1 = require("@snack-uikit/tooltip");
+const SidebarSearchToggle_1 = require("../helperComponents/SidebarSearchToggle");
+const SidebarTitle_1 = require("../helperComponents/SidebarTitle");
+const EMPTY_LIST = [];
+function useTopPinnedContent(header, hasSearch) {
+    const { t } = (0, uikit_product_locale_1.useLocale)('PageLayout');
+    return (0, react_1.useMemo)(() => {
+        switch (header === null || header === void 0 ? void 0 : header.type) {
+            case 'title':
+                return {
+                    pinTop: [
+                        {
+                            content: (0, jsx_runtime_1.jsx)(SidebarTitle_1.SidebarTitle, { title: header.label, icon: header.icon, afterContent: header.afterContent }),
+                            afterContent: hasSearch ? (0, jsx_runtime_1.jsx)(SidebarSearchToggle_1.SidebarSearchToggle, {}) : null,
+                            inactive: true,
+                        },
+                    ],
+                };
+            case 'back':
+                return {
+                    pinTop: [
+                        {
+                            content: { option: `${t('PageSidebar.backTo')} ${header.label}` },
+                            beforeContent: (0, jsx_runtime_1.jsx)(uikit_product_icons_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]);
+}
+function useItemsContent(items, onSelect) {
+    return (0, react_1.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 ? ((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 === 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/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,47 @@
+"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) => {
+        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;
+}, []);
+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,2 @@
+export * from './PageSidebar';
+export { type SidebarItem } from './types';

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