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

package/dist/esm/components/MainMenu/helperComponents/Favorites/hooks/useFavoritesDnd.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDndMonitor, useDroppable } from '@dnd-kit/core';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useMainMenuDndOverlay } from '../../../hooks/useMainMenuDnd.js';
+import { FAVORITES_DROP_ID, getServiceFavoriteDragId, isServiceDragId, isServiceFavoriteDragId, parseServiceDragId, } from '../../../utils/index.js';
+import { ServiceCard } from '../../ServiceCard/index.js';
+import { FAVORITES_SEGMENT } from '../constants.js';
+import { useFavoritesInsertIndicator } from './useFavoritesInsertIndicator.js';
+/**
+ * Оркестрирует drag&drop избранного: приём карточек сервисов из общей сетки
+ * (droppable), реордер внутри списка (insert-индикатор) и drag-превью.
+ *
+ * Требует `<DndContext>`-предка (см. `MainMenuDndContext`) — доступно только
+ * на desktop-раскладке, на mobile избранное рендерится без drag&drop.
+ */
+export function useFavoritesDnd({ favorite, favoriteItems, segment, setSegment }) {
+    const { setGroupDragOverlay } = useMainMenuDndOverlay();
+    const [activeFavoriteId, setActiveFavoriteId] = useState(null);
+    const [isFavoriteReorderDrag, setIsFavoriteReorderDrag] = useState(false);
+    const [isDraggingToFavorites, setDraggingToFavorites] = useState(false);
+    const listEndRef = useRef(null);
+    const shouldScrollToEndRef = useRef(false);
+    const isFavoritesSegment = segment === FAVORITES_SEGMENT.Favorites;
+    const favoriteSortableIds = useMemo(() => favorite.value.map(getServiceFavoriteDragId), [favorite.value]);
+    const insertIndex = useFavoritesInsertIndicator(favorite.value);
+    const isInsertingToEnd = favoriteItems.length > 0 && insertIndex === favoriteItems.length;
+    const isInsertingNew = isDraggingToFavorites && !favoriteItems.length;
+    const insertIndexRef = useRef(insertIndex);
+    insertIndexRef.current = insertIndex;
+    const activeFavorite = favoriteItems.find(service => service.id === activeFavoriteId);
+    const { setNodeRef, isOver } = useDroppable({
+        id: FAVORITES_DROP_ID,
+        // Only needed for an empty list; with cards, card droppables own the hit-testing.
+        disabled: !isFavoritesSegment || isFavoriteReorderDrag || favoriteItems.length > 0,
+    });
+    useDndMonitor({
+        onDragStart({ active }) {
+            if (isServiceDragId(active.id)) {
+                setSegment(FAVORITES_SEGMENT.Favorites);
+                setDraggingToFavorites(true);
+            }
+            if (isServiceFavoriteDragId(active.id)) {
+                setActiveFavoriteId(parseServiceDragId(active.id));
+                setIsFavoriteReorderDrag(true);
+            }
+        },
+        onDragEnd() {
+            shouldScrollToEndRef.current = isDraggingToFavorites && insertIndexRef.current === favorite.value.length;
+            setActiveFavoriteId(null);
+            setIsFavoriteReorderDrag(false);
+            setDraggingToFavorites(false);
+        },
+        onDragCancel() {
+            shouldScrollToEndRef.current = false;
+            setActiveFavoriteId(null);
+            setIsFavoriteReorderDrag(false);
+            setDraggingToFavorites(false);
+        },
+    });
+    useEffect(() => {
+        if (!activeFavorite) {
+            setGroupDragOverlay(null);
+            return;
+        }
+        setGroupDragOverlay(_jsx(ServiceCard, { service: activeFavorite, showDescription: false, dragPreview: true }));
+        return () => setGroupDragOverlay(null);
+    }, [activeFavorite, setGroupDragOverlay]);
+    useEffect(() => {
+        if (!shouldScrollToEndRef.current) {
+            return;
+        }
+        shouldScrollToEndRef.current = false;
+        const frameId = requestAnimationFrame(() => {
+            listEndRef.current?.scrollIntoView({ block: 'nearest' });
+        });
+        return () => cancelAnimationFrame(frameId);
+    }, [favorite.value]);
+    const showDropOver = ((isOver || isDraggingToFavorites) && !isFavoriteReorderDrag) || undefined;
+    const showInsertNew = (isInsertingNew && isOver) || undefined;
+    return {
+        setNodeRef,
+        listEndRef,
+        favoriteSortableIds,
+        insertIndex,
+        isInsertingToEnd,
+        showDropOver,
+        showInsertNew,
+    };
+}

package/dist/esm/components/MainMenu/helperComponents/Favorites/hooks/useFavoritesInsertIndicator.d.ts

