@cloud-ru/uikit-product-header 5.0.17

package/dist/cjs/components/Logo/Logo.js

@@ -0,0 +1,61 @@
+"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.HEADER_LOGO_MODE = void 0;
+exports.Logo = Logo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const skeleton_1 = require("@snack-uikit/skeleton");
+const utils_1 = require("@snack-uikit/utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+exports.HEADER_LOGO_MODE = {
+    develop: 'develop',
+    stage: 'stage',
+    hybrid: 'hybrid',
+    prod: 'prod',
+};
+function Logo(_a) {
+    var { path, loading, mode, href, onClick, className } = _a, rest = __rest(_a, ["path", "loading", "mode", "href", "onClick", "className"]);
+    const [error, setError] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setError(false);
+    }, [path, loading]);
+    const logo = (0, react_1.useMemo)(() => {
+        if (path && !error) {
+            return ((0, jsx_runtime_1.jsx)("img", { src: path, alt: 'logo', className: styles_module_scss_1.default.logoImg, onLoad: () => {
+                    setError(false);
+                }, onError: () => {
+                    setError(true);
+                } }));
+        }
+        if (mode === exports.HEADER_LOGO_MODE.develop) {
+            return (0, jsx_runtime_1.jsx)(uikit_product_icons_1.CloudLogoDevSVG, { size: 64 });
+        }
+        if (mode === exports.HEADER_LOGO_MODE.stage) {
+            return (0, jsx_runtime_1.jsx)(uikit_product_icons_1.CloudLogoStageSVG, { size: 74 });
+        }
+        if (mode === exports.HEADER_LOGO_MODE.hybrid) {
+            return (0, jsx_runtime_1.jsx)(uikit_product_icons_1.CloudLogoHybridSVG, { size: 78 });
+        }
+        return (0, jsx_runtime_1.jsx)(uikit_product_icons_1.CloudLogoSVG, { size: 24 });
+    }, [error, mode, path]);
+    if (loading) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.skeletonWrapper, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { width: 24, height: 24, loading: true, borderRadius: 4 }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("a", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.logo, className), href: href, tabIndex: 0, onClick: onClick }, (0, utils_1.extractDataTestProps)(rest), { children: logo })));
+}

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

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

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

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

@@ -0,0 +1,28 @@
+a.logo{
+  display:flex;
+  flex-shrink:0;
+  padding:var(--dimension-1m, 8px);
+  cursor:pointer;
+  border-radius:var(--dimension-050m, 4px);
+  min-width:40px;
+  box-sizing:border-box;
+  max-height:40px;
+  min-height:40px;
+  align-items:center;
+}
+a.logo: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, );
+  outline-color:var(--sys-available-complementary, #1c1c24);
+}
+
+.skeletonWrapper{
+  padding:var(--dimension-1m, 8px);
+}
+
+.logoImg{
+  width:auto;
+  max-height:24px;
+  min-height:24px;
+}

package/dist/cjs/components/MainMenu/Content/Content.d.ts

