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

package/dist/cjs/components/MainMenu/helperComponents/Favorites/components/EmptyState/EmptyRecentSVG.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyRecentSVG = EmptyRecentSVG;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function EmptyRecentSVG({ className }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { className: className, xmlns: 'http://www.w3.org/2000/svg', width: '40', height: '40', viewBox: '0 0 40 40', fill: 'none', children: [(0, jsx_runtime_1.jsx)("path", { opacity: '0.64', d: 'M2 20.6674L2 33.3043C2 35.8977 4.10232 38 6.69565 38H33.3043C35.8977 38 38 35.8977 38 33.3043V20.6674M2 19.2108L2 6.69566C2 4.10232 4.10232 2 6.69565 2H33.3043C35.8977 2 38 4.10232 38 6.69565C38 6.69565 38 13.9328 38 19.2108', stroke: '#5E606E', fill: 'none', strokeWidth: '1.5' }), (0, jsx_runtime_1.jsx)("path", { d: 'M6 15L34 15L34 25L6 25L6 15Z', stroke: 'none', fill: '#C3C8D5' }), (0, jsx_runtime_1.jsx)("path", { opacity: '0.64', d: 'M11.2372 20H8.33398M17.7695 20H14.8662M24.3017 20H21.3985M30.834 20H27.9308', fill: 'none', stroke: '#5E606E', strokeWidth: '1.5' }), (0, jsx_runtime_1.jsx)("circle", { opacity: '0.64', cx: '2', cy: '2', r: '2', transform: 'matrix(-1 0 0 1 10 7)', stroke: '#5E606E', fill: 'none', strokeWidth: '1.5' })] }));
+}

package/dist/cjs/components/MainMenu/helperComponents/Favorites/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,6 @@
+type EmptyStateProps = {
+    isFavoritesSegment: boolean;
+    isMobile?: boolean;
+};
+export declare function EmptyState({ isFavoritesSegment, isMobile }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/MainMenu/helperComponents/Favorites/components/EmptyState/EmptyState.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.EmptyState = EmptyState;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const typography_1 = require("@cloud-ru/ds-typography");
+const locale_1 = require("../../../../../../locale");
+const constants_1 = require("../../constants");
+const EmptyFavoriteSVG_1 = require("./EmptyFavoriteSVG");
+const EmptyRecentSVG_1 = require("./EmptyRecentSVG");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function EmptyState({ isFavoritesSegment, isMobile }) {
+    const { t } = locale_1.headerLocale.useTranslations();
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.emptyState, "data-test-id": constants_1.FAVORITES_TEST_IDS.emptyState, children: isFavoritesSegment ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EmptyFavoriteSVG_1.EmptyFavoriteSVG, { className: styles_module_scss_1.default.emptyIcon }), (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'body', size: 's', className: styles_module_scss_1.default.emptyText, children: isMobile ? t('favorite.emptyMobile') : t('favorite.emptyDesktop') })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EmptyRecentSVG_1.EmptyRecentSVG, { className: styles_module_scss_1.default.emptyIcon }), (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'body', size: 's', className: styles_module_scss_1.default.emptyText, children: t('recent.empty') })] })) }));
+}

package/dist/cjs/components/MainMenu/helperComponents/Favorites/components/EmptyState/index.d.ts

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

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

package/dist/cjs/components/MainMenu/helperComponents/Favorites/components/EmptyState/styles.module.css

@@ -0,0 +1,23 @@
+.emptyIcon{
+  flex-shrink:0;
+  width:var(--sn-primitive-dimension-40, 40px);
+  height:var(--sn-primitive-dimension-40, 40px);
+}
+.emptyIcon[data-favorite]{
+  fill:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+  stroke:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+}
+
+.emptyState{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  padding:var(--sn-primitive-dimension-8, 8px);
+}
+
+.emptyText{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  text-align:center;
+  white-space:pre-line;
+}

package/dist/cjs/components/MainMenu/helperComponents/Favorites/components/FavoritesItemsSkeleton.d.ts

