@cloud-ru/uikit-product-site-header 0.4.8 → 0.4.10

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.4.10 (2025-11-13)
+
+### Only dependencies have been changed
+* [@cloud-ru/uikit-product-icons@15.1.3](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/icons/CHANGELOG.md)
+* [@cloud-ru/uikit-product-mobile-modal@0.9.20](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/mobile-modal/CHANGELOG.md)
+* [@cloud-ru/uikit-product-site-layout@0.2.4](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/site-layout/CHANGELOG.md)
+* [@cloud-ru/uikit-product-utils@7.0.2](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/utils/CHANGELOG.md)
+
+
+
+
+
+## 0.4.9 (2025-11-12)
+
+
+### Bug Fixes
+
+* **PD-3377:** contributors update to publish all packages ([719fd3e](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/719fd3e1249e247443b125c47ea408d92c8395c3))
+
+
+
+
+
 ## 0.4.8 (2025-11-12)
 
 ### Only dependencies have been changed
@@ -39,7 +62,11 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## 0.4.5 (2025-10-16)
 
-**Note:** Version bump only for package @cloud-ru/uikit-product-site-header
+### Only dependencies have been changed
+* [@cloud-ru/uikit-product-icons@15.1.2](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/icons/CHANGELOG.md)
+* [@cloud-ru/uikit-product-mobile-modal@0.9.19](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/mobile-modal/CHANGELOG.md)
+* [@cloud-ru/uikit-product-site-layout@0.2.3](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/site-layout/CHANGELOG.md)
+* [@cloud-ru/uikit-product-utils@7.0.1](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/utils/CHANGELOG.md)
 
 
 

package/dist/cjs/components/HeaderItems/HeaderItem.d.ts

@@ -0,0 +1,10 @@
+import { LinkItem } from './types';
+export type HeaderItemProps = {
+    /** Список элементов для пунктов меню хэдера */
+    linkItems?: LinkItem[];
+    /** Флаг является ли сейчас мобильная версия */
+    isMobileTabletView?: boolean;
+    /** Id активного элемента списка меню */
+    activeLinkItemId?: string;
+};
+export declare function HeaderItems({ linkItems, isMobileTabletView, activeLinkItemId }: HeaderItemProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/components/HeaderItems/HeaderItem.js

@@ -0,0 +1,74 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderItems = HeaderItems;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const helperComponents_1 = require("../../helperComponents");
+const hooks_1 = require("../../hooks");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const GAP_ITEMS = 22;
+const WIDTH_MORE_BUTTON = 24;
+function HeaderItems({ linkItems, isMobileTabletView, activeLinkItemId }) {
+    const [visibleItems, setVisibleItems] = (0, react_1.useState)([]);
+    const [hiddenItems, setHiddenItems] = (0, react_1.useState)([]);
+    const hiddenRowElementRef = (0, react_1.useRef)(null);
+    const [firstItemElement, setFirstItemElement] = (0, react_1.useState)(null);
+    const itemsMapRef = (0, react_1.useRef)(new Map());
+    const { width: maxWidth } = (0, hooks_1.useResizeObserver)(hiddenRowElementRef.current);
+    const { width: firstVisibleItemWidth } = (0, hooks_1.useResizeObserver)(firstItemElement);
+    function setItemElement(item, index) {
+        return (itemElement) => {
+            if (index === 0 && itemElement) {
+                setFirstItemElement(itemElement);
+            }
+            if (itemElement === null) {
+                itemsMapRef.current.delete(item);
+            }
+            else {
+                itemsMapRef.current.set(item, itemElement);
+            }
+        };
+    }
+    (0, react_1.useEffect)(() => {
+        if (maxWidth < 1) {
+            return;
+        }
+        const newVisibleItems = [];
+        const newHiddenItems = [];
+        let isHidden = false;
+        let indexElement = 0;
+        let currentRowWidth = 0;
+        const size = itemsMapRef.current.size;
+        itemsMapRef.current.forEach((itemElement, itemRowItem) => {
+            const itemWidth = (itemElement === null || itemElement === void 0 ? void 0 : itemElement.offsetWidth) || 0;
+            const isLastElement = indexElement + 1 === size;
+            const sumRowWidth = currentRowWidth + itemWidth + (isLastElement ? 0 : GAP_ITEMS);
+            if (isHidden) {
+                newHiddenItems.push(itemRowItem);
+            }
+            else {
+                if (maxWidth > sumRowWidth + (isLastElement ? 0 : WIDTH_MORE_BUTTON)) {
+                    newVisibleItems.push(itemRowItem);
+                    currentRowWidth = sumRowWidth;
+                }
+                else {
+                    newHiddenItems.push(itemRowItem);
+                    isHidden = true;
+                }
+            }
+            indexElement++;
+        });
+        setVisibleItems(newVisibleItems);
+        setHiddenItems(newHiddenItems);
+    }, [linkItems, maxWidth, firstVisibleItemWidth]);
+    if (!linkItems || isMobileTabletView)
+        return null;
+    const isVisibleEmpty = visibleItems.length === 0;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.wrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.linkItemsContainer, styles_module_scss_1.default.hiddenRow), ref: hiddenRowElementRef, children: linkItems.map((linkItem, index) => ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.lastItemContainer, ref: setItemElement(linkItem, index), children: (0, jsx_runtime_1.jsx)(helperComponents_1.LinkItemHeader, { label: linkItem.label, target: linkItem.target, href: linkItem.href, onClick: linkItem.onClick }) }, linkItem.id))) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.linkItemsContainer, {
+                    [styles_module_scss_1.default.linkItemsFirstViewContainer]: isVisibleEmpty,
+                }), children: [(isVisibleEmpty ? linkItems : visibleItems).map(linkItem => ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.lastItemContainer, children: (0, jsx_runtime_1.jsx)(helperComponents_1.LinkItemHeader, { label: linkItem.label, href: linkItem.href, onClick: linkItem.onClick, active: activeLinkItemId === linkItem.id }) }, linkItem.id))), hiddenItems.length > 0 && (0, jsx_runtime_1.jsx)(helperComponents_1.MoreButton, { linkItemsArray: hiddenItems, activeItemId: activeLinkItemId })] })] }));
+}

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

