@cloud-ru/uikit-product-header 5.0.17

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

@@ -0,0 +1,20 @@
+import { MouseEventHandler } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+export declare const HEADER_LOGO_MODE: {
+    readonly develop: "develop";
+    readonly stage: "stage";
+    readonly hybrid: "hybrid";
+    readonly prod: "prod";
+};
+type ValueOf<T> = T[keyof T];
+export type HeaderLogoMode = ValueOf<typeof HEADER_LOGO_MODE>;
+export type LogoProps = WithSupportProps<{
+    loading?: boolean;
+    path?: string;
+    mode?: HeaderLogoMode;
+    href: string;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    className?: string;
+}>;
+export declare function Logo({ path, loading, mode, href, onClick, className, ...rest }: LogoProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/Logo/Logo.js

@@ -0,0 +1,54 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useEffect, useMemo, useState } from 'react';
+import { CloudLogoDevSVG, CloudLogoHybridSVG, CloudLogoStageSVG, CloudLogoSVG } from '@sbercloud/uikit-product-icons';
+import { Skeleton } from '@snack-uikit/skeleton';
+import { extractDataTestProps } from '@snack-uikit/utils';
+import styles from './styles.module.css';
+export const HEADER_LOGO_MODE = {
+    develop: 'develop',
+    stage: 'stage',
+    hybrid: 'hybrid',
+    prod: 'prod',
+};
+export function Logo(_a) {
+    var { path, loading, mode, href, onClick, className } = _a, rest = __rest(_a, ["path", "loading", "mode", "href", "onClick", "className"]);
+    const [error, setError] = useState(false);
+    useEffect(() => {
+        setError(false);
+    }, [path, loading]);
+    const logo = useMemo(() => {
+        if (path && !error) {
+            return (_jsx("img", { src: path, alt: 'logo', className: styles.logoImg, onLoad: () => {
+                    setError(false);
+                }, onError: () => {
+                    setError(true);
+                } }));
+        }
+        if (mode === HEADER_LOGO_MODE.develop) {
+            return _jsx(CloudLogoDevSVG, { size: 64 });
+        }
+        if (mode === HEADER_LOGO_MODE.stage) {
+            return _jsx(CloudLogoStageSVG, { size: 74 });
+        }
+        if (mode === HEADER_LOGO_MODE.hybrid) {
+            return _jsx(CloudLogoHybridSVG, { size: 78 });
+        }
+        return _jsx(CloudLogoSVG, { size: 24 });
+    }, [error, mode, path]);
+    if (loading) {
+        return (_jsx("div", { className: styles.skeletonWrapper, children: _jsx(Skeleton, { width: 24, height: 24, loading: true, borderRadius: 4 }) }));
+    }
+    return (_jsx("a", Object.assign({ className: cn(styles.logo, className), href: href, tabIndex: 0, onClick: onClick }, extractDataTestProps(rest), { children: logo })));
+}

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

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

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

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

