@cloud-ru/ds-uikit-product-header 1.0.1-preview-7665e9c3.0

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MENU_WIDTH_MAX = exports.MENU_WIDTH_MIN = exports.MENU_WIDTH_STORAGE_KEY = void 0;
+exports.MENU_WIDTH_STORAGE_KEY = 'cloud-ru-main-menu-user-width';
+// паддинг справа 24px у дровера нужно компенсировать
+exports.MENU_WIDTH_MIN = 960 + 24;
+exports.MENU_WIDTH_MAX = 1208 + 24;

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

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

package/dist/cjs/components/MainMenu/helperComponents/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/helperComponents/MenuDesktop/styles.module.css

@@ -0,0 +1,98 @@
+.drawer{
+  border-radius:var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopLeftRadius, var(--sn-primitive-dimension-0, 0)) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px))) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px))) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomLeftRadius, var(--sn-primitive-dimension-0, 0));
+}
+.drawer [data-test-id=drawer__close-button]{
+  display:none;
+}
+.drawer svg{
+  fill:currentcolor;
+}
+
+.scroll{
+  box-sizing:border-box;
+}
+
+.left{
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-16, 16px);
+  justify-content:space-between;
+  box-sizing:border-box;
+  width:var(--snack-menu-left-width);
+  min-height:0;
+  padding:var(--sn-primitive-dimension-16, 16px);
+}
+.left:has(> :only-child){
+  justify-content:flex-end;
+}
+
+.drawerRoot{
+  width:100%;
+}
+.drawerRoot [data-test-id=header__drawer-menu][data-small][data-position][data-width]{
+  width:100%;
+  max-width:calc(264px + var(--sn-drawer-anatomy-container-vertical-positionLeft-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))));
+}
+.drawerRoot [data-test-id=header__drawer-menu][data-small][data-position][data-width] .left{
+  width:100%;
+  max-width:100%;
+}
+
+.leftTop{
+  display:flex;
+  flex:1 1 0;
+  flex-direction:column;
+  min-height:0;
+}
+
+.settingItems{
+  flex-shrink:0;
+  height:auto;
+}
+
+.right{
+  position:relative;
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  min-width:0;
+  height:100%;
+}
+
+.rightContent{
+  container-type:inline-size;
+  overflow-x:clip;
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  min-width:0;
+  padding:var(--sn-primitive-dimension-16, 16px);
+}
+
+.menu{
+  --snack-menu-header-height:40px;
+  --snack-menu-left-width:263px;
+  position:relative;
+  height:100vh;
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+}
+
+.menuBody{
+  display:flex;
+  box-sizing:border-box;
+  height:calc(100% - var(--snack-menu-header-height));
+}
+
+.menuHeader{
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  height:var(--snack-menu-header-height);
+}
+
+.menuHeaderBrand{
+  width:var(--snack-menu-left-width);
+  height:var(--snack-menu-header-height);
+  padding:0 var(--sn-primitive-dimension-4, 4px);
+}

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

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export type MenuHeaderBrandProps = {
+    logo?: ReactNode;
+    onClose(): void;
+    className?: string;
+};
+export declare function MenuHeaderBrand({ logo, onClose, className }: MenuHeaderBrandProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuHeaderBrand = MenuHeaderBrand;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const divider_1 = require("@cloud-ru/ds-divider");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const classnames_1 = __importDefault(require("classnames"));
+const locale_1 = require("../../../../locale");
+const HeaderButton_1 = require("../../../HeaderButton");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function MenuHeaderBrand({ logo, onClose, className }) {
+    const { t } = locale_1.headerLocale.useTranslations();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.container, className), children: [logo, (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), (0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { className: styles_module_scss_1.default.closeButton, onClick: onClose, icon: (0, jsx_runtime_1.jsx)(system_1.ChevronLeftSVG, {}), label: t('close') })] }));
+}

package/dist/cjs/components/MainMenu/helperComponents/MenuHeaderBrand/index.d.ts

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

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

package/dist/cjs/components/MainMenu/helperComponents/MenuHeaderBrand/styles.module.css

@@ -0,0 +1,13 @@
+.container{
+  display:flex;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  box-sizing:border-box;
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+}
+
+.closeButton{
+  flex-grow:1;
+  flex-shrink:1;
+  justify-content:flex-start;
+}

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