@@ -0,0 +1,20 @@
+import { ReactElement, ReactNode } from 'react';
+import { LinksGroup } from '../types';
+export type ContentProps = {
+    searchValue?: string;
+    serviceGroups?: LinksGroup[];
+    search?: ReactNode;
+    banners?: ReactNode;
+    cards?: ReactElement[];
+    footer?: ReactNode;
+    favorite?: {
+        value: string[];
+        onChange: (productId: string) => (addingValue: boolean) => void;
+    };
+    isMobile?: boolean;
+    initialEmpty?: boolean;
+    className?: string;
+    onLinkChange?: (value: string) => void;
+    onClose?(): void;
+};
+export declare function Content({ searchValue, banners, search, serviceGroups, className, footer, favorite, isMobile, onClose, onLinkChange, }: ContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MainMenu/Content/Content.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Content = Content;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_card_predefined_1 = require("@sbercloud/uikit-product-card-predefined");
+const uikit_product_locale_1 = require("@sbercloud/uikit-product-locale");
+const uikit_product_title_clickable_1 = require("@sbercloud/uikit-product-title-clickable");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function Content({ searchValue, banners, search, serviceGroups, className, footer, favorite, isMobile, onClose, onLinkChange, }) {
+    const { t } = (0, uikit_product_locale_1.useLocale)('Header');
+    const wrappedClick = (0, react_1.useCallback)(({ disabled, onClick }, cb) => (e) => {
+        if (disabled) {
+            e === null || e === void 0 ? void 0 : e.preventDefault();
+            return;
+        }
+        if (!(e === null || e === void 0 ? void 0 : e.metaKey)) {
+            e === null || e === void 0 ? void 0 : e.preventDefault();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        cb === null || cb === void 0 ? void 0 : cb();
+    }, [onClose]);
+    const cards = (0, react_1.useMemo)(() => serviceGroups === null || serviceGroups === void 0 ? void 0 : serviceGroups.map(({ id, label, items }) => ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.card, id: id, "data-test-id": `header__drawer-menu__group-card-${id}`, children: [!label.onClick ? ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.cardTitle, children: label.text })) : ((0, jsx_runtime_1.jsx)(uikit_product_title_clickable_1.TitleClickable, { title: label.text, href: '#', onClick: label.onClick })), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.cardBody, "data-mobile": isMobile || undefined, children: items.map(service => ((0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardServiceSmall, { title: service.label, emblem: { icon: service.icon }, "data-test-id": `header__drawer-menu__link-${service.id}`, outline: true, href: service.href, onClick: wrappedClick(service, () => onLinkChange === null || onLinkChange === void 0 ? void 0 : onLinkChange(service.id)), favorite: favorite
+                        ? {
+                            checked: favorite === null || favorite === void 0 ? void 0 : favorite.value.includes(service.id),
+                            onChange: favorite === null || favorite === void 0 ? void 0 : favorite.onChange(service.id),
+                            visibilityStrategy: isMobile ? 'always' : 'hover',
+                            enabled: !service.disabled,
+                        }
+                        : undefined, promoBadge: service.badge }, String(id) + service.id))) })] }, String(id)))), [favorite, isMobile, onLinkChange, serviceGroups, wrappedClick]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(Boolean(serviceGroups === null || serviceGroups === void 0 ? void 0 : serviceGroups.length) || searchValue) && search, (0, jsx_runtime_1.jsxs)("div", { className: className, children: [!searchValue && banners, cards, !(cards === null || cards === void 0 ? void 0 : cards.length) && !searchValue && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.noData, "data-test-id": 'header__drawer-menu__no-data', children: t('noData') })), !(cards === null || cards === void 0 ? void 0 : cards.length) && searchValue && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.noData, "data-test-id": 'header__drawer-menu__no-data-found', children: t('noDataFound') })), footer] })] }));
+}

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

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

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

package/dist/cjs/components/MainMenu/Content/styles.module.css

@@ -0,0 +1,40 @@
+.card{
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  display:flex;
+  flex-direction:column;
+  padding:var(--dimension-2m, 16px);
+  gap:var(--dimension-1m, 8px);
+  border-radius:var(--dimension-1m, 8px);
+}
+
+.cardTitle{
+  font-family:var(--sans-title-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-title-m-font-weight, Semibold);
+  line-height:var(--sans-title-m-line-height, 24px);
+  font-size:var(--sans-title-m-font-size, 16px);
+  letter-spacing:var(--sans-title-m-letter-spacing, 0.15px);
+  paragraph-spacing:var(--sans-title-m-paragraph-spacing, 8.8px);
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.cardBody{
+  display:grid;
+  grid-template-columns:repeat(2, minmax(150px, 1fr));
+  gap:var(--dimension-1m, 8px);
+}
+.cardBody[data-mobile]{
+  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
+}
+
+.noData{
+  font-family:var(--sans-body-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-l-font-weight, Regular);
+  line-height:var(--sans-body-l-line-height, 24px);
+  font-size:var(--sans-body-l-font-size, 16px);
+  letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  display:flex;
+  justify-content:center;
+  padding:var(--dimension-2m, 16px);
+}

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

@@ -0,0 +1,4 @@
+import { MainMenuProps } from './types';
+export declare function MainMenu({ open: openProp, setOpen: setOpenProp, settingItems, leftTop, rightTop, serviceGroups, favorite, search, isMobile, onLinkChange, disabled, }: MainMenuProps & {
+    disabled?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MainMenu/MainMenu.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MainMenu = MainMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const button_1 = require("@snack-uikit/button");
+const utils_1 = require("@snack-uikit/utils");
+const MenuDesktop_1 = require("./MenuDesktop");
+const MenuMobile_1 = require("./MenuMobile");
+function MainMenu({ open: openProp, setOpen: setOpenProp, settingItems, leftTop, rightTop, serviceGroups, favorite, search, isMobile, onLinkChange, disabled, }) {
+    const [open = false, setOpen] = (0, utils_1.useValueControl)({ value: openProp, onChange: setOpenProp });
+    const MenuComponent = isMobile ? MenuMobile_1.MenuMobile : MenuDesktop_1.MenuDesktop;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { disabled: disabled, size: 'm', icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.MainMenuSVG, {}), onClick: () => {
+                    setOpen(true);
+                }, "data-test-id": 'header__drawer-menu-button' }), (0, jsx_runtime_1.jsx)(MenuComponent, { onLinkChange: onLinkChange, settingItems: settingItems, serviceGroups: serviceGroups, search: search, leftTop: leftTop, rightTop: rightTop, favorite: favorite, open: open, setOpen: setOpen })] }));
+}