@@ -0,0 +1 @@
+export declare function useFavoritesInsertIndicator(favoriteIds: string[]): number | null;

package/dist/esm/components/MainMenu/helperComponents/Favorites/hooks/useFavoritesInsertIndicator.js

@@ -0,0 +1,34 @@
+import { useDndMonitor } from '@dnd-kit/core';
+import { useState } from 'react';
+import { getDragReferenceY, getFavoriteInsertIndex } from '../../../utils/index.js';
+export function useFavoritesInsertIndicator(favoriteIds) {
+    const [insertIndex, setInsertIndex] = useState(null);
+    const updateInsertIndex = (active, over, delta, activatorEvent) => {
+        setInsertIndex(getFavoriteInsertIndex({
+            activeId: active.id,
+            overId: over?.id,
+            favoriteIds,
+            referenceY: getDragReferenceY({
+                activatorEvent,
+                deltaY: delta.y,
+                activeRect: active.rect.current.translated,
+            }),
+            overRect: over?.rect,
+        }));
+    };
+    useDndMonitor({
+        onDragMove({ active, over, delta, activatorEvent }) {
+            updateInsertIndex(active, over, delta, activatorEvent);
+        },
+        onDragOver({ active, over, delta, activatorEvent }) {
+            updateInsertIndex(active, over, delta, activatorEvent);
+        },
+        onDragEnd() {
+            setInsertIndex(null);
+        },
+        onDragCancel() {
+            setInsertIndex(null);
+        },
+    });
+    return insertIndex;
+}

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

@@ -0,0 +1,2 @@
+export * from './Favorites.js';
+export * from './constants.js';

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

@@ -0,0 +1,2 @@
+export * from './Favorites.js';
+export * from './constants.js';

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

@@ -0,0 +1,87 @@
+.root{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  box-sizing:border-box;
+  width:100%;
+  min-height:0;
+  padding:var(--sn-primitive-dimension-8, 8px) 0 0;
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+
+.header{
+  display:flex;
+  flex-shrink:0;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  width:100%;
+  padding-inline:var(--sn-primitive-dimension-8, 8px);
+}
+
+.segmentControl{
+  flex:1;
+  min-width:0;
+}
+
+.listScroll{
+  position:relative;
+  flex:1 1 auto;
+  width:100%;
+  min-height:0;
+}
+.listScroll[data-insert-new] [data-favorite]{
+  fill:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  stroke:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b))));
+}
+
+.dropTarget{
+  pointer-events:none;
+  position:absolute;
+  inset:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px);
+}
+
+.listScrollInner{
+  height:100%;
+  max-height:calc((var(--sn-primitive-dimension-32, 32px) + var(--sn-primitive-dimension-4, 4px)) * 12 + var(--sn-primitive-dimension-4, 4px));
+}
+
+.list{
+  display:flex;
+  flex-direction:column;
+  align-items:stretch;
+  width:100%;
+  padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px);
+}
+
+.listEnd{
+  flex-shrink:0;
+  width:100%;
+  height:0;
+}
+
+.card{
+  width:100%;
+  min-width:0;
+}
+
+.sortableCard{
+  cursor:grab;
+  min-width:0;
+}
+
+.skeleton{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:stretch;
+  width:100%;
+  padding:var(--sn-primitive-dimension-8, 8px);
+}
+
+.skeletonItem{
+  width:100%;
+  height:var(--sn-primitive-dimension-24, 24px);
+  border-radius:var(--sn-density-radius-3xs, var(--sn-primitive-dimension-2, 2px));
+}

package/dist/esm/components/MainMenu/helperComponents/Favorites/utils.d.ts

@@ -0,0 +1,6 @@
+import { CardServiceLightProps } from '@cloud-ru/ds-uikit-product-card-predefined';
+import { MouseEventHandler } from 'react';
+import { InnerLink } from '../../types.js';
+type FavoriteCardData = Pick<CardServiceLightProps<'a'>, 'title' | 'icon' | 'href' | 'onClick' | 'promoTag' | 'tooltip' | 'data-test-id'>;
+export declare function getCommonCardProps(service: InnerLink, onClick: MouseEventHandler<HTMLElement>): FavoriteCardData;
+export {};

package/dist/esm/components/MainMenu/helperComponents/Favorites/utils.js