@@ -0,0 +1 @@
+export declare function FavoritesItemsSkeleton(): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MainMenu/helperComponents/Favorites/components/FavoritesItemsSkeleton.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FavoritesItemsSkeleton = FavoritesItemsSkeleton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const skeleton_1 = require("@cloud-ru/ds-skeleton");
+const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
+function FavoritesItemsSkeleton() {
+    return ((0, jsx_runtime_1.jsx)(skeleton_1.SkeletonContext.Provider, { value: true, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.skeleton, children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: styles_module_scss_1.default.skeletonItem }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: styles_module_scss_1.default.skeletonItem }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: styles_module_scss_1.default.skeletonItem })] }) }));
+}

package/dist/cjs/components/MainMenu/helperComponents/Favorites/components/FavoritesSortable.d.ts

@@ -0,0 +1,19 @@
+import { MouseEvent, ReactNode } from 'react';
+import { FavoriteProps, InnerLink } from '../../../types';
+import { FavoritesSegment } from '../constants';
+type FavoritesSortableProps = {
+    favorite: FavoriteProps;
+    favoriteItems: InnerLink[];
+    segment: FavoritesSegment;
+    setSegment(segment: FavoritesSegment): void;
+    isEmpty: boolean;
+    recentCards: ReactNode;
+    onFavoriteServiceClick(service: InnerLink): (event: MouseEvent<HTMLElement>) => void;
+};
+/**
+ * Desktop-обёртка тела списка: реордер drag&drop + приём карточек из общей
+ * сетки. Требует `<DndContext>`-предка, поэтому `useFavoritesDnd` вызывается
+ * только здесь — на mobile этот компонент не рендерится вовсе (см. `Favorites`).
+ */
+export declare function FavoritesSortable({ favorite, favoriteItems, segment, setSegment, isEmpty, recentCards, onFavoriteServiceClick, }: FavoritesSortableProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/MainMenu/helperComponents/Favorites/components/FavoritesSortable.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FavoritesSortable = FavoritesSortable;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sortable_1 = require("@dnd-kit/sortable");
+const drag_and_drop_1 = require("@cloud-ru/ds-drag-and-drop");
+const scroll_1 = require("@cloud-ru/ds-scroll");
+const constants_1 = require("../constants");
+const useFavoritesDnd_1 = require("../hooks/useFavoritesDnd");
+const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
+const utils_1 = require("../utils");
+const EmptyState_1 = require("./EmptyState");
+const SortableFavoriteCard_1 = require("./SortableFavoriteCard");
+/**
+ * Desktop-обёртка тела списка: реордер drag&drop + приём карточек из общей
+ * сетки. Требует `<DndContext>`-предка, поэтому `useFavoritesDnd` вызывается
+ * только здесь — на mobile этот компонент не рендерится вовсе (см. `Favorites`).
+ */
+function FavoritesSortable({ favorite, favoriteItems, segment, setSegment, isEmpty, recentCards, onFavoriteServiceClick, }) {
+    const isFavoritesSegment = segment === constants_1.FAVORITES_SEGMENT.Favorites;
+    const { setNodeRef, listEndRef, favoriteSortableIds, insertIndex, isInsertingToEnd, showDropOver, showInsertNew } = (0, useFavoritesDnd_1.useFavoritesDnd)({ favorite, favoriteItems, segment, setSegment });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.listScroll, "data-insert-new": showInsertNew, children: [(0, jsx_runtime_1.jsx)(drag_and_drop_1.DropTarget, { active: Boolean(showDropOver), className: styles_module_scss_1.default.dropTarget, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { className: styles_module_scss_1.default.listScrollInner, overflow: { x: 'hidden' }, children: (0, jsx_runtime_1.jsxs)("div", { ref: setNodeRef, className: styles_module_scss_1.default.list, "data-test-id": constants_1.FAVORITES_TEST_IDS.list, children: [isEmpty && (0, jsx_runtime_1.jsx)(EmptyState_1.EmptyState, { isFavoritesSegment: isFavoritesSegment }), !isEmpty && isFavoritesSegment && ((0, jsx_runtime_1.jsxs)(sortable_1.SortableContext, { items: favoriteSortableIds, strategy: sortable_1.verticalListSortingStrategy, children: [favoriteItems.map((service, index) => ((0, jsx_runtime_1.jsx)(SortableFavoriteCard_1.SortableFavoriteCard, { serviceId: service.id, showInsertIndicatorBefore: insertIndex === index, showInsertIndicatorAfter: isInsertingToEnd && index === favoriteItems.length - 1, isFirst: index === 0, favorite: {
+                                        enabled: true,
+                                        checked: true,
+                                        onChange: favorite.onChange(service.id),
+                                    }, ...(0, utils_1.getCommonCardProps)(service, onFavoriteServiceClick(service)) }, service.id))), (0, jsx_runtime_1.jsx)("div", { ref: listEndRef, className: styles_module_scss_1.default.listEnd, "aria-hidden": true })] })), !isEmpty && !isFavoritesSegment && recentCards] }) })] }));
+}