@@ -0,0 +1,2 @@
+import { MainMenuProps } from '../../types';
+export declare function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, favorite, search, logo, rightTop, leftTop, loading, }: MainMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MainMenu/helperComponents/MenuMobile/MenuMobile.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.MenuMobile = MenuMobile;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const list_1 = require("@cloud-ru/ds-list");
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+const mobileOverlays_1 = require("../../../../mobileOverlays");
+const useMainMenuDnd_1 = require("../../hooks/useMainMenuDnd");
+const useMenuItems_1 = require("../../hooks/useMenuItems");
+const Content_1 = require("../Content");
+const Favorites_1 = require("../Favorites");
+const MenuHeaderBrand_1 = require("../MenuHeaderBrand");
+const MountAnimation_1 = require("../MountAnimation");
+const ScrollWithAnimatedStickyPanel_1 = require("../ScrollWithAnimatedStickyPanel");
+const Search_1 = require("../Search");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const SNAP_POINTS = [1];
+function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, favorite, search, logo, rightTop, leftTop, loading, }) {
+    const [open = false, setOpen] = (0, utils_1.useValueControl)({ value: openProp, onChange: setOpenProp });
+    const hasSegments = segments && segments.some(segment => segment.items.length > 0);
+    const isSearching = Boolean(search?.value);
+    const { searchRef, resultItems } = (0, useMenuItems_1.useMenuItems)({
+        segments,
+        search,
+        platformGroups,
+    });
+    const allServiceGroups = (0, react_1.useMemo)(() => segments?.flatMap(segment => segment.items) ?? [], [segments]);
+    const handleClose = (0, react_1.useCallback)(() => {
+        setOpen(false);
+    }, [setOpen]);
+    return ((0, jsx_runtime_1.jsx)(mobileOverlays_1.MobileDrawerCustom, { open: open, onClose: handleClose, position: 'bottom', className: styles_module_scss_1.default.drawerMobile, swipeEnabled: false, "data-test-id": 'header__drawer-menu-mobile', closeOnPopstate: true, snapPoints: SNAP_POINTS, disableMotions: true, children: (0, jsx_runtime_1.jsx)(ScrollWithAnimatedStickyPanel_1.ScrollWithAnimatedStickyPanel, { panel: (0, jsx_runtime_1.jsx)(MenuHeaderBrand_1.MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles_module_scss_1.default.menuHeader }), children: (0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { className: styles_module_scss_1.default.scrollMobile, type: 'fade-slide-up', children: [search && (0, jsx_runtime_1.jsx)(Search_1.Search, { ...search, ref: searchRef, isMobile: true }), favorite && (0, jsx_runtime_1.jsx)(Favorites_1.Favorites, { favorite: favorite, allServiceGroups: allServiceGroups, isMobile: true }), leftTop && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.rightContent, children: leftTop }), hasSegments && ((0, jsx_runtime_1.jsx)(useMainMenuDnd_1.MainMenuDndContext, { children: (0, jsx_runtime_1.jsx)(Content_1.Content, { isMobile: true, onClose: handleClose, className: styles_module_scss_1.default.rightContent, searchValue: search && search.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, loading: loading }) })), !isSearching && settingItems && (0, jsx_runtime_1.jsx)(list_1.List, { items: settingItems, size: 'm', barHideStrategy: 'never' })] }) }) }));
+}

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

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

package/dist/cjs/components/MainMenu/helperComponents/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/helperComponents/MenuMobile/styles.module.css

@@ -0,0 +1,25 @@
+.menuHeader{
+  height:var(--sn-primitive-dimension-40, 40px);
+  padding:0 var(--sn-primitive-dimension-4, 4px);
+  border-bottom:1px solid var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+
+.rightContent{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  min-width:0;
+}
+
+.drawerMobile{
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3))) !important;
+}
+
+.scrollMobile{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  min-height:100%;
+  margin-top:var(--sn-primitive-dimension-40, 40px);
+  padding:var(--sn-primitive-dimension-16, 16px);
+}

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

@@ -0,0 +1,7 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { PropsWithChildren } from 'react';
+export type MountAnimationProps = PropsWithChildren<WithSupportProps<{
+    type?: 'fade-slide-up' | 'fade-slide-up-right' | 'slide-right' | 'fade-in';
+    className?: string;
+}>>;
+export declare function MountAnimation({ children, type, className, ...props }: MountAnimationProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MountAnimation = MountAnimation;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function MountAnimation({ children, type = 'slide-right', className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), ...(0, utils_1.extractSupportProps)(props), "data-animation-type": type, children: children }));
+}

package/dist/cjs/components/MainMenu/helperComponents/MountAnimation/index.d.ts

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

package/dist/cjs/components/MainMenu/helperComponents/MountAnimation/index.js

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

package/dist/cjs/components/MainMenu/helperComponents/MountAnimation/styles.module.css