@@ -0,0 +1,2 @@
+export * from './HeaderItem';
+export * from './types';

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

@@ -0,0 +1,18 @@
+"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("./HeaderItem"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/components/HeaderItems/styles.module.css

@@ -0,0 +1,44 @@
+.wrapper{
+  display:flex;
+  flex-direction:row;
+  justify-content:start;
+  gap:22px;
+  flex-wrap:nowrap;
+  min-height:24px;
+}
+
+.linkItemsContainer{
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  flex-wrap:wrap;
+  gap:22px;
+}
+
+.lastItemContainer{
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  flex-wrap:nowrap;
+  gap:22px;
+}
+
+.hiddenRow{
+  position:absolute;
+  top:0;
+  left:0;
+  display:flex;
+  width:100%;
+  visibility:hidden;
+}
+
+.linkItemsFirstViewContainer{
+  display:flex;
+  flex-direction:row;
+  overflow:hidden;
+  height:24px;
+  flex-grow:1;
+  align-items:center;
+  flex-wrap:wrap;
+  gap:22px;
+}

package/dist/cjs/components/HeaderItems/types.d.ts

@@ -0,0 +1,12 @@
+export type LinkItem = {
+    /** id Элемента */
+    id: string;
+    /** Текст элемента */
+    label: string;
+    /** Хэндлер клика элемента */
+    onClick?: () => void;
+    /** Ссылка элемента */
+    href?: string;
+    /** target для ссылки элемента */
+    target?: string;
+};

package/dist/cjs/components/HeaderItems/types.js

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

package/dist/cjs/components/SiteHeaderBasic/SiteHeaderBasic.d.ts