@@ -0,0 +1,12 @@
+import { getLinkEmblem } from '../../utils/index.js';
+export function getCommonCardProps(service, onClick) {
+    return {
+        title: service.label,
+        icon: getLinkEmblem(service),
+        href: service.href,
+        onClick,
+        promoTag: service.badge,
+        'data-test-id': `header__drawer-menu__favorite-${service.id}`,
+        tooltip: service.description ? { tip: service.description } : undefined,
+    };
+}

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

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

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Divider } from '@cloud-ru/ds-divider';
+import { DrawerCustom } from '@cloud-ru/ds-drawer';
+import { List } from '@cloud-ru/ds-list';
+import { Scroll } from '@cloud-ru/ds-scroll';
+import { useValueControl } from '@cloud-ru/ds-utils';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { MainMenuDndContext, useMainMenuDnd } from '../../hooks/useMainMenuDnd.js';
+import { useMenuItems } from '../../hooks/useMenuItems.js';
+import { Content } from '../Content/index.js';
+import { Favorites } from '../Favorites/index.js';
+import { MenuHeaderBrand } from '../MenuHeaderBrand/index.js';
+import { MountAnimation } from '../MountAnimation/index.js';
+import { Search } from '../Search/index.js';
+import { MENU_WIDTH_MAX, MENU_WIDTH_MIN } from './constants.js';
+import styles from './styles.module.css';
+export function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, favorite, search, preferences, logo, rightTop, leftTop, defaultWidth = MENU_WIDTH_MAX, onWidthChangeEnd, draggerTooltip, loading, }) {
+    const [open = false, setOpen] = useValueControl({ value: openProp, onChange: setOpenProp });
+    const { scrollRef, resultItems } = useMenuItems({
+        segments,
+        search,
+        platformGroups,
+    });
+    const searchRef = useRef(null);
+    const hasSearch = Boolean(search);
+    useEffect(() => {
+        if (!open || !hasSearch) {
+            return;
+        }
+        // Панель Drawer'а фокусирует себя сама при открытии (см. useDrawerFocusTrap) —
+        // rAF нужен, чтобы наш фокус на поле поиска применился уже после этого.
+        const frameId = requestAnimationFrame(() => {
+            searchRef.current?.focus();
+        });
+        return () => cancelAnimationFrame(frameId);
+    }, [open, hasSearch]);
+    const isNeedRightBlock = segments && segments.some(segment => segment.items.length > 0);
+    const allServiceGroups = useMemo(() => segments?.flatMap(segment => segment.items) ?? [], [segments]);
+    const mainMenuDnd = useMainMenuDnd({
+        favorite,
+        groups: allServiceGroups,
+        showDescription: preferences?.showDescription.value ?? false,
+    });
+    const handleCloseDrawer = useCallback(() => {
+        setOpen(false);
+    }, [setOpen]);
+    const menu = (_jsxs("div", { className: styles.menu, children: [_jsxs("div", { className: styles.menuHeader, children: [_jsx(MenuHeaderBrand, { logo: logo, onClose: handleCloseDrawer, className: styles.menuHeaderBrand }), isNeedRightBlock && search && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), _jsx(Search, { ...search, ref: searchRef })] }))] }), _jsx(Divider, {}), _jsxs("div", { className: styles.menuBody, children: [_jsxs(MountAnimation, { className: styles.left, "data-test-id": 'header__drawer-menu__left', type: 'slide-right', children: [leftTop && _jsx("div", { className: styles.leftTop, children: leftTop }), isNeedRightBlock && favorite && _jsx(Favorites, { favorite: favorite, allServiceGroups: allServiceGroups }), Boolean(settingItems?.length) && (_jsx(List, { items: settingItems ?? [], size: 'm', barHideStrategy: 'never', className: styles.settingItems }))] }), isNeedRightBlock && (_jsxs(_Fragment, { children: [_jsx(MountAnimation, { type: 'fade-in', children: _jsx(Divider, { orientation: 'vertical' }) }), _jsx(MountAnimation, { type: 'fade-slide-up-right', className: styles.right, "data-test-id": 'header__drawer-menu__right', children: _jsx(Scroll, { paddingAbsolute: true, className: styles.scroll, ref: scrollRef, barHideStrategy: 'never', overflow: { x: 'hidden' }, children: _jsx(Content, { onClose: handleCloseDrawer, className: styles.rightContent, searchValue: search?.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, preferences: preferences, loading: loading }) }) })] }))] })] }));
+    return (_jsx(DrawerCustom, { open: open, onClose: handleCloseDrawer, width: isNeedRightBlock ? 'm' : 's', position: 'left', className: styles.drawer, rootClassName: styles.drawerRoot, "data-test-id": 'header__drawer-menu', "data-small": !isNeedRightBlock || undefined, disableMotions: true, resizable: isNeedRightBlock
+            ? {
+                min: MENU_WIDTH_MIN,
+                max: MENU_WIDTH_MAX,
+                default: Math.min(Math.max(defaultWidth, MENU_WIDTH_MIN), MENU_WIDTH_MAX),
+                onResizeEnd: onWidthChangeEnd,
+                draggerTooltip,
+            }
+            : undefined, children: isNeedRightBlock ? _jsx(MainMenuDndContext, { ...mainMenuDnd, children: menu }) : menu }));
+}