@@ -0,0 +1,60 @@
+.wrapper{
+  will-change:transform, opacity;
+  animation-duration:0.24s;
+  animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
+  animation-fill-mode:forwards;
+}
+.wrapper[data-animation-type=fade-slide-up-right]{
+  transform:translate(-12px, 4px);
+  opacity:0;
+  animation-name:fade-slide-up-right;
+}
+.wrapper[data-animation-type=fade-slide-up]{
+  transform:translate(0, 4px);
+  opacity:0;
+  animation-name:fade-slide-up;
+}
+.wrapper[data-animation-type=slide-right]{
+  transform:translate(-12px, 0);
+  animation-name:slide-right;
+}
+.wrapper[data-animation-type=fade-in]{
+  animation-name:fade-in;
+}
+
+@keyframes fade-in{
+  0%{
+    opacity:0;
+  }
+  100%{
+    opacity:1;
+  }
+}
+@keyframes fade-slide-up{
+  0%{
+    transform:translate(0, 4px);
+    opacity:0;
+  }
+  100%{
+    transform:translate(0, 0);
+    opacity:1;
+  }
+}
+@keyframes fade-slide-up-right{
+  0%{
+    transform:translate(-12px, 4px);
+    opacity:0;
+  }
+  100%{
+    transform:translate(0, 0);
+    opacity:1;
+  }
+}
+@keyframes slide-right{
+  0%{
+    transform:translate(-12px, 0);
+  }
+  100%{
+    transform:translate(0, 0);
+  }
+}

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

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+type ScrollWithAnimatedStickyPanelProps = PropsWithChildren<{
+    panel: React.ReactNode;
+}>;
+export declare function ScrollWithAnimatedStickyPanel({ panel, children }: ScrollWithAnimatedStickyPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollWithAnimatedStickyPanel = ScrollWithAnimatedStickyPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const scroll_1 = require("@cloud-ru/ds-scroll");
+const react_1 = require("react");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ScrollWithAnimatedStickyPanel({ panel, children }) {
+    const [positions, setPositions] = (0, react_1.useState)({ panelTopShift: 0, containerScroll: 0 });
+    const [panelHeight, setPanelHeight] = (0, react_1.useState)(0);
+    const panelRef = (0, react_1.useRef)(undefined);
+    const handleScroll = (0, react_1.useCallback)((event) => {
+        if (!event || !event.target)
+            return;
+        const target = event.target;
+        setPositions(prev => {
+            if (!panelRef.current)
+                return prev;
+            const panelHeight = panelRef.current.offsetHeight;
+            setPanelHeight(panelHeight);
+            const diff = prev.containerScroll - target.scrollTop;
+            return {
+                panelTopShift: Math.max(-panelHeight, Math.min(0, prev.panelTopShift + diff)),
+                containerScroll: target.scrollTop,
+            };
+        });
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, style: { '--snack-autohide-panel-height': `${panelHeight}px` }, children: [(0, jsx_runtime_1.jsx)(scroll_1.Scroll, { barHideStrategy: 'never', overflow: { x: 'hidden' }, onScroll: handleScroll, children: children }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.panel, ref: element => {
+                    if (element) {
+                        setPanelHeight(element.offsetHeight);
+                        panelRef.current = element;
+                    }
+                }, style: { top: positions.panelTopShift }, children: panel })] }));
+}

package/dist/cjs/components/MainMenu/helperComponents/ScrollWithAnimatedStickyPanel/index.d.ts

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

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

package/dist/cjs/components/MainMenu/helperComponents/ScrollWithAnimatedStickyPanel/styles.module.css

@@ -0,0 +1,12 @@
+.container{
+  position:relative;
+  height:100%;
+}
+.container :global .os-scrollbar-vertical{
+  top:var(--snack-autohide-panel-height, 0) !important;
+}
+
+.panel{
+  position:absolute;
+  width:100%;
+}

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

@@ -0,0 +1,7 @@
+export declare const Search: import("react").ForwardRefExoticComponent<Pick<import("@cloud-ru/ds-search").SearchProps, "onFocus" | "onBlur"> & {
+    value: string;
+    onChange(value: string): void;
+    onSearchNoResult?(value: string): void;
+} & {
+    isMobile?: boolean;
+} & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Search = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const search_1 = require("@cloud-ru/ds-search");
+const react_1 = require("react");
+const locale_1 = require("../../../../locale");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+exports.Search = (0, react_1.forwardRef)(({ value, onChange, onBlur, onFocus, isMobile = false }, ref) => {
+    const { t } = locale_1.headerLocale.useTranslations();
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.searchWrap, "data-mobile": isMobile || undefined, children: (0, jsx_runtime_1.jsx)(search_1.Search, { ref: ref, size: 'm', outline: !isMobile, placeholder: t('searchByServices'), value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, "data-test-id": 'header__drawer-menu__search', className: styles_module_scss_1.default.search, background: isMobile }) }));
+});

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

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

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

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