@@ -0,0 +1,45 @@
+import { MouseEvent, ReactNode } from 'react';
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+export type AdditionalLogoText = {
+    /** Дополнительный текст Логотипа */
+    text?: string;
+    /** Переход по ссылке по дополнительному тексту Логотипа */
+    link?: string;
+    /** Коллбэк по клику на дополнительный текс Логотипа */
+    onClick?(event?: MouseEvent<HTMLAnchorElement>): void;
+};
+export type Logo = {
+    /** Переход по ссылке Логотипа */
+    logoLink: string;
+    /** Коллбэк по клику на Логотип */
+    onClick?(event?: MouseEvent<HTMLAnchorElement>): void;
+};
+export type HeaderProps = WithSupportProps<WithLayoutType<{
+    /** Настройки текста справа Логотипа */
+    additionalLogoText?: AdditionalLogoText;
+    /** className root блока */
+    className?: string;
+    /** className основного хедера */
+    mainHeaderClassName?: string;
+    /** максимальная ширина контейнера */
+    maxWidth?: number;
+    /** Флаг открытия мобильного меню */
+    mobileMenuOpen: boolean;
+    /** Настройки Логотипа */
+    logo: Logo;
+    /** Функция изменения флаг открытия мобильного меню */
+    onSetMobileMenuOpen(open: boolean): void;
+    /** Контент посередине (между логотипом и правым блоком) */
+    middleContent?: ReactNode;
+    /** Контент занимающий всю возможную ширину хэдера */
+    fullWidthContent?: ReactNode;
+    /** Контент справа (левее бургера) */
+    rightContent?: ReactNode;
+    /** Контент сверху над хэдером, для инфостроки */
+    subHeader?: ReactNode;
+    /** Контент мобильной версии меню */
+    mobileMenuContent?: ReactNode;
+    /** Нижний контент кнопок мобильной версии меню */
+    mobileConsultationButton?: ReactNode;
+}>>;
+export declare function SiteHeaderBasic({ className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, logo, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/SiteHeaderBasic/SiteHeaderBasic.js

@@ -0,0 +1,38 @@
+"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.SiteHeaderBasic = SiteHeaderBasic;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const uikit_product_site_layout_1 = require("@sbercloud/uikit-product-site-layout");
+const uikit_product_utils_1 = require("@sbercloud/uikit-product-utils");
+const helperComponents_1 = require("../../helperComponents");
+const hooks_1 = require("../../hooks");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const HEIGHT_SUBHEADER = 25;
+function SiteHeaderBasic(_a) {
+    var { className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, logo } = _a, rest = __rest(_a, ["className", "maxWidth", "additionalLogoText", "middleContent", "rightContent", "mobileMenuContent", "subHeader", "fullWidthContent", "layoutType", "mobileConsultationButton", "mobileMenuOpen", "onSetMobileMenuOpen", "mainHeaderClassName", "logo"]);
+    const refHeader = (0, react_1.useRef)(null);
+    const { showHeader, headerHeight } = (0, hooks_1.useHeaderPosition)(mobileMenuOpen, refHeader);
+    const isMobileTabletView = layoutType === 'mobile' || layoutType === 'tablet';
+    const isMobile = layoutType === 'mobile';
+    return ((0, jsx_runtime_1.jsxs)(uikit_product_site_layout_1.Layout.Header, Object.assign({ style: {
+            transform: `translateY(-${!showHeader ? headerHeight + HEIGHT_SUBHEADER : 0}px)`,
+        }, className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-attr": 'layout-header' }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: [subHeader, (0, jsx_runtime_1.jsx)("div", { ref: refHeader, className: (0, classnames_1.default)(styles_module_scss_1.default.headerMaster, styles_module_scss_1.default.dividerHeader, mainHeaderClassName), "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.headerPartsContainer, style: {
+                        maxWidth,
+                    }, children: fullWidthContent !== null && fullWidthContent !== void 0 ? fullWidthContent : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftPart, "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)(helperComponents_1.LogoContent, { additionalLogoText: additionalLogoText, isMobile: isMobile, logo: logo }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.middlePart, children: middleContent }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.rightPart, children: [rightContent, mobileMenuContent && isMobileTabletView && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(helperComponents_1.ButtonBurger, { mobileMenuOpen: mobileMenuOpen, onClick: () => onSetMobileMenuOpen(!mobileMenuOpen) }), (0, jsx_runtime_1.jsx)(helperComponents_1.MobileMenu, { mobileConsultationButton: mobileConsultationButton, mobileMenuContent: mobileMenuContent, mobileMenuOpen: mobileMenuOpen, onClickForCloseMobileMenu: () => onSetMobileMenuOpen(false) })] }))] })] })) }) })] })));
+}

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

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

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

package/dist/cjs/components/SiteHeaderBasic/styles.module.css

@@ -0,0 +1,66 @@
+.root{
+  position:sticky;
+  top:0;
+  transition:box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
+}
+
+.headerMaster{
+  width:100%;
+  background:var(--sys-neutral-background1-level, #fdfdfd);
+  padding:0 32px;
+}
+.headerMaster[data-layout-type=mobile]{
+  padding:0 16px;
+}
+
+.dividerHeader{
+  box-sizing:border-box;
+  border-bottom:1px solid var(--sys-neutral-decor-default, #dde0ea);
+}
+
+.leftPart{
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  margin-right:40px;
+}
+.leftPart[data-layout-type=mobile]{
+  margin-right:0;
+}
+
+.middlePart{
+  position:relative;
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  flex-grow:1;
+  justify-content:start;
+  gap:40px;
+}
+
+.linkItemsContainer{
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  gap:20px;
+}
+
+.rightPart{
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  gap:12px;
+}
+
+.headerPartsContainer{
+  max-width:1216px;
+  width:100%;
+  display:flex;
+  align-items:center;
+  flex-direction:row;
+  justify-content:space-between;
+  height:60px;
+  box-sizing:border-box;
+  margin:0 auto;
+  overflow:hidden;
+}

package/dist/cjs/components/SubHeader/SubHeader.d.ts

@@ -0,0 +1,17 @@
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+type BannerInfo = {
+    /** Цвет фона SubHeader */
+    color: 'yellow' | 'blue' | 'green';
+    /** Ссылка на текст SubHeader */
+    link?: string;
+    /** Текст SubHeader, может передаваться без ссылки */
+    title: string;
+};
+type SubHeaderProps = WithLayoutType<{
+    /** Объект для отображения данных на баннере */
+    bannerInfo: BannerInfo;
+    /** Функция закрытия SubHeader */
+    onCloseSubHeader?(): void;
+}>;
+export declare function SubHeader({ bannerInfo, onCloseSubHeader, layoutType }: SubHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/SubHeader/SubHeader.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubHeader = SubHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const alert_1 = require("@snack-uikit/alert");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const APPEARANCE_ALERT = {
+    green: 'success',
+    yellow: 'warning',
+    blue: 'info',
+};
+function SubHeader({ bannerInfo, onCloseSubHeader, layoutType }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.root, styles_module_scss_1.default[bannerInfo.color]), "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)(alert_1.AlertTop, { className: styles_module_scss_1.default.subHeaderContainer, title: !bannerInfo.link ? bannerInfo.title : undefined, link: bannerInfo.link
+                ? {
+                    text: bannerInfo.title,
+                    href: bannerInfo.link,
+                }
+                : undefined, description: '', icon: false, appearance: APPEARANCE_ALERT[bannerInfo.color], onClose: onCloseSubHeader }) }));
+}

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

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

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

package/dist/cjs/components/SubHeader/styles.module.css

@@ -0,0 +1,34 @@
+.root{
+  background:var(--sys-neutral-background1-level, #fdfdfd);
+  padding:0 16px;
+}
+.root[data-layout-type=mobile]{
+  padding:0;
+}
+
+.subHeaderContainer{
+  max-width:1248px;
+  margin:0 auto;
+  height:36px;
+}
+
+.closeIcon{
+  cursor:pointer;
+}
+
+.green{
+  background-color:var(--sys-green-accent-default, #67b963);
+}
+
+.yellow{
+  background-color:var(--sys-yellow-accent-default, #f0d559);
+}
+
+.blue{
+  background-color:var(--sys-blue-accent-default, #0063ff);
+}
+
+.link{
+  text-decoration:underline;
+  color:var(--sys-graphite-text-main, #222222);
+}

package/dist/cjs/components/UserDetailsDropdown/UserDetailsDropdown.d.ts

@@ -0,0 +1,7 @@
+export type UserDetailsDropdownProps = {
+    userName: string;
+    lastName: string;
+    onClickExit: () => void;
+    onClickDropdownContent?: () => void;
+};
+export declare function UserDetailsDropdown({ userName, lastName, onClickExit, onClickDropdownContent, }: UserDetailsDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/UserDetailsDropdown/UserDetailsDropdown.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserDetailsDropdown = UserDetailsDropdown;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const avatar_1 = require("@snack-uikit/avatar");
+const dropdown_1 = require("@snack-uikit/dropdown");
+const UserDetailsInline_1 = require("../UserDetailsInline");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function UserDetailsDropdown({ userName, lastName, onClickExit, onClickDropdownContent, }) {
+    return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { offset: 8, placement: 'bottom-end', onOpenChange: onClickDropdownContent, content: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.wrapper, children: (0, jsx_runtime_1.jsx)(UserDetailsInline_1.UserDetailsInline, { className: styles_module_scss_1.default.container, userName: userName, lastName: lastName, onClickExit: onClickExit, withDivider: true }) }), children: (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { name: `${userName} ${lastName}`, size: 's', showTwoSymbols: true, className: styles_module_scss_1.default.authAvatar, appearance: 'green' }) }));
+}

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

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

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

package/dist/cjs/components/UserDetailsDropdown/styles.module.css

@@ -0,0 +1,13 @@
+.authAvatar{
+  cursor:pointer;
+}
+
+.wrapper{
+  min-width:240px;
+  padding:4px 8px;
+  z-index:5;
+}
+
+.container{
+  gap:4px;
+}

package/dist/cjs/components/UserDetailsInline/UserDetailsInline.d.ts

@@ -0,0 +1,8 @@
+export type UserDetailsInlineProps = {
+    userName: string;
+    lastName: string;
+    className?: string;
+    onClickExit: () => void;
+    withDivider?: boolean;
+};
+export declare function UserDetailsInline({ userName, lastName, onClickExit, withDivider, className }: UserDetailsInlineProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/UserDetailsInline/UserDetailsInline.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserDetailsInline = UserDetailsInline;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const button_1 = require("@snack-uikit/button");
+const divider_1 = require("@snack-uikit/divider");
+const UserInfo_1 = require("../../helperComponents/UserInfo");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function UserDetailsInline({ userName, lastName, onClickExit, withDivider, className }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.userAuthContent, className), children: [(0, jsx_runtime_1.jsx)(UserInfo_1.UserInfo, { userName: userName, lastName: lastName }), withDivider && (0, jsx_runtime_1.jsx)(divider_1.Divider, {}), (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { label: '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u0430\u043A\u043A\u0430\u0443\u043D\u0442\u0430', size: 'xs', appearance: 'neutral', icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.ExitSVG, { size: 24 }), iconPosition: 'before', className: styles_module_scss_1.default.buttonExit, onClick: onClickExit })] }));
+}

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

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

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

package/dist/cjs/components/UserDetailsInline/styles.module.css

@@ -0,0 +1,6 @@
+.userAuthContent{
+  display:flex;
+  align-items:start;
+  flex-direction:column;
+  gap:8px;
+}

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

@@ -0,0 +1,5 @@
+export * from './SiteHeaderBasic';
+export * from './HeaderItems';
+export * from './SubHeader';
+export * from './UserDetailsInline';
+export * from './UserDetailsDropdown';

package/dist/cjs/components/index.js

@@ -0,0 +1,21 @@
+"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("./SiteHeaderBasic"), exports);
+__exportStar(require("./HeaderItems"), exports);
+__exportStar(require("./SubHeader"), exports);
+__exportStar(require("./UserDetailsInline"), exports);
+__exportStar(require("./UserDetailsDropdown"), exports);

package/dist/cjs/helperComponents/ButtonBurger/ButtonBurger.d.ts

@@ -0,0 +1,6 @@
+type ButtonBurgerProps = {
+    mobileMenuOpen: boolean;
+    onClick: () => void;
+};
+export declare function ButtonBurger({ mobileMenuOpen, onClick }: ButtonBurgerProps): import("react/jsx-runtime").JSX.Element;
+export {};