package/dist/cjs/components/MainMenu/helperComponents/Favorites/components/SortableFavoriteCard.d.ts

@@ -0,0 +1,8 @@
+import { CardServiceLightProps } from '@cloud-ru/ds-uikit-product-card-predefined';
+export type SortableFavoriteCardProps = {
+    serviceId: string;
+    showInsertIndicatorBefore?: boolean;
+    showInsertIndicatorAfter?: boolean;
+    isFirst?: boolean;
+} & Pick<CardServiceLightProps<'a'>, 'href' | 'className' | 'tabIndex' | 'title' | 'onClick' | 'icon' | 'promoTag' | 'tooltip' | 'favorite' | 'expandable' | 'data-test-id'>;
+export declare function SortableFavoriteCard({ serviceId, className, showInsertIndicatorBefore, showInsertIndicatorAfter, isFirst, ...cardProps }: SortableFavoriteCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/MainMenu/helperComponents/Favorites/components/SortableFavoriteCard.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SortableFavoriteCard = SortableFavoriteCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sortable_1 = require("@dnd-kit/sortable");
+const utilities_1 = require("@dnd-kit/utilities");
+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 dnd_1 = require("../../../utils/dnd");
+const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
+function SortableFavoriteCard({ serviceId, className, showInsertIndicatorBefore, showInsertIndicatorAfter, isFirst, ...cardProps }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, sortable_1.useSortable)({
+        id: (0, dnd_1.getServiceFavoriteDragId)(serviceId),
+    });
+    const transformStyle = transform ? utilities_1.CSS.Translate.toString(transform) : undefined;
+    const style = {
+        // CSS.Transform добавляет scaleX/scaleY, из-за чего перетаскиваемая карточка "растягивается"
+        // при пересечении с соседней карточкой. CSS.Translate использует только сдвиг.
+        // Во время drag transform на источнике не применяем — превью в DragOverlay.
+        transform: isDragging ? undefined : transformStyle,
+        transition,
+    };
+    const { tabIndex, ...restAttributes } = attributes ?? {};
+    return ((0, jsx_runtime_1.jsxs)(drag_and_drop_1.DragGhost, { innerRef: setNodeRef, style: style, className: styles_module_scss_1.default.sortableCard, dragging: isDragging, mode: drag_and_drop_1.DRAG_MODE.Dynamic, ...listeners, ...restAttributes, children: [showInsertIndicatorBefore && (0, jsx_runtime_1.jsx)(drag_and_drop_1.DropIndicator, { placement: drag_and_drop_1.PLACEMENT.Before, atEdge: isFirst }), (0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardServiceLight, { as: 'a', ...cardProps, className: className ?? styles_module_scss_1.default.card, tabIndex: tabIndex }), showInsertIndicatorAfter && (0, jsx_runtime_1.jsx)(drag_and_drop_1.DropIndicator, { placement: drag_and_drop_1.PLACEMENT.After, atEdge: true })] }));
+}

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

@@ -0,0 +1,4 @@
+export * from './SortableFavoriteCard';
+export * from './EmptyState';
+export * from './FavoritesSortable';
+export * from './FavoritesItemsSkeleton';

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

