@cloud-ru/uikit-product-header 5.0.17

package/dist/esm/components/MainMenu/Search/SearchSettingsButton/SearchSettingsButton.d.ts

@@ -0,0 +1,4 @@
+export type SearchSettingsButtonProps = {
+    onClick(): void;
+};
+export declare function SearchSettingsButton({ onClick }: SearchSettingsButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/MainMenu/Search/SearchSettingsButton/SearchSettingsButton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ConfigurationSVG } from '@sbercloud/uikit-product-icons';
+import { ButtonFunction } from '@snack-uikit/button';
+import styles from './styles.module.css';
+export function SearchSettingsButton({ onClick }) {
+    return (_jsx("div", { className: styles.searchSettings, children: _jsx(ButtonFunction, { icon: _jsx(ConfigurationSVG, {}), size: 'xs', className: styles.searchSettingsButton, onClick: onClick, "data-test-id": 'header__drawer-menu__search-config-button' }) }));
+}

package/dist/esm/components/MainMenu/Search/SearchSettingsButton/index.d.ts

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

package/dist/esm/components/MainMenu/Search/SearchSettingsButton/index.js

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

package/dist/esm/components/MainMenu/Search/SearchSettingsButton/styles.module.css

@@ -0,0 +1,11 @@
+.searchSettings{
+  border-left:1px solid var(--sys-neutral-decor-default, #dde0ea);
+  height:100%;
+  display:flex;
+  flex-direction:column;
+  justify-content:center;
+}
+
+.searchSettingsButton{
+  margin-left:var(--dimension-1m, 8px);
+}

package/dist/esm/components/MainMenu/Search/index.d.ts

@@ -0,0 +1,3 @@
+export * from './SearchDesktop';
+export * from './SearchMobile';
+export * from './types';

package/dist/esm/components/MainMenu/Search/index.js

@@ -0,0 +1,3 @@
+export * from './SearchDesktop';
+export * from './SearchMobile';
+export * from './types';

package/dist/esm/components/MainMenu/Search/types.d.ts

@@ -0,0 +1,14 @@
+import { LinksGroup } from '../types';
+export type SearchHandler = (searchValue: string, items: LinksGroup[]) => LinksGroup[] | undefined;
+export type SearchFunction = {
+    id: string;
+    label: string;
+    handler: SearchHandler;
+};
+export type SearchProps = {
+    searchValue: string;
+    onSearchValueChange(value: string): void;
+    searchFunctions: SearchFunction[];
+    onChangeSearchFn(id: string): void;
+    searchFn?: string;
+};

package/dist/esm/components/MainMenu/Search/types.js

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

package/dist/esm/components/MainMenu/Search/useSearch.d.ts

@@ -0,0 +1,8 @@
+import { SearchProps } from './types';
+export declare enum SearchGroupsAccessor {
+    GroupLabelText = "label.text",
+    ItemLabelText = "items.label",
+    ItemAliases = "items.aliases"
+}
+export declare function toggleLayout(text: string): string;
+export declare function useSearch(): SearchProps;

package/dist/esm/components/MainMenu/Search/useSearch.js

@@ -0,0 +1,161 @@
+import Fuse from 'fuse.js';
+import { useMemo, useState } from 'react';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+export var SearchGroupsAccessor;
+(function (SearchGroupsAccessor) {
+    SearchGroupsAccessor["GroupLabelText"] = "label.text";
+    SearchGroupsAccessor["ItemLabelText"] = "items.label";
+    SearchGroupsAccessor["ItemAliases"] = "items.aliases";
+})(SearchGroupsAccessor || (SearchGroupsAccessor = {}));
+function matchSearchString(value, search) {
+    return value.trim().toLowerCase().includes(search.trim().toLowerCase());
+}
+const prepareItemAccessorKey = (groupId, alias) => `${groupId}-${alias}`;
+function createItemsMap(links) {
+    const itemsMap = {};
+    links.forEach(group => {
+        group.items.forEach(item => {
+            item.aliases.forEach(alias => {
+                const key = prepareItemAccessorKey(group.id, alias);
+                itemsMap[key] = item;
+            });
+        });
+    });
+    return itemsMap;
+}
+const enCharacters = "qwertyuiop[]asdfghjkl;'zxcvbnm,./`";
+const ruCharacters = 'йцукенгшщзхъфывапролджэячсмитьбю.ё';
+const enToRuMap = {};
+const ruToEnMap = {};
+for (let i = 0; i < enCharacters.length; i++) {
+    enToRuMap[enCharacters[i]] = ruCharacters[i];
+    ruToEnMap[ruCharacters[i]] = enCharacters[i];
+}
+function convertLayout(text, direction = 'en-ru') {
+    const map = direction === 'en-ru' ? enToRuMap : ruToEnMap;
+    return text
+        .split('')
+        .map(ch => { var _a; return (_a = map[ch]) !== null && _a !== void 0 ? _a : ch; })
+        .join('');
+}
+function isCyrillic(text) {
+    return /[а-яё]/i.test(text);
+}
+function isLatin(text) {
+    return /[a-z]/i.test(text);
+}
+export function toggleLayout(text) {
+    const lowercaseValue = text.toLowerCase();
+    if (isCyrillic(lowercaseValue)) {
+        return convertLayout(lowercaseValue, 'ru-en');
+    }
+    if (isLatin(lowercaseValue)) {
+        return convertLayout(lowercaseValue, 'en-ru');
+    }
+    return text;
+}
+export function useSearch() {
+    const [searchValue, onSearchValueChange] = useState('');
+    const { t } = useLocale('Header');
+    const [searchFn, onChangeSearchFn] = useState('fuzzy');
+    const searchFunctions = useMemo(() => [
+        {
+            id: 'fuzzy',
+            label: t('searchSettingsFuzzyChipLabel'),
+            handler: (searchValue, links) => {
+                if (!searchValue) {
+                    return links;
+                }
+                const itemsMap = createItemsMap(links);
+                const linksFuse = new Fuse(links, {
+                    keys: Object.values(SearchGroupsAccessor),
+                    includeMatches: true,
+                    threshold: 0.3,
+                });
+                let fuseSearchResults = linksFuse.search(searchValue);
+                if (fuseSearchResults.length < 1) {
+                    const fixedLayoutValue = toggleLayout(searchValue);
+                    fuseSearchResults = linksFuse.search(fixedLayoutValue);
+                }
+                return fuseSearchResults.reduce((accResult, fuseResult) => {
+                    if (!fuseResult.matches) {
+                        return accResult;
+                    }
+                    const isMatchByGroup = fuseResult.matches.find(match => match.key === SearchGroupsAccessor.GroupLabelText);
+                    if (isMatchByGroup) {
+                        accResult.push(fuseResult.item);
+                        return accResult;
+                    }
+                    const group = fuseResult.item;
+                    const originalGroupIndex = fuseResult.refIndex;
+                    const itemsInnerMap = {};
+                    const items = [];
+                    fuseResult.matches.forEach(match => {
+                        if (match.refIndex === undefined) {
+                            return;
+                        }
+                        switch (match.key) {
+                            case SearchGroupsAccessor.ItemLabelText: {
+                                const item = links[originalGroupIndex].items[match.refIndex];
+                                if (item && !itemsInnerMap[item.id]) {
+                                    itemsInnerMap[item.id] = item;
+                                    items.push(item);
+                                }
+                                break;
+                            }
+                            case SearchGroupsAccessor.ItemAliases: {
+                                if (!match.value) {
+                                    break;
+                                }
+                                const groupId = fuseResult.item.id;
+                                const alias = match.value;
+                                const key = prepareItemAccessorKey(groupId, alias);
+                                const item = itemsMap[key];
+                                if (item && !itemsInnerMap[item.id]) {
+                                    itemsInnerMap[item.id] = item;
+                                    items.push(item);
+                                }
+                                break;
+                            }
+                            case SearchGroupsAccessor.GroupLabelText:
+                            default:
+                                return;
+                        }
+                    });
+                    if (items.length > 0) {
+                        accResult.push(Object.assign(Object.assign({}, group), { items }));
+                    }
+                    return accResult;
+                }, []);
+            },
+        },
+        {
+            id: 'precise',
+            label: t('searchSettingsPreciseChipLabel'),
+            handler: (searchValue, links) => {
+                if (!searchValue || links.length < 1) {
+                    return links;
+                }
+                return links.reduce((result, group) => {
+                    if (group.label && matchSearchString(group.label.text, searchValue)) {
+                        result.push(group);
+                        return result;
+                    }
+                    const items = group.items.filter(item => matchSearchString(item.label, searchValue));
+                    if (items.length > 0) {
+                        result.push(Object.assign(Object.assign({}, group), { items }));
+                        return result;
+                    }
+                    return result;
+                }, []);
+            },
+        },
+    ], [t]);
+    return {
+        searchValue,
+        onSearchValueChange,
+        searchFunctions,
+        onChangeSearchFn,
+        searchFn,
+    };
+}

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

@@ -0,0 +1,10 @@
+import { LinksGroup, MainMenuProps } from './types';
+export declare function useHighlight(className: string): (elementToHighlight?: HTMLElement | null) => void;
+type UseMenuItemsProps = Pick<MainMenuProps, 'favorite' | 'serviceGroups' | 'search'>;
+export declare function useMenuItems({ search, serviceGroups, favorite }: UseMenuItemsProps): {
+    resultItems: LinksGroup[];
+    groupItems: import("@snack-uikit/list/dist/esm/components/Items").BaseItem[];
+    searchRef: import("react").RefObject<HTMLInputElement>;
+    scrollRef: import("react").RefObject<HTMLDivElement>;
+};
+export {};

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

@@ -0,0 +1,101 @@
+import debounce from 'lodash.debounce';
+import { useMemo, useRef } from 'react';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import styles from './styles.module.css';
+export function useHighlight(className) {
+    const element = useRef();
+    const highlight = useMemo(() => {
+        const scheduleHighlight = debounce(() => {
+            var _a;
+            (_a = element.current) === null || _a === void 0 ? void 0 : _a.classList.add(className);
+            setTimeout(() => {
+                var _a;
+                (_a = element.current) === null || _a === void 0 ? void 0 : _a.classList.remove(className);
+                element.current = undefined;
+            }, 300, { trailing: false });
+        }, 80);
+        return (elementToHighlight) => {
+            if (elementToHighlight) {
+                element.current = elementToHighlight;
+            }
+            scheduleHighlight();
+        };
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    return highlight;
+}
+export function useMenuItems({ search, serviceGroups, favorite }) {
+    var _a, _b;
+    const { t } = useLocale('Header');
+    const { searchValue = '', searchFn, searchFunctions, onSearchValueChange } = search || {};
+    const searchRef = useRef(null);
+    const scrollRef = useRef(null);
+    const highlight = useHighlight(styles.highlight);
+    const groupWithFavorites = useMemo(() => {
+        if (!favorite || !favorite.value) {
+            return serviceGroups;
+        }
+        const flatMapItems = serviceGroups.flatMap(serviceGroup => serviceGroup.items);
+        const favoriteServices = favorite.value.reduce((acc, cur) => {
+            const item = flatMapItems.find(item => item.id === cur);
+            if (item) {
+                acc.push(item);
+            }
+            return acc;
+        }, []);
+        return [
+            {
+                id: 'favorite',
+                label: {
+                    text: t('favorite'),
+                },
+                items: favoriteServices,
+            },
+        ].concat(serviceGroups);
+    }, [favorite, serviceGroups, t]);
+    const groupItems = groupWithFavorites
+        .filter(group => group.items.length > 0)
+        .map(({ id, label: { text } }) => ({
+        id,
+        content: {
+            option: text,
+            truncate: {
+                option: 2,
+            },
+        },
+        onClick() {
+            onSearchValueChange === null || onSearchValueChange === void 0 ? void 0 : onSearchValueChange('');
+            setTimeout(() => {
+                var _a, _b;
+                // TODO: remove or move
+                // eslint-disable-next-line @cloud-ru/ssr-safe-react/domApi
+                const element = document.getElementById(id);
+                if (!element)
+                    return;
+                (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+                    left: 0,
+                    top: element.offsetTop - (((_b = searchRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0),
+                    behavior: 'smooth',
+                });
+                // Задержка approximately равна времени скроллинга
+                setTimeout(() => {
+                    highlight(element);
+                }, 500);
+            }, 0);
+        },
+    }));
+    const searchFnMap = searchFunctions === null || searchFunctions === void 0 ? void 0 : searchFunctions.reduce((acc, cur) => {
+        acc[cur.id] = cur.handler;
+        return acc;
+    }, {});
+    const itemsWithoutEmptyGroups = groupWithFavorites.filter(group => group.items.length > 0);
+    const resultItems = ((_b = (searchFn ? searchFnMap === null || searchFnMap === void 0 ? void 0 : searchFnMap[searchFn] : (_a = searchFunctions === null || searchFunctions === void 0 ? void 0 : searchFunctions[0]) === null || _a === void 0 ? void 0 : _a.handler)) === null || _b === void 0 ? void 0 : _b(searchValue, itemsWithoutEmptyGroups)) ||
+        itemsWithoutEmptyGroups;
+    return {
+        resultItems,
+        groupItems,
+        searchRef,
+        scrollRef,
+    };
+}

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

@@ -0,0 +1,4 @@
+export * from './MainMenu';
+export * from './types';
+export * from './Search/useSearch';
+export * from './Search/types';

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

@@ -0,0 +1,4 @@
+export * from './MainMenu';
+export * from './types';
+export * from './Search/useSearch';
+export * from './Search/types';

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

@@ -0,0 +1,28 @@
+.highlight{
+  animation:shake-animation 300ms ease 1;
+  transform-origin:100% 100%;
+}
+
+@keyframes shake-animation{
+  0%{
+    transform:translate(0, 0);
+  }
+  18%{
+    transform:translate(5px, 0);
+  }
+  35%{
+    transform:translate(0, 0);
+  }
+  53%{
+    transform:translate(5px, 0);
+  }
+  71%{
+    transform:translate(0, 0);
+  }
+  89%{
+    transform:translate(3px, 0);
+  }
+  100%{
+    transform:translate(0, 0);
+  }
+}

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

@@ -0,0 +1,49 @@
+import { JSXElementConstructor, MouseEvent, MouseEventHandler, ReactNode } from 'react';
+import { CardServiceSmallProps } from '@sbercloud/uikit-product-card-predefined';
+import { ListProps } from '@snack-uikit/list';
+import { SearchProps } from './Search/types';
+export type InnerLink = {
+    id: string;
+    icon: JSXElementConstructor<{
+        size?: number;
+        className?: string;
+    }>;
+    label: string;
+    onClick(e?: MouseEvent<HTMLElement>): void;
+    href?: string;
+    disabled?: boolean;
+    hidden?: boolean;
+    badge?: CardServiceSmallProps['promoBadge'];
+    aliases: string[];
+};
+type TitleStatic = {
+    text: string;
+    onClick?: never;
+};
+type TitleClickable = {
+    text: string;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+};
+export type LinksGroupTitle = TitleStatic | TitleClickable;
+export type LinksGroup = {
+    id: string;
+    label: LinksGroupTitle;
+    hidden?: boolean;
+    items: InnerLink[];
+};
+export type MainMenuProps = {
+    open?: boolean;
+    setOpen?(open: boolean): void;
+    leftTop?: ReactNode;
+    rightTop?: ReactNode;
+    settingItems: ListProps['items'];
+    serviceGroups: LinksGroup[];
+    onLinkChange?(value: string): void;
+    favorite?: {
+        value: string[];
+        onChange: (productId: string) => (addingValue: boolean) => void;
+    };
+    search?: SearchProps;
+    isMobile?: boolean;
+};
+export {};

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

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

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

@@ -0,0 +1,7 @@
+import { BreadcrumbsProps } from '@snack-uikit/breadcrumbs';
+type PathBreadcrumbsProps = {
+    items: BreadcrumbsProps['items'];
+    isMobile?: boolean;
+};
+export declare function PathBreadcrumbs({ isMobile, items }: PathBreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/PathBreadcrumbs/PathBreadcrumbs.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Breadcrumbs } from '@snack-uikit/breadcrumbs';
+import styles from './styles.module.css';
+export function PathBreadcrumbs({ isMobile, items }) {
+    return (_jsx(Breadcrumbs, { items: items, className: styles.breadcrumbs, inactiveLastItem: items.length > 1, separator: '/', size: isMobile ? 'xs' : 's', "data-test-id": 'header__breadcrumbs' }));
+}

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

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

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

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

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

@@ -0,0 +1,5 @@
+.breadcrumbs{
+  padding:var(--dimension-1m, 8px) !important;
+  margin:calc(0px - var(--dimension-1m, 8px)) 0 !important;
+  min-width:0;
+}

package/dist/esm/components/PlatformLogo/Container.d.ts

@@ -0,0 +1,12 @@
+import { JSXElementConstructor, PropsWithChildren } from 'react';
+import { WithSupportProps } from '@sbercloud/uikit-product-utils';
+export type ContainerProps = PropsWithChildren<WithSupportProps<{
+    className?: string;
+}>>;
+export declare function Container({ children, ...otherProps }: ContainerProps): import("react/jsx-runtime").JSX.Element;
+export type IconComponentProps = {
+    className?: string;
+};
+export declare const getPlatformIconComponent: (Icon: JSXElementConstructor<{
+    size: number;
+}>) => (props: IconComponentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/PlatformLogo/Container.js

@@ -0,0 +1,20 @@
+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 styled from './styles.module.css';
+export function Container(_a) {
+    var { children } = _a, otherProps = __rest(_a, ["children"]);
+    return (_jsx("div", Object.assign({ className: styled.container }, otherProps, { children: children })));
+}
+export const getPlatformIconComponent = (Icon) => function IconComponent(props) {
+    return (_jsx(Container, Object.assign({}, props, { children: _jsx(Icon, { size: 24 }) })));
+};

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

@@ -0,0 +1,4 @@
+export declare const AdvancedPlatformLogo: (props: import("./Container").IconComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EnterprisePlatformLogo: (props: import("./Container").IconComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EvolutionPlatformLogo: (props: import("./Container").IconComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MLSpacePlatformLogo: (props: import("./Container").IconComponentProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+import { AdvancedSVG, EvolutionSVG, MlSpaceSVG, VmwareSVG } from '@sbercloud/uikit-product-icons';
+import { getPlatformIconComponent } from './Container';
+export const AdvancedPlatformLogo = getPlatformIconComponent(AdvancedSVG);
+export const EnterprisePlatformLogo = getPlatformIconComponent(VmwareSVG);
+export const EvolutionPlatformLogo = getPlatformIconComponent(EvolutionSVG);
+export const MLSpacePlatformLogo = getPlatformIconComponent(MlSpaceSVG);

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

@@ -0,0 +1,11 @@
+.container{
+  width:24px;
+  height:24px;
+  color:var(--sys-primary-on-accent, #fbfffc);
+  fill:var(--sys-primary-on-accent, #fbfffc);
+  background-color:var(--sys-neutral-accent-default, #787b8a);
+  border-radius:var(--dimension-050m, 4px);
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}

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

@@ -0,0 +1,14 @@
+import { BaseItemProps, ListProps } from '@snack-uikit/list';
+import { ThemeProps, UserProfileProps } from './types';
+export type UserMenuProps = {
+    profile?: UserProfileProps;
+    theme?: ThemeProps;
+    items?: ListProps['items'];
+    settingItems?: BaseItemProps[];
+    onLogout?(): void;
+    open?: boolean;
+    setOpen?(open: boolean): void;
+    onClick?(): void;
+    isMobile?: boolean;
+};
+export declare function UserMenu({ profile, open: openProp, setOpen: setOpenProp, onLogout, items, settingItems, theme, isMobile, onClick, }: UserMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/UserMenu/UserMenu.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { MobileDrawerCustom } from '@sbercloud/uikit-product-mobile-drawer';
+import { Avatar } from '@snack-uikit/avatar';
+import { ButtonFunction } from '@snack-uikit/button';
+import { Droplist, List } from '@snack-uikit/list';
+import { Scroll } from '@snack-uikit/scroll';
+import { useValueControl } from '@snack-uikit/utils';
+import { useUserMenuItems } from './hooks/useUserMenuItems';
+import styles from './styles.module.css';
+export function UserMenu({ profile = {}, open: openProp, setOpen: setOpenProp, onLogout, items, settingItems, theme, isMobile, onClick, }) {
+    const { t } = useLocale('Header');
+    const [open = false, setOpen] = useValueControl({ value: openProp, onChange: setOpenProp });
+    const { fullName = '', inviteCount } = profile;
+    const userMenuItems = useUserMenuItems({
+        isMobile,
+        profile,
+        theme,
+        items,
+        settingItems,
+        onClose: () => {
+            setOpen(false);
+        },
+        onLogout,
+    });
+    const trigger = useMemo(() => (_jsx(ButtonFunction, { size: 'm', onClick: () => {
+            setOpen === null || setOpen === void 0 ? void 0 : setOpen(true);
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }, counter: Number(inviteCount)
+            ? {
+                value: Number(inviteCount),
+                appearance: 'primary',
+            }
+            : undefined, "data-test-id": 'header__user-menu__button', icon: _jsx(Avatar, { size: 'xs', name: fullName, showTwoSymbols: true }) })), [fullName, inviteCount, onClick, setOpen]);
+    if (isMobile) {
+        return (_jsxs(_Fragment, { children: [trigger, _jsxs(MobileDrawerCustom, { open: open, onClose: () => {
+                        setOpen(false);
+                    }, position: 'right', swipeEnabled: false, "data-test-id": 'header__user-menu-mobile', closeOnPopstate: true, children: [_jsx(MobileDrawerCustom.Header, { title: t('user') }), _jsx(Scroll, { barHideStrategy: 'never', children: _jsx("div", { className: styles.mobileList, children: _jsx(List, { items: userMenuItems, selection: {
+                                        mode: 'single',
+                                        value: 'null',
+                                    }, size: 'm' }) }) })] })] }));
+    }
+    return (_jsx(_Fragment, { children: _jsx(Droplist, { items: userMenuItems, selection: {
+                mode: 'single',
+                value: 'null',
+            }, trigger: 'click', placement: 'bottom-end', className: styles.userMenuDroplist, closeOnPopstate: true, closeDroplistOnItemClick: true, "data-test-id": 'header__user-menu', children: trigger }) }));
+}

package/dist/esm/components/UserMenu/hooks/useLogoutItem.d.ts

@@ -0,0 +1,6 @@
+import { ListProps } from '@snack-uikit/list';
+type UseLogoutItemProps = {
+    onLogout?(): void;
+};
+export declare function useLogoutItem({ onLogout }: UseLogoutItemProps): ListProps['items'];
+export {};

package/dist/esm/components/UserMenu/hooks/useLogoutItem.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { ExitSVG } from '@sbercloud/uikit-product-icons';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+export function useLogoutItem({ onLogout }) {
+    const { t } = useLocale('Header');
+    return useMemo(() => [
+        { type: 'group', divider: true, items: [] },
+        {
+            content: {
+                option: t('logout'),
+            },
+            beforeContent: _jsx(ExitSVG, {}),
+            onClick: onLogout,
+            'data-test-id': 'header__user-menu__logout',
+        },
+    ], [onLogout, t]);
+}

package/dist/esm/components/UserMenu/hooks/useProfileItem.d.ts

@@ -0,0 +1,3 @@
+import { BaseItemProps } from '@snack-uikit/list';
+import { UserProfileProps } from '../types';
+export declare function useProfileItem({ fullName, email, itemWrapRender, onClick, }: UserProfileProps): BaseItemProps;

package/dist/esm/components/UserMenu/hooks/useProfileItem.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { SettingsSVG } from '@sbercloud/uikit-product-icons';
+import { Avatar } from '@snack-uikit/avatar';
+import styles from '../styles.module.css';
+export function useProfileItem({ fullName = '', email = '', itemWrapRender, onClick, }) {
+    return useMemo(() => ({
+        content: {
+            option: fullName,
+            description: email,
+            truncate: {
+                description: 1,
+            },
+        },
+        onClick,
+        beforeContent: _jsx(Avatar, { size: 'xs', name: fullName, showTwoSymbols: true }),
+        afterContent: (_jsx("div", { className: styles.settingIcon, children: _jsx(SettingsSVG, {}) })),
+        itemWrapRender,
+        id: 'header__user-menu__button',
+        'data-test-id': 'header__user-menu__manage-profile',
+        className: styles.userMenuInfoItem,
+    }), [email, fullName, itemWrapRender, onClick]);
+}