package/dist/esm/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/esm/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/esm/components/MainMenu/Content/Content.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { CardServiceSmall } from '@sbercloud/uikit-product-card-predefined';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { TitleClickable } from '@sbercloud/uikit-product-title-clickable';
+import styles from './styles.module.css';
+export function Content({ searchValue, banners, search, serviceGroups, className, footer, favorite, isMobile, onClose, onLinkChange, }) {
+    const { t } = useLocale('Header');
+    const wrappedClick = 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 = useMemo(() => serviceGroups === null || serviceGroups === void 0 ? void 0 : serviceGroups.map(({ id, label, items }) => (_jsxs("div", { className: styles.card, id: id, "data-test-id": `header__drawer-menu__group-card-${id}`, children: [!label.onClick ? (_jsx("span", { className: styles.cardTitle, children: label.text })) : (_jsx(TitleClickable, { title: label.text, href: '#', onClick: label.onClick })), _jsx("div", { className: styles.cardBody, "data-mobile": isMobile || undefined, children: items.map(service => (_jsx(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 (_jsxs(_Fragment, { children: [(Boolean(serviceGroups === null || serviceGroups === void 0 ? void 0 : serviceGroups.length) || searchValue) && search, _jsxs("div", { className: className, children: [!searchValue && banners, cards, !(cards === null || cards === void 0 ? void 0 : cards.length) && !searchValue && (_jsx("div", { className: styles.noData, "data-test-id": 'header__drawer-menu__no-data', children: t('noData') })), !(cards === null || cards === void 0 ? void 0 : cards.length) && searchValue && (_jsx("div", { className: styles.noData, "data-test-id": 'header__drawer-menu__no-data-found', children: t('noDataFound') })), footer] })] }));
+}

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

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

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

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

package/dist/esm/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/esm/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/esm/components/MainMenu/MainMenu.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { MainMenuSVG } from '@sbercloud/uikit-product-icons';
+import { ButtonFunction } from '@snack-uikit/button';
+import { useValueControl } from '@snack-uikit/utils';
+import { MenuDesktop } from './MenuDesktop';
+import { MenuMobile } from './MenuMobile';
+export function MainMenu({ open: openProp, setOpen: setOpenProp, settingItems, leftTop, rightTop, serviceGroups, favorite, search, isMobile, onLinkChange, disabled, }) {
+    const [open = false, setOpen] = useValueControl({ value: openProp, onChange: setOpenProp });
+    const MenuComponent = isMobile ? MenuMobile : MenuDesktop;
+    return (_jsxs(_Fragment, { children: [_jsx(ButtonFunction, { disabled: disabled, size: 'm', icon: _jsx(MainMenuSVG, {}), onClick: () => {
+                    setOpen(true);
+                }, "data-test-id": 'header__drawer-menu-button' }), _jsx(MenuComponent, { onLinkChange: onLinkChange, settingItems: settingItems, serviceGroups: serviceGroups, search: search, leftTop: leftTop, rightTop: rightTop, favorite: favorite, open: open, setOpen: setOpen })] }));
+}

package/dist/esm/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/esm/components/MainMenu/MenuDesktop/MenuDesktop.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useMemo } from 'react';
+import { DrawerCustom } from '@snack-uikit/drawer';
+import { isBaseItemProps, List } from '@snack-uikit/list';
+import { Scroll } from '@snack-uikit/scroll';
+import { useValueControl } from '@snack-uikit/utils';
+import { Content } from '../Content';
+import { useMenuItems } from '../hooks';
+import { SearchDesktop } from '../Search';
+import styles from './styles.module.css';
+export function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems, leftTop, rightTop, serviceGroups, favorite, search, onLinkChange, }) {
+    const [open = false, setOpen] = useValueControl({ value: openProp, onChange: setOpenProp });
+    const { groupItems, scrollRef, searchRef, resultItems } = useMenuItems({
+        serviceGroups,
+        search,
+        favorite,
+    });
+    const isInitialEmptyCards = (serviceGroups === null || serviceGroups === void 0 ? void 0 : serviceGroups.length) === 0;
+    const isNeedRightBlock = rightTop || !isInitialEmptyCards;
+    const settingItemsWithClassName = settingItems.filter(isBaseItemProps).map(item => (Object.assign(Object.assign({}, item), { className: styles.item })));
+    const groupItemsWithClass = useMemo(() => groupItems.map(item => (Object.assign(Object.assign({}, item), { className: styles.item }))), [groupItems]);
+    return (_jsx(DrawerCustom, { open: open, onClose: () => {
+            setOpen(false);
+        }, size: isNeedRightBlock ? 'm' : 's', position: 'left', className: styles.drawer, rootClassName: styles.drawerRoot, "data-test-id": 'header__drawer-menu', "data-small": !isNeedRightBlock || undefined, children: _jsxs("div", { className: styles.menu, children: [_jsxs("div", { className: styles.left, "data-test-id": 'header__drawer-menu__left', children: [leftTop && _jsx("div", { className: styles.leftTop, children: leftTop }), !isInitialEmptyCards && (_jsx(List, { items: groupItemsWithClass, pinBottom: settingItemsWithClassName, scroll: true, size: 'm', barHideStrategy: 'never', className: styles.list })), !leftTop && isInitialEmptyCards && _jsx("div", {}), isInitialEmptyCards && settingItemsWithClassName.length > 0 && (_jsx("div", { className: cn(styles.list, styles.halfList), children: _jsx(List, { items: settingItems.filter(isBaseItemProps).map(item => (Object.assign(Object.assign({}, item), { className: styles.item }))), size: 'm', barHideStrategy: 'never' }) }))] }), isNeedRightBlock && (_jsx("div", { className: styles.right, "data-test-id": 'header__drawer-menu__right', children: _jsxs(Scroll, { paddingAbsolute: true, className: styles.scroll, ref: scrollRef, barHideStrategy: 'never', children: [isInitialEmptyCards && rightTop && _jsx("div", { className: styles.bannersWrap, children: rightTop }), !isInitialEmptyCards && (_jsx(Content, { onClose: () => {
+                                    setOpen(false);
+                                }, className: styles.rightContent, search: search && _jsx(SearchDesktop, Object.assign({}, search, { ref: searchRef })), searchValue: search && search.searchValue, banners: rightTop, favorite: favorite, serviceGroups: resultItems, onLinkChange: onLinkChange }))] }) }))] }) }));
+}

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

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

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

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

package/dist/esm/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/esm/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/esm/components/MainMenu/MenuMobile/MenuMobile.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { MobileDrawerCustom } from '@sbercloud/uikit-product-mobile-drawer';
+import { isBaseItemProps, List } from '@snack-uikit/list';
+import { Scroll } from '@snack-uikit/scroll';
+import { useValueControl } from '@snack-uikit/utils';
+import { Content } from '../Content';
+import { useMenuItems } from '../hooks';
+import { SearchMobile } from '../Search';
+import styles from './styles.module.css';
+export function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems, leftTop, rightTop, serviceGroups, favorite, search, onLinkChange, }) {
+    const [open = false, setOpen] = useValueControl({ value: openProp, onChange: setOpenProp });
+    const { t } = useLocale('Header');
+    const isInitialEmptyCards = (serviceGroups === null || serviceGroups === void 0 ? void 0 : serviceGroups.length) === 0;
+    const { searchRef, resultItems } = useMenuItems({
+        serviceGroups,
+        search,
+        favorite,
+    });
+    return (_jsxs(MobileDrawerCustom, { open: open, onClose: () => {
+            setOpen(false);
+        }, className: styles.drawerMobile, swipeEnabled: false, "data-test-id": 'header__drawer-menu-mobile', closeOnPopstate: true, children: [_jsx(MobileDrawerCustom.Header, { title: t('navigation') }), _jsx(Scroll, { barHideStrategy: 'never', children: _jsxs("div", { className: styles.scrollMobile, children: [top && _jsx("div", { className: styles.rightContent, children: leftTop }), !isInitialEmptyCards && (_jsx(Content, { isMobile: true, onClose: () => {
+                                setOpen(false);
+                            }, onLinkChange: onLinkChange, search: search && _jsx(SearchMobile, Object.assign({}, search, { ref: searchRef })), className: styles.rightContent, searchValue: search && search.searchValue, banners: rightTop, favorite: favorite, serviceGroups: resultItems })), isInitialEmptyCards && rightTop && _jsx("div", { className: styles.bannersWrap, children: rightTop }), settingItems.length > 0 && (_jsx(List, { className: styles.settings, items: [{ type: 'group', items: [], divider: true }, ...settingItems.filter(isBaseItemProps)], size: 'm', barHideStrategy: 'never' }))] }) })] }));
+}

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

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

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

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

package/dist/esm/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/esm/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/esm/components/MainMenu/Search/SearchDesktop/SearchDesktop.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { ChipToggle } from '@snack-uikit/chips';
+import { Search } from '@snack-uikit/search';
+import { SearchSettingsButton } from '../SearchSettingsButton';
+import styles from './styles.module.css';
+export const SearchDesktop = forwardRef(({ searchValue, searchFn, searchFunctions, onChangeSearchFn, onSearchValueChange }, ref) => {
+    const { t } = useLocale('Header');
+    const [areSearchSettingsVisible, setAreSearchSettingsVisible] = useState(false);
+    return (_jsxs("div", { className: styles.searchItem, ref: ref, children: [_jsx(Search, { size: 'm', outline: true, placeholder: t('searchByServices'), value: searchValue, onChange: onSearchValueChange, "data-test-id": 'header__drawer-menu__search', className: styles.search, postfix: _jsx(SearchSettingsButton, { onClick: () => setAreSearchSettingsVisible(prevOpen => !prevOpen) }) }), areSearchSettingsVisible && (_jsx("div", { className: styles.searchSettingsChips, children: searchFunctions.map(item => (_jsx(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/esm/components/MainMenu/Search/SearchDesktop/index.d.ts

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

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

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

package/dist/esm/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/esm/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/esm/components/MainMenu/Search/SearchMobile/SearchMobile.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { SearchSVG } from '@sbercloud/uikit-product-icons';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { MobileModalCustom } from '@sbercloud/uikit-product-mobile-modal';
+import { ButtonElevated } from '@snack-uikit/button';
+import { List } from '@snack-uikit/list';
+import { Search } from '@snack-uikit/search';
+import { Typography } from '@snack-uikit/typography';
+import { SearchSettingsButton } from '../SearchSettingsButton';
+import { SEARCH_TRANSITION_TIMEOUT } from './constants';
+import { useSearchAnimation } from './hooks';
+import styles from './styles.module.css';
+export const SearchMobile = forwardRef(({ searchValue, searchFn, searchFunctions, onChangeSearchFn, onSearchValueChange }, ref) => {
+    const { t } = useLocale('Header');
+    const [areSearchSettingsVisible, setAreSearchSettingsVisible] = useState(false);
+    const { searchRef: newSearchRef, animationState, toggleSearchActive, isSearchActive, searchInputTabIndex, } = useSearchAnimation();
+    return (_jsx("div", { className: styles.searchItem, ref: ref, children: _jsxs("div", { className: styles.searchWrap, style: {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                '--sc-header-animation-enter': SEARCH_TRANSITION_TIMEOUT.enter,
+                '--sc-header-animation-exit': SEARCH_TRANSITION_TIMEOUT.exit,
+            }, children: [_jsx(Typography.SansTitleM, { children: t('services') }), _jsxs("div", { className: styles.searchMobile, "data-transition-status": animationState.status, "data-is-mounted": animationState.isMounted || undefined, children: [_jsx(Search, { size: 'm', placeholder: t('searchByServices'), value: searchValue, onChange: onSearchValueChange, "data-test-id": 'header__drawer-menu__search', ref: newSearchRef, tabIndex: searchInputTabIndex, postfix: _jsx(SearchSettingsButton, { onClick: () => setAreSearchSettingsVisible(true) }) }), _jsxs(MobileModalCustom, { open: areSearchSettingsVisible, onClose: () => setAreSearchSettingsVisible(false), closeOnPopstate: true, closeButtonEnabled: true, children: [_jsx(MobileModalCustom.Header, { title: t('searchSettingsMobileModalHeader') }), _jsx("div", { className: styles.searchModalBody, children: _jsx(List, { className: styles.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);
+                                            },
+                                        } }) })] })] }), _jsx(ButtonElevated, { size: 'm', className: styles.searchButton, icon: _jsx(SearchSVG, {}), onClick: toggleSearchActive, "data-test-id": 'header__drawer-menu__close-search-icon', "data-search-active": isSearchActive || undefined })] }) }));
+});

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

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

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

@@ -0,0 +1,4 @@
+export const SEARCH_TRANSITION_TIMEOUT = {
+    enter: 150,
+    exit: 100,
+};

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

@@ -0,0 +1,12 @@
+export declare function useSearchAnimation(): {
+    searchRef: import("react").RefObject<HTMLInputElement>;
+    toggleSearchActive: () => void;
+    isSearchActive: boolean;
+    animationState: Readonly<{
+        status: import("react-transition-state").TransitionStatus;
+        isMounted: boolean;
+        isEnter: boolean;
+        isResolved: boolean;
+    }>;
+    searchInputTabIndex: number | undefined;
+};

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

@@ -0,0 +1,34 @@
+import { useEffect, useRef, useState } from 'react';
+import useTransition from 'react-transition-state';
+import { SEARCH_TRANSITION_TIMEOUT } from './constants';
+export function useSearchAnimation() {
+    const searchRef = useRef(null);
+    const [isSearchActive, setIsSearchActive] = useState(false);
+    const searchInputTabIndex = isSearchActive ? undefined : -1;
+    const [animationState, toggle] = useTransition({
+        mountOnEnter: true,
+        unmountOnExit: true,
+        initialEntered: isSearchActive,
+        timeout: SEARCH_TRANSITION_TIMEOUT,
+    });
+    useEffect(() => toggle(isSearchActive), [isSearchActive]);
+    const toggleSearchActive = () => setIsSearchActive(prevState => !prevState);
+    useEffect(() => {
+        var _a;
+        if (isSearchActive) {
+            (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        return () => {
+            if (isSearchActive) {
+                setIsSearchActive(false);
+            }
+        };
+    }, [isSearchActive]);
+    return {
+        searchRef,
+        toggleSearchActive,
+        isSearchActive,
+        animationState,
+        searchInputTabIndex,
+    };
+}

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

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

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

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

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

@@ -0,0 +1,57 @@
+.searchItem{
+  position:sticky;
+  z-index:1;
+  top:-0.5px;
+  background-color:var(--sys-neutral-background, #eeeff3);
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-1m, 8px);
+  padding:0;
+  padding-bottom:var(--dimension-1m, 8px);
+  padding-top:1px;
+  margin-top:7px;
+}
+
+.searchWrap{
+  position:relative;
+  display:flex;
+  justify-content:space-between;
+  align-items:center;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.searchMobile{
+  position:absolute;
+  top:0;
+  bottom:0;
+  height:100%;
+  right:0;
+  overflow:hidden;
+  display:flex;
+  align-items:center;
+  transition-timing-function:ease-in-out;
+  transition-property:all;
+  transition-duration:calc(var(--sc-header-animation-enter) * 1ms);
+  width:100%;
+  max-width:var(--size-button-m, 40px);
+  box-sizing:border-box;
+  opacity:0;
+}
+.searchMobile[data-transition-status=entering], .searchMobile[data-transition-status=entered]{
+  max-width:100%;
+  right:0;
+  width:100%;
+  opacity:1;
+  transition-duration:calc(var(--sc-header-animation-exit) * 1ms);
+}
+
+.searchButton[data-appearance=primary]{
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+}
+.searchButton[data-search-active]{
+  visibility:hidden;
+}
+
+.searchModalBody{
+  padding:var(--dimension-2m, 16px) 0;
+}