package/dist/cjs/components/MainMenu/MenuDesktop/MenuDesktop.d.ts

@@ -0,0 +1,2 @@
+import { MainMenuProps } from '../types';
+export declare function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems, leftTop, rightTop, serviceGroups, favorite, search, onLinkChange, }: MainMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MainMenu/MenuDesktop/MenuDesktop.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuDesktop = MenuDesktop;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const drawer_1 = require("@snack-uikit/drawer");
+const list_1 = require("@snack-uikit/list");
+const scroll_1 = require("@snack-uikit/scroll");
+const utils_1 = require("@snack-uikit/utils");
+const Content_1 = require("../Content");
+const hooks_1 = require("../hooks");
+const Search_1 = require("../Search");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems, leftTop, rightTop, serviceGroups, favorite, search, onLinkChange, }) {
+    const [open = false, setOpen] = (0, utils_1.useValueControl)({ value: openProp, onChange: setOpenProp });
+    const { groupItems, scrollRef, searchRef, resultItems } = (0, hooks_1.useMenuItems)({
+        serviceGroups,
+        search,
+        favorite,
+    });
+    const isInitialEmptyCards = (serviceGroups === null || serviceGroups === void 0 ? void 0 : serviceGroups.length) === 0;
+    const isNeedRightBlock = rightTop || !isInitialEmptyCards;
+    const settingItemsWithClassName = settingItems.filter(list_1.isBaseItemProps).map(item => (Object.assign(Object.assign({}, item), { className: styles_module_scss_1.default.item })));
+    const groupItemsWithClass = (0, react_1.useMemo)(() => groupItems.map(item => (Object.assign(Object.assign({}, item), { className: styles_module_scss_1.default.item }))), [groupItems]);
+    return ((0, jsx_runtime_1.jsx)(drawer_1.DrawerCustom, { open: open, onClose: () => {
+            setOpen(false);
+        }, size: isNeedRightBlock ? 'm' : 's', position: 'left', className: styles_module_scss_1.default.drawer, rootClassName: styles_module_scss_1.default.drawerRoot, "data-test-id": 'header__drawer-menu', "data-small": !isNeedRightBlock || undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menu, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.left, "data-test-id": 'header__drawer-menu__left', children: [leftTop && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftTop, children: leftTop }), !isInitialEmptyCards && ((0, jsx_runtime_1.jsx)(list_1.List, { items: groupItemsWithClass, pinBottom: settingItemsWithClassName, scroll: true, size: 'm', barHideStrategy: 'never', className: styles_module_scss_1.default.list })), !leftTop && isInitialEmptyCards && (0, jsx_runtime_1.jsx)("div", {}), isInitialEmptyCards && settingItemsWithClassName.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.list, styles_module_scss_1.default.halfList), children: (0, jsx_runtime_1.jsx)(list_1.List, { items: settingItems.filter(list_1.isBaseItemProps).map(item => (Object.assign(Object.assign({}, item), { className: styles_module_scss_1.default.item }))), size: 'm', barHideStrategy: 'never' }) }))] }), isNeedRightBlock && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.right, "data-test-id": 'header__drawer-menu__right', children: (0, jsx_runtime_1.jsxs)(scroll_1.Scroll, { paddingAbsolute: true, className: styles_module_scss_1.default.scroll, ref: scrollRef, barHideStrategy: 'never', children: [isInitialEmptyCards && rightTop && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bannersWrap, children: rightTop }), !isInitialEmptyCards && ((0, jsx_runtime_1.jsx)(Content_1.Content, { onClose: () => {
+                                    setOpen(false);
+                                }, className: styles_module_scss_1.default.rightContent, search: search && (0, jsx_runtime_1.jsx)(Search_1.SearchDesktop, Object.assign({}, search, { ref: searchRef })), searchValue: search && search.searchValue, banners: rightTop, favorite: favorite, serviceGroups: resultItems, onLinkChange: onLinkChange }))] }) }))] }) }));
+}

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

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

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