package/dist/esm/components/MainMenu/helperComponents/MenuDesktop/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const MENU_WIDTH_STORAGE_KEY = "cloud-ru-main-menu-user-width";
+export declare const MENU_WIDTH_MIN: number;
+export declare const MENU_WIDTH_MAX: number;

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

@@ -0,0 +1,4 @@
+export const MENU_WIDTH_STORAGE_KEY = 'cloud-ru-main-menu-user-width';
+// паддинг справа 24px у дровера нужно компенсировать
+export const MENU_WIDTH_MIN = 960 + 24;
+export const MENU_WIDTH_MAX = 1208 + 24;

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

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

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

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

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Divider } from '@cloud-ru/ds-divider';
+import { ChevronLeftSVG } from '@cloud-ru/ds-icons/interface/system';
+import cn from 'classnames';
+import { headerLocale } from '../../../../locale/index.js';
+import { HeaderButton } from '../../../HeaderButton/index.js';
+import styles from './styles.module.css';
+export function MenuHeaderBrand({ logo, onClose, className }) {
+    const { t } = headerLocale.useTranslations();
+    return (_jsxs("div", { className: cn(styles.container, className), children: [logo, _jsx(Divider, { orientation: 'vertical' }), _jsx(HeaderButton, { className: styles.closeButton, onClick: onClose, icon: _jsx(ChevronLeftSVG, {}), label: t('close') })] }));
+}

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { MainMenuProps } from '../../types.js';
+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/esm/components/MainMenu/helperComponents/MenuMobile/MenuMobile.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { List } from '@cloud-ru/ds-list';
+import { useValueControl } from '@cloud-ru/ds-utils';
+import { useCallback, useMemo } from 'react';
+import { MobileDrawerCustom } from '../../../../mobileOverlays.js';
+import { MainMenuDndContext } from '../../hooks/useMainMenuDnd.js';
+import { useMenuItems } from '../../hooks/useMenuItems.js';
+import { Content } from '../Content/index.js';
+import { Favorites } from '../Favorites/index.js';
+import { MenuHeaderBrand } from '../MenuHeaderBrand/index.js';
+import { MountAnimation } from '../MountAnimation/index.js';
+import { ScrollWithAnimatedStickyPanel } from '../ScrollWithAnimatedStickyPanel/index.js';
+import { Search } from '../Search/index.js';
+import styles from './styles.module.css';
+const SNAP_POINTS = [1];
+export function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, favorite, search, logo, rightTop, leftTop, loading, }) {
+    const [open = false, setOpen] = useValueControl({ value: openProp, onChange: setOpenProp });
+    const hasSegments = segments && segments.some(segment => segment.items.length > 0);
+    const isSearching = Boolean(search?.value);
+    const { searchRef, resultItems } = useMenuItems({
+        segments,
+        search,
+        platformGroups,
+    });
+    const allServiceGroups = useMemo(() => segments?.flatMap(segment => segment.items) ?? [], [segments]);
+    const handleClose = useCallback(() => {
+        setOpen(false);
+    }, [setOpen]);
+    return (_jsx(MobileDrawerCustom, { open: open, onClose: handleClose, position: 'bottom', className: styles.drawerMobile, swipeEnabled: false, "data-test-id": 'header__drawer-menu-mobile', closeOnPopstate: true, snapPoints: SNAP_POINTS, disableMotions: true, children: _jsx(ScrollWithAnimatedStickyPanel, { panel: _jsx(MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles.menuHeader }), children: _jsxs(MountAnimation, { className: styles.scrollMobile, type: 'fade-slide-up', children: [search && _jsx(Search, { ...search, ref: searchRef, isMobile: true }), favorite && _jsx(Favorites, { favorite: favorite, allServiceGroups: allServiceGroups, isMobile: true }), leftTop && _jsx("div", { className: styles.rightContent, children: leftTop }), hasSegments && (_jsx(MainMenuDndContext, { children: _jsx(Content, { isMobile: true, onClose: handleClose, className: styles.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 && _jsx(List, { items: settingItems, size: 'm', barHideStrategy: 'never' })] }) }) }));
+}

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import styles from './styles.module.css';
+export function MountAnimation({ children, type = 'slide-right', className, ...props }) {
+    return (_jsx("div", { className: cn(styles.wrapper, className), ...extractSupportProps(props), "data-animation-type": type, children: children }));
+}

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

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

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

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

package/dist/esm/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/esm/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 {};