@@ -0,0 +1,8 @@
+.searchWrap:not([data-mobile]){
+  flex:1 1 auto;
+  padding:var(--sn-primitive-dimension-2, 2px) var(--sn-primitive-dimension-10, 10px);
+}
+
+.search{
+  width:100%;
+}

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

@@ -0,0 +1,19 @@
+import { CardServiceLightProps } from '@cloud-ru/ds-uikit-product-card-predefined';
+import { MouseEvent } from 'react';
+import { FavoriteProps, InnerLink } from '../../types';
+export type ServiceCardProps = {
+    service: InnerLink;
+    favorite?: FavoriteProps;
+    isMobile?: boolean;
+    onServiceClick?(service: InnerLink, event: MouseEvent<HTMLElement>): void;
+    showDescription: boolean;
+    className?: string;
+    tabIndex?: number;
+    dragPreview?: boolean;
+} & Pick<CardServiceLightProps, 'expandable'>;
+export declare function ServiceCard({ service, favorite, isMobile, onServiceClick, showDescription, className, tabIndex, dragPreview, expandable, }: ServiceCardProps): import("react/jsx-runtime").JSX.Element;
+export type DraggableServiceCardProps = ServiceCardProps & {
+    groupId: string;
+    dragDisabled?: boolean;
+};
+export declare function DraggableServiceCard({ groupId, service, favorite, dragDisabled, ...props }: DraggableServiceCardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ServiceCard = ServiceCard;
+exports.DraggableServiceCard = DraggableServiceCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@dnd-kit/core");
+const drag_and_drop_1 = require("@cloud-ru/ds-drag-and-drop");
+const uikit_product_card_predefined_1 = require("@cloud-ru/ds-uikit-product-card-predefined");
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../../utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ServiceCard({ service, favorite, isMobile, onServiceClick, showDescription, className, tabIndex, dragPreview, expandable, }) {
+    const isInFavorites = favorite?.value.includes(service.id) ?? false;
+    const favoriteProps = !dragPreview && favorite
+        ? {
+            checked: isInFavorites,
+            onChange: favorite.onChange(service.id),
+            enabled: !service.disabled,
+        }
+        : undefined;
+    const commonProps = {
+        as: 'a',
+        title: service.label,
+        icon: (0, utils_1.getLinkEmblem)(service),
+        'data-test-id': `header__drawer-menu__link-${service.id}`,
+        href: service.href,
+        onClick: (event) => onServiceClick?.(service, event),
+        favorite: favoriteProps,
+        actionsVisibility: isMobile ? 'always' : 'hover',
+        actionsSize: isMobile ? 's' : 'm',
+        promoTag: service.badge,
+        className: (0, classnames_1.default)(styles_module_scss_1.default.card, className),
+        tabIndex,
+        expandable,
+    };
+    const card = showDescription ? ((0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardServiceInfo, { ...commonProps, description: service.description ?? '' })) : ((0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardServiceLight, { ...commonProps, tooltip: !dragPreview && service.description
+            ? {
+                tip: service.description,
+            }
+            : undefined }));
+    return dragPreview ? (0, jsx_runtime_1.jsx)(drag_and_drop_1.DragPreview, { className: styles_module_scss_1.default.dragCardPreview, children: card }) : card;
+}
+function DraggableServiceCard({ groupId, service, favorite, dragDisabled, ...props }) {
+    const { attributes, listeners, setNodeRef, isDragging } = (0, core_1.useDraggable)({
+        id: (0, utils_1.getServiceSourceDragId)(groupId, service.id),
+        disabled: dragDisabled || service.disabled || favorite?.value.includes(service.id),
+    });
+    const { tabIndex, ...restAttributes } = attributes ?? {};
+    return ((0, jsx_runtime_1.jsx)(drag_and_drop_1.DragGhost, { innerRef: setNodeRef, className: styles_module_scss_1.default.draggableCard, dragging: isDragging, mode: drag_and_drop_1.DRAG_MODE.Static, ...listeners, ...restAttributes, children: (0, jsx_runtime_1.jsx)(ServiceCard, { service: service, favorite: favorite, ...props, tabIndex: tabIndex }) }));
+}

package/dist/cjs/components/MainMenu/helperComponents/ServiceCard/index.d.ts

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

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

package/dist/cjs/components/MainMenu/helperComponents/ServiceCard/styles.module.css

@@ -0,0 +1,12 @@
+.card{
+  min-width:0;
+}
+
+.dragCardPreview{
+  cursor:grabbing;
+  border-radius:var(--sn-density-radius-3xs, var(--sn-primitive-dimension-2, 2px));
+}
+
+.draggableCard{
+  min-width:0;
+}