package/dist/cjs/components/MainMenu/MenuDesktop/styles.module.css

@@ -0,0 +1,94 @@
+.drawer [data-test-id=drawer__close-button]{
+  display:none;
+}
+.drawer svg{
+  fill:currentColor;
+}
+
+.scroll{
+  padding:28px 28px 0 12px;
+  box-sizing:border-box;
+}
+
+.left{
+  display:flex;
+  flex-direction:column;
+  padding:32px 16px 24px 32px;
+  gap:16px;
+  justify-content:space-between;
+  position:relative;
+  box-sizing:border-box;
+  width:272px;
+}
+
+.drawerRoot [data-test-id=header__drawer-menu][data-small]{
+  width:316px;
+}
+.drawerRoot [data-test-id=header__drawer-menu][data-small] .left{
+  width:316px;
+}
+.drawerRoot [data-test-id=header__drawer-menu]:not([data-small]){
+  min-width:744px;
+  overflow:hidden;
+}
+
+.leftTop{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-1m, 8px);
+  flex-grow:1;
+  min-height:var(--dimension-7m, 56px);
+}
+
+.right{
+  display:flex;
+  flex-direction:column;
+  height:100dvh;
+  flex:1;
+  min-width:0;
+  position:relative;
+}
+.right::before{
+  content:"";
+  position:absolute;
+  top:32px;
+  left:0;
+  background-color:var(--sys-neutral-decor-default, #dde0ea);
+  width:1px;
+  bottom:24px;
+}
+
+.rightContent{
+  display:flex;
+  flex-direction:column;
+  gap:8px;
+  padding:4px;
+  padding-bottom:24px;
+}
+
+.menu{
+  display:flex;
+  height:100%;
+  box-sizing:border-box;
+  background-color:var(--sys-neutral-background, #eeeff3);
+}
+
+.list{
+  margin-left:-31px !important;
+  margin-right:-16px !important;
+}
+
+.halfList{
+  border-top:1px solid var(--sys-neutral-decor-default, #dde0ea);
+  padding-top:8px;
+}
+
+.item{
+  padding-left:22px !important;
+  box-sizing:border-box;
+}
+
+.bannersWrap{
+  padding:var(--dimension-050m, 4px);
+  padding-top:var(--dimension-025m, 2px);
+}

package/dist/cjs/components/MainMenu/MenuMobile/MenuMobile.d.ts

@@ -0,0 +1,2 @@
+import { MainMenuProps } from '../types';
+export declare function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems, leftTop, rightTop, serviceGroups, favorite, search, onLinkChange, }: MainMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MainMenu/MenuMobile/MenuMobile.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuMobile = MenuMobile;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_product_locale_1 = require("@sbercloud/uikit-product-locale");
+const uikit_product_mobile_drawer_1 = require("@sbercloud/uikit-product-mobile-drawer");
+const list_1 = require("@snack-uikit/list");
+const scroll_1 = require("@snack-uikit/scroll");
+const utils_1 = require("@snack-uikit/utils");
+const Content_1 = require("../Content");
+const hooks_1 = require("../hooks");
+const Search_1 = require("../Search");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems, leftTop, rightTop, serviceGroups, favorite, search, onLinkChange, }) {
+    const [open = false, setOpen] = (0, utils_1.useValueControl)({ value: openProp, onChange: setOpenProp });
+    const { t } = (0, uikit_product_locale_1.useLocale)('Header');
+    const isInitialEmptyCards = (serviceGroups === null || serviceGroups === void 0 ? void 0 : serviceGroups.length) === 0;
+    const { searchRef, resultItems } = (0, hooks_1.useMenuItems)({
+        serviceGroups,
+        search,
+        favorite,
+    });
+    return ((0, jsx_runtime_1.jsxs)(uikit_product_mobile_drawer_1.MobileDrawerCustom, { open: open, onClose: () => {
+            setOpen(false);
+        }, className: styles_module_scss_1.default.drawerMobile, swipeEnabled: false, "data-test-id": 'header__drawer-menu-mobile', closeOnPopstate: true, children: [(0, jsx_runtime_1.jsx)(uikit_product_mobile_drawer_1.MobileDrawerCustom.Header, { title: t('navigation') }), (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { barHideStrategy: 'never', children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.scrollMobile, children: [top && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.rightContent, children: leftTop }), !isInitialEmptyCards && ((0, jsx_runtime_1.jsx)(Content_1.Content, { isMobile: true, onClose: () => {
+                                setOpen(false);
+                            }, onLinkChange: onLinkChange, search: search && (0, jsx_runtime_1.jsx)(Search_1.SearchMobile, Object.assign({}, search, { ref: searchRef })), className: styles_module_scss_1.default.rightContent, searchValue: search && search.searchValue, banners: rightTop, favorite: favorite, serviceGroups: resultItems })), isInitialEmptyCards && rightTop && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bannersWrap, children: rightTop }), settingItems.length > 0 && ((0, jsx_runtime_1.jsx)(list_1.List, { className: styles_module_scss_1.default.settings, items: [{ type: 'group', items: [], divider: true }, ...settingItems.filter(list_1.isBaseItemProps)], size: 'm', barHideStrategy: 'never' }))] }) })] }));
+}

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

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

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