@@ -0,0 +1,20 @@
+"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("./SortableFavoriteCard"), exports);
+__exportStar(require("./EmptyState"), exports);
+__exportStar(require("./FavoritesSortable"), exports);
+__exportStar(require("./FavoritesItemsSkeleton"), exports);

package/dist/cjs/components/MainMenu/helperComponents/Favorites/constants.d.ts

@@ -0,0 +1,15 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+export declare const FAVORITES_SEGMENT: {
+    readonly Favorites: "favorites";
+    readonly Recent: "recent";
+};
+export type FavoritesSegment = ValueOf<typeof FAVORITES_SEGMENT>;
+export declare const FAVORITES_TEST_IDS: {
+    readonly root: "header__drawer-menu__favorites";
+    readonly header: "header__drawer-menu__favorites-header";
+    readonly segmentControl: "header__drawer-menu__favorites-segment";
+    readonly settingsButton: "header__drawer-menu__favorites-settings";
+    readonly list: "header__drawer-menu__favorites-list";
+    readonly emptyState: "header__drawer-menu__favorites-empty";
+    readonly dropZone: "header__drawer-menu__favorites-drop-zone";
+};

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FAVORITES_TEST_IDS = exports.FAVORITES_SEGMENT = void 0;
+exports.FAVORITES_SEGMENT = {
+    Favorites: 'favorites',
+    Recent: 'recent',
+};
+exports.FAVORITES_TEST_IDS = {
+    root: 'header__drawer-menu__favorites',
+    header: 'header__drawer-menu__favorites-header',
+    segmentControl: 'header__drawer-menu__favorites-segment',
+    settingsButton: 'header__drawer-menu__favorites-settings',
+    list: 'header__drawer-menu__favorites-list',
+    emptyState: 'header__drawer-menu__favorites-empty',
+    dropZone: 'header__drawer-menu__favorites-drop-zone',
+};

package/dist/cjs/components/MainMenu/helperComponents/Favorites/hooks/useFavoritesDnd.d.ts