package/dist/cjs/components/MainMenu/MenuMobile/styles.module.css

@@ -0,0 +1,23 @@
+.rightContent{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-1m, 8px);
+  padding-top:4px;
+}
+
+.drawerMobile{
+  background-color:var(--sys-neutral-background, #eeeff3) !important;
+}
+
+.scrollMobile{
+  padding:var(--dimension-2m, 16px);
+  padding-top:0;
+}
+
+.bannersWrap{
+  margin-top:var(--dimension-1m, 8px);
+}
+
+.settings{
+  margin-top:var(--dimension-1m, 8px);
+}

package/dist/cjs/components/MainMenu/Search/SearchDesktop/SearchDesktop.d.ts

@@ -0,0 +1,2 @@
+import { SearchProps } from '../types';
+export declare const SearchDesktop: import("react").ForwardRefExoticComponent<SearchProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/MainMenu/Search/SearchDesktop/SearchDesktop.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchDesktop = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_locale_1 = require("@sbercloud/uikit-product-locale");
+const chips_1 = require("@snack-uikit/chips");
+const search_1 = require("@snack-uikit/search");
+const SearchSettingsButton_1 = require("../SearchSettingsButton");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+exports.SearchDesktop = (0, react_1.forwardRef)(({ searchValue, searchFn, searchFunctions, onChangeSearchFn, onSearchValueChange }, ref) => {
+    const { t } = (0, uikit_product_locale_1.useLocale)('Header');
+    const [areSearchSettingsVisible, setAreSearchSettingsVisible] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.searchItem, ref: ref, children: [(0, jsx_runtime_1.jsx)(search_1.Search, { size: 'm', outline: true, placeholder: t('searchByServices'), value: searchValue, onChange: onSearchValueChange, "data-test-id": 'header__drawer-menu__search', className: styles_module_scss_1.default.search, postfix: (0, jsx_runtime_1.jsx)(SearchSettingsButton_1.SearchSettingsButton, { onClick: () => setAreSearchSettingsVisible(prevOpen => !prevOpen) }) }), areSearchSettingsVisible && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.searchSettingsChips, children: searchFunctions.map(item => ((0, jsx_runtime_1.jsx)(chips_1.ChipToggle, { label: item.label, checked: searchFn === item.id, onChange: () => onChangeSearchFn(item.id), "data-test-id": `header__drawer-menu__search-option-${item.id}`, size: 'xs' }, item.id))) }))] }));
+});

package/dist/cjs/components/MainMenu/Search/SearchDesktop/index.d.ts

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

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

package/dist/cjs/components/MainMenu/Search/SearchDesktop/styles.module.css

@@ -0,0 +1,17 @@
+.searchItem{
+  position:sticky;
+  z-index:1;
+  top:0;
+  background-color:var(--sys-neutral-background, #eeeff3);
+  padding:4px;
+  padding-bottom:var(--dimension-1m, 8px);
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-1m, 8px);
+}
+
+.searchSettingsChips{
+  display:flex;
+  flex-direction:row;
+  gap:var(--dimension-050m, 4px);
+}

package/dist/cjs/components/MainMenu/Search/SearchMobile/SearchMobile.d.ts

@@ -0,0 +1,2 @@
+import { SearchProps } from '../types';
+export declare const SearchMobile: import("react").ForwardRefExoticComponent<SearchProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/MainMenu/Search/SearchMobile/SearchMobile.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchMobile = void 0;
+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 uikit_product_mobile_modal_1 = require("@sbercloud/uikit-product-mobile-modal");
+const button_1 = require("@snack-uikit/button");
+const list_1 = require("@snack-uikit/list");
+const search_1 = require("@snack-uikit/search");
+const typography_1 = require("@snack-uikit/typography");
+const SearchSettingsButton_1 = require("../SearchSettingsButton");
+const constants_1 = require("./constants");
+const hooks_1 = require("./hooks");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+exports.SearchMobile = (0, react_1.forwardRef)(({ searchValue, searchFn, searchFunctions, onChangeSearchFn, onSearchValueChange }, ref) => {
+    const { t } = (0, uikit_product_locale_1.useLocale)('Header');
+    const [areSearchSettingsVisible, setAreSearchSettingsVisible] = (0, react_1.useState)(false);
+    const { searchRef: newSearchRef, animationState, toggleSearchActive, isSearchActive, searchInputTabIndex, } = (0, hooks_1.useSearchAnimation)();
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.searchItem, ref: ref, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.searchWrap, style: {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                '--sc-header-animation-enter': constants_1.SEARCH_TRANSITION_TIMEOUT.enter,
+                '--sc-header-animation-exit': constants_1.SEARCH_TRANSITION_TIMEOUT.exit,
+            }, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansTitleM, { children: t('services') }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.searchMobile, "data-transition-status": animationState.status, "data-is-mounted": animationState.isMounted || undefined, children: [(0, jsx_runtime_1.jsx)(search_1.Search, { size: 'm', placeholder: t('searchByServices'), value: searchValue, onChange: onSearchValueChange, "data-test-id": 'header__drawer-menu__search', ref: newSearchRef, tabIndex: searchInputTabIndex, postfix: (0, jsx_runtime_1.jsx)(SearchSettingsButton_1.SearchSettingsButton, { onClick: () => setAreSearchSettingsVisible(true) }) }), (0, jsx_runtime_1.jsxs)(uikit_product_mobile_modal_1.MobileModalCustom, { open: areSearchSettingsVisible, onClose: () => setAreSearchSettingsVisible(false), closeOnPopstate: true, closeButtonEnabled: true, children: [(0, jsx_runtime_1.jsx)(uikit_product_mobile_modal_1.MobileModalCustom.Header, { title: t('searchSettingsMobileModalHeader') }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.searchModalBody, children: (0, jsx_runtime_1.jsx)(list_1.List, { className: styles_module_scss_1.default.searchSettingsMobileOptions, items: searchFunctions.map(item => ({
+                                            id: item.id,
+                                            content: {
+                                                option: item.label,
+                                            },
+                                        })), size: 'm', selection: {
+                                            mode: 'single',
+                                            value: searchFn,
+                                            onChange: value => {
+                                                onChangeSearchFn(value);
+                                                setAreSearchSettingsVisible(false);
+                                            },
+                                        } }) })] })] }), (0, jsx_runtime_1.jsx)(button_1.ButtonElevated, { size: 'm', className: styles_module_scss_1.default.searchButton, icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.SearchSVG, {}), onClick: toggleSearchActive, "data-test-id": 'header__drawer-menu__close-search-icon', "data-search-active": isSearchActive || undefined })] }) }));
+});

package/dist/cjs/components/MainMenu/Search/SearchMobile/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const SEARCH_TRANSITION_TIMEOUT: {
+    enter: number;
+    exit: number;
+};

package/dist/cjs/components/MainMenu/Search/SearchMobile/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SEARCH_TRANSITION_TIMEOUT = void 0;
+exports.SEARCH_TRANSITION_TIMEOUT = {
+    enter: 150,
+    exit: 100,
+};