@@ -0,0 +1,25 @@
+import { FavoriteProps, InnerLink } from '../../../types';
+import { FavoritesSegment } from '../constants';
+type UseFavoritesDndParams = {
+    favorite: FavoriteProps;
+    favoriteItems: InnerLink[];
+    segment: FavoritesSegment;
+    setSegment(segment: FavoritesSegment): void;
+};
+/**
+ * Оркестрирует drag&drop избранного: приём карточек сервисов из общей сетки
+ * (droppable), реордер внутри списка (insert-индикатор) и drag-превью.
+ *
+ * Требует `<DndContext>`-предка (см. `MainMenuDndContext`) — доступно только
+ * на desktop-раскладке, на mobile избранное рендерится без drag&drop.
+ */
+export declare function useFavoritesDnd({ favorite, favoriteItems, segment, setSegment }: UseFavoritesDndParams): {
+    setNodeRef: (element: HTMLElement | null) => void;
+    listEndRef: import("react").RefObject<HTMLDivElement>;
+    favoriteSortableIds: string[];
+    insertIndex: number | null;
+    isInsertingToEnd: boolean;
+    showDropOver: true | undefined;
+    showInsertNew: true | undefined;
+};
+export {};

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

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFavoritesDnd = useFavoritesDnd;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@dnd-kit/core");
+const react_1 = require("react");
+const useMainMenuDnd_1 = require("../../../hooks/useMainMenuDnd");
+const utils_1 = require("../../../utils");
+const ServiceCard_1 = require("../../ServiceCard");
+const constants_1 = require("../constants");
+const useFavoritesInsertIndicator_1 = require("./useFavoritesInsertIndicator");
+/**
+ * Оркестрирует drag&drop избранного: приём карточек сервисов из общей сетки
+ * (droppable), реордер внутри списка (insert-индикатор) и drag-превью.
+ *
+ * Требует `<DndContext>`-предка (см. `MainMenuDndContext`) — доступно только
+ * на desktop-раскладке, на mobile избранное рендерится без drag&drop.
+ */
+function useFavoritesDnd({ favorite, favoriteItems, segment, setSegment }) {
+    const { setGroupDragOverlay } = (0, useMainMenuDnd_1.useMainMenuDndOverlay)();
+    const [activeFavoriteId, setActiveFavoriteId] = (0, react_1.useState)(null);
+    const [isFavoriteReorderDrag, setIsFavoriteReorderDrag] = (0, react_1.useState)(false);
+    const [isDraggingToFavorites, setDraggingToFavorites] = (0, react_1.useState)(false);
+    const listEndRef = (0, react_1.useRef)(null);
+    const shouldScrollToEndRef = (0, react_1.useRef)(false);
+    const isFavoritesSegment = segment === constants_1.FAVORITES_SEGMENT.Favorites;
+    const favoriteSortableIds = (0, react_1.useMemo)(() => favorite.value.map(utils_1.getServiceFavoriteDragId), [favorite.value]);
+    const insertIndex = (0, useFavoritesInsertIndicator_1.useFavoritesInsertIndicator)(favorite.value);
+    const isInsertingToEnd = favoriteItems.length > 0 && insertIndex === favoriteItems.length;
+    const isInsertingNew = isDraggingToFavorites && !favoriteItems.length;
+    const insertIndexRef = (0, react_1.useRef)(insertIndex);
+    insertIndexRef.current = insertIndex;
+    const activeFavorite = favoriteItems.find(service => service.id === activeFavoriteId);
+    const { setNodeRef, isOver } = (0, core_1.useDroppable)({
+        id: utils_1.FAVORITES_DROP_ID,
+        // Only needed for an empty list; with cards, card droppables own the hit-testing.
+        disabled: !isFavoritesSegment || isFavoriteReorderDrag || favoriteItems.length > 0,
+    });
+    (0, core_1.useDndMonitor)({
+        onDragStart({ active }) {
+            if ((0, utils_1.isServiceDragId)(active.id)) {
+                setSegment(constants_1.FAVORITES_SEGMENT.Favorites);
+                setDraggingToFavorites(true);
+            }
+            if ((0, utils_1.isServiceFavoriteDragId)(active.id)) {
+                setActiveFavoriteId((0, utils_1.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);
+        },
+    });
+    (0, react_1.useEffect)(() => {
+        if (!activeFavorite) {
+            setGroupDragOverlay(null);
+            return;
+        }
+        setGroupDragOverlay((0, jsx_runtime_1.jsx)(ServiceCard_1.ServiceCard, { service: activeFavorite, showDescription: false, dragPreview: true }));
+        return () => setGroupDragOverlay(null);
+    }, [activeFavorite, setGroupDragOverlay]);
+    (0, react_1.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/cjs/components/MainMenu/helperComponents/Favorites/hooks/useFavoritesInsertIndicator.d.ts

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

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFavoritesInsertIndicator = useFavoritesInsertIndicator;
+const core_1 = require("@dnd-kit/core");
+const react_1 = require("react");
+const utils_1 = require("../../../utils");
+function useFavoritesInsertIndicator(favoriteIds) {
+    const [insertIndex, setInsertIndex] = (0, react_1.useState)(null);
+    const updateInsertIndex = (active, over, delta, activatorEvent) => {
+        setInsertIndex((0, utils_1.getFavoriteInsertIndex)({
+            activeId: active.id,
+            overId: over?.id,
+            favoriteIds,
+            referenceY: (0, utils_1.getDragReferenceY)({
+                activatorEvent,
+                deltaY: delta.y,
+                activeRect: active.rect.current.translated,
+            }),
+            overRect: over?.rect,
+        }));
+    };
+    (0, core_1.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/cjs/components/MainMenu/helperComponents/Favorites/index.d.ts

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

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

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Favorites"), exports);
+__exportStar(require("./constants"), exports);

package/dist/cjs/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/cjs/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';
+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/cjs/components/MainMenu/helperComponents/Favorites/utils.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCommonCardProps = getCommonCardProps;
+const utils_1 = require("../../utils");
+function getCommonCardProps(service, onClick) {
+    return {
+        title: service.label,
+        icon: (0, utils_1.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/cjs/components/MainMenu/helperComponents/MenuDesktop/MenuDesktop.d.ts

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

@@ -0,0 +1,63 @@
+"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 divider_1 = require("@cloud-ru/ds-divider");
+const drawer_1 = require("@cloud-ru/ds-drawer");
+const list_1 = require("@cloud-ru/ds-list");
+const scroll_1 = require("@cloud-ru/ds-scroll");
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+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 Search_1 = require("../Search");
+const constants_1 = require("./constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, favorite, search, preferences, logo, rightTop, leftTop, defaultWidth = constants_1.MENU_WIDTH_MAX, onWidthChangeEnd, draggerTooltip, loading, }) {
+    const [open = false, setOpen] = (0, utils_1.useValueControl)({ value: openProp, onChange: setOpenProp });
+    const { scrollRef, resultItems } = (0, useMenuItems_1.useMenuItems)({
+        segments,
+        search,
+        platformGroups,
+    });
+    const searchRef = (0, react_1.useRef)(null);
+    const hasSearch = Boolean(search);
+    (0, react_1.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 = (0, react_1.useMemo)(() => segments?.flatMap(segment => segment.items) ?? [], [segments]);
+    const mainMenuDnd = (0, useMainMenuDnd_1.useMainMenuDnd)({
+        favorite,
+        groups: allServiceGroups,
+        showDescription: preferences?.showDescription.value ?? false,
+    });
+    const handleCloseDrawer = (0, react_1.useCallback)(() => {
+        setOpen(false);
+    }, [setOpen]);
+    const menu = ((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.menuHeader, children: [(0, jsx_runtime_1.jsx)(MenuHeaderBrand_1.MenuHeaderBrand, { logo: logo, onClose: handleCloseDrawer, className: styles_module_scss_1.default.menuHeaderBrand }), isNeedRightBlock && search && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), (0, jsx_runtime_1.jsx)(Search_1.Search, { ...search, ref: searchRef })] }))] }), (0, jsx_runtime_1.jsx)(divider_1.Divider, {}), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.menuBody, children: [(0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { className: styles_module_scss_1.default.left, "data-test-id": 'header__drawer-menu__left', type: 'slide-right', children: [leftTop && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftTop, children: leftTop }), isNeedRightBlock && favorite && (0, jsx_runtime_1.jsx)(Favorites_1.Favorites, { favorite: favorite, allServiceGroups: allServiceGroups }), Boolean(settingItems?.length) && ((0, jsx_runtime_1.jsx)(list_1.List, { items: settingItems ?? [], size: 'm', barHideStrategy: 'never', className: styles_module_scss_1.default.settingItems }))] }), isNeedRightBlock && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MountAnimation_1.MountAnimation, { type: 'fade-in', children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }) }), (0, jsx_runtime_1.jsx)(MountAnimation_1.MountAnimation, { type: 'fade-slide-up-right', className: styles_module_scss_1.default.right, "data-test-id": 'header__drawer-menu__right', children: (0, jsx_runtime_1.jsx)(scroll_1.Scroll, { paddingAbsolute: true, className: styles_module_scss_1.default.scroll, ref: scrollRef, barHideStrategy: 'never', overflow: { x: 'hidden' }, children: (0, jsx_runtime_1.jsx)(Content_1.Content, { onClose: handleCloseDrawer, className: styles_module_scss_1.default.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 ((0, jsx_runtime_1.jsx)(drawer_1.DrawerCustom, { open: open, onClose: handleCloseDrawer, width: 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, disableMotions: true, resizable: isNeedRightBlock
+            ? {
+                min: constants_1.MENU_WIDTH_MIN,
+                max: constants_1.MENU_WIDTH_MAX,
+                default: Math.min(Math.max(defaultWidth, constants_1.MENU_WIDTH_MIN), constants_1.MENU_WIDTH_MAX),
+                onResizeEnd: onWidthChangeEnd,
+                draggerTooltip,
+            }
+            : undefined, children: isNeedRightBlock ? (0, jsx_runtime_1.jsx)(useMainMenuDnd_1.MainMenuDndContext, { ...mainMenuDnd, children: menu }) : menu }));
+}

package/dist/cjs/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;