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

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

@@ -0,0 +1,3 @@
+export * from './SortableGroup';
+export * from './components/SortableGroupCards';
+export * from './components/SortableGroupSkeleton';

package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/index.js

@@ -0,0 +1,19 @@
+"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("./SortableGroup"), exports);
+__exportStar(require("./components/SortableGroupCards"), exports);
+__exportStar(require("./components/SortableGroupSkeleton"), exports);

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

@@ -0,0 +1,231 @@
+.headerActions{
+  pointer-events:none;
+  display:flex;
+  flex-shrink:0;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  opacity:0;
+  outline:none;
+}
+.headerActions[data-always-visible]{
+  opacity:1;
+}
+
+.header{
+  display:flex;
+  flex:1 0 0;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  min-width:0;
+  min-height:var(--sn-primitive-dimension-40, 40px);
+  padding-inline:var(--sn-primitive-dimension-8, 8px);
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+}
+.header:focus-visible .headerActions, .header:has(:focus-visible) .headerActions{
+  pointer-events:auto;
+  opacity:1;
+}
+@media (hover: hover){
+  .header:hover{
+    background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+  }
+  .header:hover .headerActions{
+    pointer-events:auto;
+    opacity:1;
+  }
+}
+
+.headerTitle{
+  flex:1 0 0;
+  min-width:0;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.headerTitle:hover .headerActions, .headerTitle:focus-visible .headerActions, .headerTitle:has(:focus-visible) .headerActions{
+  pointer-events:auto;
+  opacity:1;
+}
+
+.group{
+  position:relative;
+  overflow-x:clip;
+  display:flex;
+  flex-direction:column;
+  min-width:0;
+  padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-12, 12px);
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+.group[data-drag-preview]{
+  cursor:grabbing;
+}
+.group[data-drag-preview] .header{
+  cursor:grabbing;
+  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+}
+.group[data-drag-preview] .header .headerActions{
+  pointer-events:auto;
+  opacity:1;
+}
+
+.groupDragPreview{
+  cursor:grabbing;
+  container-type:inline-size;
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+}
+
+.dragHandle{
+  all:unset;
+  touch-action:none;
+  cursor:grab;
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  width:var(--sn-primitive-dimension-24, 24px);
+  height:var(--sn-primitive-dimension-24, 24px);
+  border:none;
+  border-radius:var(--sn-button-anatomy-size-s-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  background-color:transparent;
+  outline:none;
+}
+.dragHandle:active{
+  cursor:grabbing;
+}
+.dragHandle:focus-visible{
+  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+}
+
+.groupBody{
+  display:grid;
+  grid-template-columns:repeat(3, minmax(auto, 1fr));
+  gap:var(--sn-primitive-dimension-4, 4px);
+}
+@container (width <= 728px){
+  .groupBody:not([data-mobile]){
+    grid-template-columns:repeat(2, minmax(auto, 1fr));
+  }
+}
+.groupBody[data-mobile]{
+  grid-template-columns:repeat(1, minmax(200px, 1fr));
+}
+
+.decoration{
+  --highlight-border-width:1px;
+  position:absolute;
+  top:0;
+  left:0;
+  overflow:hidden;
+  width:100%;
+  height:100%;
+  border-radius:inherit;
+}
+[data-drag-preview] .decoration{
+  z-index:-1;
+}
+.decoration[data-color-scheme=light]{
+  --highlight-border-color-from:hsl(155deg 48% 42% / 100%);
+  --highlight-border-color-to:hsl(155deg 48% 42% / 32%);
+  --highlight-background-color-from:hsl(0deg 0% 99% / 20%);
+  --highlight-background-color-to:hsl(152deg 39% 79% / 12%);
+  --highlight-background-color:hsl(0deg 0% 99% / 100%);
+}
+.decoration[data-color-scheme=dark]{
+  --highlight-border-color-from:hsl(153deg 30% 55% / 100%);
+  --highlight-border-color-to:hsl(157deg 51% 19% / 100%);
+  --highlight-background-color-from:hsl(240deg 14% 16% / 100%);
+  --highlight-background-color-to:hsl(157deg 51% 19% / 20%);
+  --highlight-background-color:hsl(240deg 14% 16% / 100%);
+}
+.decoration[data-is-highlighted]::before{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+  opacity:0.64;
+  background-image:linear-gradient(90deg, var(--highlight-border-color-from) 0%, var(--highlight-border-color-to) 50%, var(--highlight-border-color-from) 100%);
+}
+
+.decorationBackground{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  inset:0;
+  overflow:hidden;
+  background-color:transparent;
+}
+[data-is-highlighted] .decorationBackground{
+  inset:var(--highlight-border-width) var(--highlight-border-width) var(--highlight-border-width) var(--highlight-border-width);
+  border-radius:calc(var(--sn-primitive-dimension-4, 4px) - var(--highlight-border-width));
+  background:linear-gradient(90deg, var(--highlight-background-color-from) 2.29%, var(--highlight-background-color-to) 97.84%), var(--highlight-background-color);
+}
+
+.colorMarker{
+  content:"";
+  position:absolute;
+  top:0;
+  bottom:0;
+  left:0;
+  width:var(--sn-primitive-dimension-4, 4px);
+  visibility:hidden;
+}
+.colorMarker[data-block-color=transparent]{
+  visibility:visible;
+  background-color:"transparent";
+}
+.colorMarker[data-block-color=neutral]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+.colorMarker[data-block-color=primary]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
+}
+.colorMarker[data-block-color=red]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-red-decor, var(--sn-primitive-color-red-80, #fdd6cd));
+}
+.colorMarker[data-block-color=orange]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-orange-decor, var(--sn-primitive-color-orange-80, #fbdeb6));
+}
+.colorMarker[data-block-color=yellow]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-yellow-decor, var(--sn-primitive-color-yellow-80, #f0dfb1));
+}
+.colorMarker[data-block-color=green]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-green-decor, var(--sn-primitive-color-green-80, #d2ead0));
+}
+.colorMarker[data-block-color=blue]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-blue-decor, var(--sn-primitive-color-blue-80, #d6e2f4));
+}
+.colorMarker[data-block-color=violet]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-violet-decor, var(--sn-primitive-color-violet-80, #e6dcf3));
+}
+.colorMarker[data-block-color=pink]{
+  visibility:visible;
+  background-color:var(--sn-theme-color-pink-decor, var(--sn-primitive-color-pink-80, #f5d9e1));
+}
+
+.skeletonTitle{
+  display:flex;
+  align-items:center;
+  height:var(--sn-primitive-dimension-40, 40px);
+  padding:0 var(--sn-primitive-dimension-8, 8px);
+  font-size:var(--sn-primitive-dimension-16, 16px);
+  line-height:var(--sn-primitive-dimension-40, 40px);
+}
+
+.skeletonBody{
+  padding-bottom:var(--sn-primitive-dimension-4, 4px);
+}
+
+.skeletonService{
+  padding:var(--sn-primitive-dimension-4, 4px);
+}

package/dist/cjs/components/MainMenu/helperComponents/Content/hooks/useContentSegmentsSortable.d.ts

@@ -0,0 +1,24 @@
+import { DragEndEvent } from '@dnd-kit/core';
+import { LinksGroup, MainMenuSegment, MainMenuSegmentPrefs } from '../../../types';
+type UseContentSegmentsSortableProps = {
+    segments: MainMenuSegment[];
+    activeSegmentId: string;
+    isSearching: boolean;
+    searchGroups: LinksGroup[];
+    segmentPrefsById: Map<string, MainMenuSegmentPrefs>;
+    onSegmentOrderChange?(segmentId: string, orderedGroupIds: string[]): void;
+    onSegmentExpandedChange?(segmentId: string, expandedGroupIds: string[]): void;
+    disabled?: boolean;
+    isMobile?: boolean;
+};
+/**
+ * Порядок и expanded для активного сегмента или поисковой выдачи.
+ * Uncontrolled-состояние кэшируется по id сегмента, чтобы не сбрасываться при переключении.
+ */
+export declare function useContentSegmentsSortable({ segments, activeSegmentId, isSearching, searchGroups, segmentPrefsById, onSegmentOrderChange, onSegmentExpandedChange, disabled, isMobile, }: UseContentSegmentsSortableProps): {
+    orderedGroups: LinksGroup[];
+    expandedIds: string[];
+    onExpandedChange: (value?: string[]) => void;
+    handleDragEnd: ({ active, over }: DragEndEvent) => void;
+};
+export {};

package/dist/cjs/components/MainMenu/helperComponents/Content/hooks/useContentSegmentsSortable.js

@@ -0,0 +1,158 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContentSegmentsSortable = useContentSegmentsSortable;
+const sortable_1 = require("@dnd-kit/sortable");
+const react_1 = require("react");
+function mergeIdsPreservingOrder(prevIds, nextIds) {
+    const kept = prevIds.filter(id => nextIds.includes(id));
+    const added = nextIds.filter(id => !prevIds.includes(id));
+    if (added.length === 0 && kept.length === prevIds.length) {
+        return prevIds;
+    }
+    return [...kept, ...added];
+}
+function resolveOrder(orderProp, ids) {
+    if (!orderProp) {
+        return ids;
+    }
+    return mergeIdsPreservingOrder(orderProp, ids);
+}
+function mergeExpandedIds(prevExpanded, prevKnownIds, nextIds) {
+    const nextIdSet = new Set(nextIds);
+    const prevKnownIdSet = new Set(prevKnownIds);
+    const kept = prevExpanded.filter(id => nextIdSet.has(id));
+    const added = nextIds.filter(id => !prevKnownIdSet.has(id));
+    if (added.length === 0) {
+        return kept;
+    }
+    return [...kept, ...added];
+}
+function resolveInitialExpanded(seedExpanded, ids) {
+    if (seedExpanded === ids) {
+        return ids;
+    }
+    return mergeExpandedIds(seedExpanded, seedExpanded, ids);
+}
+/**
+ * Порядок и expanded для активного сегмента или поисковой выдачи.
+ * Uncontrolled-состояние кэшируется по id сегмента, чтобы не сбрасываться при переключении.
+ */
+function useContentSegmentsSortable({ segments, activeSegmentId, isSearching, searchGroups, segmentPrefsById, onSegmentOrderChange, onSegmentExpandedChange, disabled, isMobile, }) {
+    const activeSegment = (0, react_1.useMemo)(() => segments.find(segment => segment.id === activeSegmentId) ?? segments[0], [activeSegmentId, segments]);
+    const activePrefs = activeSegment ? segmentPrefsById.get(activeSegment.id) : undefined;
+    const groups = (0, react_1.useMemo)(() => (isSearching ? searchGroups : (activeSegment?.items ?? [])), [activeSegment?.items, isSearching, searchGroups]);
+    const ids = (0, react_1.useMemo)(() => groups.map(({ id }) => id), [groups]);
+    const idsKey = ids.join('\u0000');
+    const cacheKey = isSearching ? '__search__' : (activeSegment?.id ?? '');
+    const orderControlled = !isSearching && activePrefs?.order !== undefined;
+    const expandedControlled = !isSearching && activePrefs?.expanded !== undefined;
+    const [cache, setCache] = (0, react_1.useState)({});
+    const knownIdsByCacheKeyRef = (0, react_1.useRef)({});
+    (0, react_1.useEffect)(() => {
+        const prevKnownIds = knownIdsByCacheKeyRef.current[cacheKey] ?? ids;
+        setCache(prev => {
+            const existing = prev[cacheKey];
+            let seedOrder = existing?.order ?? ids;
+            if (isSearching) {
+                seedOrder = ids;
+            }
+            else if (orderControlled) {
+                seedOrder = activePrefs?.order ?? ids;
+            }
+            const seedExpanded = expandedControlled ? (activePrefs?.expanded ?? ids) : (existing?.expanded ?? ids);
+            const nextOrder = isSearching ? ids : resolveOrder(seedOrder, ids);
+            const nextExpanded = existing
+                ? mergeExpandedIds(seedExpanded, prevKnownIds, ids)
+                : resolveInitialExpanded(seedExpanded, ids);
+            if (existing &&
+                existing.order.length === nextOrder.length &&
+                existing.order.every((id, index) => id === nextOrder[index]) &&
+                existing.expanded.length === nextExpanded.length &&
+                existing.expanded.every((id, index) => id === nextExpanded[index])) {
+                return prev;
+            }
+            return {
+                ...prev,
+                [cacheKey]: { order: nextOrder, expanded: nextExpanded },
+            };
+        });
+        knownIdsByCacheKeyRef.current[cacheKey] = ids;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [cacheKey, idsKey, isSearching, orderControlled, expandedControlled, activePrefs?.order, activePrefs?.expanded]);
+    const cached = cache[cacheKey] ?? { order: resolveOrder(undefined, ids), expanded: ids };
+    // В поиске порядок задаёт useMenuItems (regular → platform → pinned).
+    // Кэш order иначе «залипает» между нажатиями и поднимает platform выше новых совпадений.
+    const order = (0, react_1.useMemo)(() => {
+        if (isSearching) {
+            return ids;
+        }
+        if (orderControlled) {
+            return resolveOrder(activePrefs?.order, ids);
+        }
+        return resolveOrder(cached.order, ids);
+    }, [activePrefs?.order, cached.order, ids, isSearching, orderControlled]);
+    // Controlled expanded: knownIds — из ref (уже виденные группы), не из самого expanded.
+    // Иначе collapse-all (`expanded: []`) трактует все id как «новые» и снова раскрывает их.
+    // Ссылку стабилизируем: новый массив на каждом рендере ломает анимацию sortable / DragOverlay.
+    const expandedIds = (0, react_1.useMemo)(() => {
+        if (!expandedControlled) {
+            return cached.expanded;
+        }
+        const knownIds = knownIdsByCacheKeyRef.current[cacheKey] ?? ids;
+        return mergeExpandedIds(activePrefs?.expanded ?? ids, knownIds, ids);
+    }, [activePrefs?.expanded, cacheKey, cached.expanded, expandedControlled, ids]);
+    const groupsById = (0, react_1.useMemo)(() => new Map(groups.map(group => [group.id, group])), [groups]);
+    const orderedGroups = (0, react_1.useMemo)(() => {
+        if (isSearching) {
+            return groups;
+        }
+        return order.map(id => groupsById.get(id)).filter((group) => Boolean(group));
+    }, [groups, groupsById, isSearching, order]);
+    const handleDragEnd = (0, react_1.useCallback)(({ active, over }) => {
+        if (disabled || !over || active.id === over.id) {
+            return;
+        }
+        const oldIndex = order.indexOf(String(active.id));
+        const newIndex = order.indexOf(String(over.id));
+        if (oldIndex === -1 || newIndex === -1) {
+            return;
+        }
+        const nextOrder = resolveOrder((0, sortable_1.arrayMove)(order, oldIndex, newIndex), ids);
+        if (!orderControlled) {
+            setCache(prev => ({
+                ...prev,
+                [cacheKey]: {
+                    order: nextOrder,
+                    expanded: prev[cacheKey]?.expanded ?? expandedIds,
+                },
+            }));
+        }
+        if (!isSearching && activeSegment) {
+            onSegmentOrderChange?.(activeSegment.id, nextOrder);
+        }
+    }, [activeSegment, cacheKey, disabled, expandedIds, ids, isSearching, onSegmentOrderChange, order, orderControlled]);
+    const onExpandedChange = (0, react_1.useCallback)((value) => {
+        if (isMobile) {
+            return;
+        }
+        const nextExpanded = value ?? [];
+        if (!expandedControlled) {
+            setCache(prev => ({
+                ...prev,
+                [cacheKey]: {
+                    order: prev[cacheKey]?.order ?? order,
+                    expanded: nextExpanded,
+                },
+            }));
+        }
+        if (!isSearching && activeSegment) {
+            onSegmentExpandedChange?.(activeSegment.id, nextExpanded);
+        }
+    }, [activeSegment, cacheKey, expandedControlled, isSearching, isMobile, onSegmentExpandedChange, order]);
+    return {
+        orderedGroups,
+        expandedIds,
+        onExpandedChange,
+        handleDragEnd,
+    };
+}

package/dist/cjs/components/MainMenu/helperComponents/Content/hooks/useSegmentDnd.d.ts

@@ -0,0 +1,16 @@
+import { DragEndEvent } from '@dnd-kit/core';
+import { FavoriteProps, LinksGroup } from '../../../types';
+type UseSegmentDndProps = {
+    visibleGroups: LinksGroup[];
+    expandedIds: string[];
+    onSortableDragEnd(event: DragEndEvent): void;
+    showDescription: boolean;
+    showGroupsColors?: boolean;
+    favorite?: FavoriteProps;
+};
+/**
+ * DnD групп внутри активного сегмента: drag overlay группы поверх `useContentSegmentsSortable`.
+ * Сервис-драг (карточка → избранное) сюда не попадает — фильтруется через `isServiceDragId`.
+ */
+export declare function useSegmentDnd({ visibleGroups, expandedIds, onSortableDragEnd, showDescription, showGroupsColors, favorite, }: UseSegmentDndProps): void;
+export {};

package/dist/cjs/components/MainMenu/helperComponents/Content/hooks/useSegmentDnd.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSegmentDnd = useSegmentDnd;
+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 SortableGroup_1 = require("../helperComponents/SortableGroup");
+/**
+ * DnD групп внутри активного сегмента: drag overlay группы поверх `useContentSegmentsSortable`.
+ * Сервис-драг (карточка → избранное) сюда не попадает — фильтруется через `isServiceDragId`.
+ */
+function useSegmentDnd({ visibleGroups, expandedIds, onSortableDragEnd, showDescription, showGroupsColors, favorite, }) {
+    const { setGroupDragOverlay } = (0, useMainMenuDnd_1.useMainMenuDndOverlay)();
+    const handleDragStart = (0, react_1.useCallback)(({ active }) => {
+        if (!(0, utils_1.isServiceDragId)(active.id)) {
+            const activeGroup = visibleGroups.find(({ id }) => id === String(active.id));
+            if (activeGroup) {
+                setGroupDragOverlay((0, jsx_runtime_1.jsx)(SortableGroup_1.SortableGroupDragPreview, { id: activeGroup.id, label: activeGroup.label, items: activeGroup.items, isExpanded: expandedIds.includes(activeGroup.id), blockColor: (0, utils_1.resolveGroupBlockColor)(activeGroup.blockColor, showGroupsColors), showDescription: showDescription, favorite: activeGroup.favoritesEnabled ? favorite : undefined, highlight: activeGroup.highlight }));
+            }
+        }
+    }, [expandedIds, favorite, setGroupDragOverlay, showDescription, showGroupsColors, visibleGroups]);
+    const handleDragEnd = (0, react_1.useCallback)((event) => {
+        setGroupDragOverlay(null);
+        if ((0, utils_1.isServiceDragId)(event.active.id)) {
+            return;
+        }
+        onSortableDragEnd(event);
+    }, [onSortableDragEnd, setGroupDragOverlay]);
+    const handleDragCancel = (0, react_1.useCallback)(() => {
+        setGroupDragOverlay(null);
+    }, [setGroupDragOverlay]);
+    (0, core_1.useDndMonitor)({
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        onDragCancel: handleDragCancel,
+    });
+    /* useEffect(() => {
+      if (!activeGroup) {
+        setGroupDragOverlay(null);
+        return;
+      }
+  
+      setGroupDragOverlay(
+        <SortableGroupDragPreview
+          id={activeGroup.id}
+          label={activeGroup.label}
+          items={activeGroup.items}
+          isExpanded={expandedIds.includes(activeGroup.id)}
+          blockColor={resolveGroupBlockColor(activeGroup.blockColor, showGroupsColors)}
+          showDescription={showDescription}
+          favorite={activeGroup.favoritesEnabled ? favorite : undefined}
+        />,
+      );
+  
+      return () => setGroupDragOverlay(null);
+    }, [activeGroup, expandedIds, favorite, setGroupDragOverlay, showDescription, showGroupsColors]); */
+}

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

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

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

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

@@ -0,0 +1,8 @@
+.content[data-empty]{
+  align-items:center;
+  justify-content:center;
+  height:100%;
+}
+.content[data-empty][data-mobile]{
+  flex:1 1 auto;
+}

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

@@ -0,0 +1,12 @@
+import { FavoriteProps, LinksGroup } from '../../types';
+export type FavoritesProps = {
+    /** Список избранных сервисов */
+    favorite: FavoriteProps;
+    /** Группы сервисов для разрешения id в карточки */
+    allServiceGroups: LinksGroup[];
+    /** CSS-класс строки заголовка (segment + кнопка настроек) */
+    headerClassName?: string;
+    /** Флаг мобильной раскладки */
+    isMobile?: boolean;
+};
+export declare function Favorites({ favorite, allServiceGroups, headerClassName, isMobile }: FavoritesProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,79 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Favorites = Favorites;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const list_1 = require("@cloud-ru/ds-list");
+const scroll_1 = require("@cloud-ru/ds-scroll");
+const segment_control_1 = require("@cloud-ru/ds-segment-control");
+const uikit_product_card_predefined_1 = require("@cloud-ru/ds-uikit-product-card-predefined");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const locale_1 = require("../../../../locale");
+const utils_2 = require("../../utils");
+const components_1 = require("./components");
+const constants_1 = require("./constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_3 = require("./utils");
+function Favorites({ favorite, allServiceGroups, headerClassName, isMobile }) {
+    const { t } = locale_1.headerLocale.useTranslations();
+    const loading = favorite.loading;
+    const [segment, setSegment] = (0, utils_1.useValueControl)({
+        value: favorite.segment,
+        defaultValue: constants_1.FAVORITES_SEGMENT.Favorites,
+        onChange: favorite.onSegmentChange,
+    });
+    const segmentControlItems = (0, react_1.useMemo)(() => [
+        { value: constants_1.FAVORITES_SEGMENT.Favorites, label: t('favorite.title'), disabled: loading },
+        { value: constants_1.FAVORITES_SEGMENT.Recent, label: t('recent.title'), disabled: loading },
+    ], [t, loading]);
+    const favoriteItems = (0, react_1.useMemo)(() => (0, utils_2.resolveInnerLinksByIds)(favorite.value, allServiceGroups), [favorite.value, allServiceGroups]);
+    const recentItems = (0, react_1.useMemo)(() => (0, utils_2.resolveInnerLinksByIds)(favorite.recentServices ?? [], allServiceGroups), [favorite.recentServices, allServiceGroups]);
+    const resolvedSegment = segment ?? constants_1.FAVORITES_SEGMENT.Favorites;
+    const isFavoritesSegment = resolvedSegment === constants_1.FAVORITES_SEGMENT.Favorites;
+    const isEmpty = (isFavoritesSegment ? favoriteItems : recentItems).length === 0;
+    const handleRecentServiceClick = (service) => (event) => {
+        favorite.onRecentServiceClick?.(service.id, event);
+        service.onClick(event);
+    };
+    const recentCards = recentItems.map(service => ((0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardServiceLight, { as: 'a', className: styles_module_scss_1.default.card, favorite: {
+            enabled: true,
+            checked: favorite.value.includes(service.id),
+            onChange: favorite.onChange(service.id),
+        }, ...(0, utils_3.getCommonCardProps)(service, handleRecentServiceClick(service)) }, service.id)));
+    const content = (0, react_1.useMemo)(() => {
+        if (loading) {
+            return (0, jsx_runtime_1.jsx)(components_1.FavoritesItemsSkeleton, {});
+        }
+        const handleFavoriteServiceClick = (service) => (event) => {
+            favorite.onFavoriteServiceClick?.(service.id, event);
+            service.onClick(event);
+        };
+        /* Drag&drop реордер и приём карточек из сетки — только на desktop (требует
+          <DndContext>-предка). На mobile нет reorder-жеста, добавление/удаление
+          избранного идёт через звёздочку на карточке. */
+        return isMobile ? ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.listScroll, children: (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", { className: styles_module_scss_1.default.list, "data-test-id": constants_1.FAVORITES_TEST_IDS.list, children: [isEmpty && (0, jsx_runtime_1.jsx)(components_1.EmptyState, { isFavoritesSegment: isFavoritesSegment, isMobile: true }), !isEmpty &&
+                            isFavoritesSegment &&
+                            favoriteItems.map(service => ((0, jsx_runtime_1.jsx)(uikit_product_card_predefined_1.CardServiceLight, { as: 'a', className: styles_module_scss_1.default.card, actionsVisibility: 'always', actionsSize: 's', favorite: {
+                                    enabled: true,
+                                    checked: true,
+                                    onChange: favorite.onChange(service.id),
+                                }, ...(0, utils_3.getCommonCardProps)(service, handleFavoriteServiceClick(service)) }, service.id))), !isEmpty && !isFavoritesSegment && recentCards] }) }) })) : ((0, jsx_runtime_1.jsx)(components_1.FavoritesSortable, { favorite: favorite, favoriteItems: favoriteItems, segment: resolvedSegment, setSegment: setSegment, isEmpty: isEmpty, recentCards: recentCards, onFavoriteServiceClick: handleFavoriteServiceClick }));
+    }, [
+        favorite,
+        favoriteItems,
+        isEmpty,
+        isFavoritesSegment,
+        isMobile,
+        loading,
+        recentCards,
+        resolvedSegment,
+        setSegment,
+    ]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, "data-test-id": constants_1.FAVORITES_TEST_IDS.root, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.header, headerClassName), "data-test-id": constants_1.FAVORITES_TEST_IDS.header, children: [(0, jsx_runtime_1.jsx)(segment_control_1.SegmentControl, { size: 'm', outline: true, width: segment_control_1.WIDTH.Full, value: loading ? undefined : segment, onChange: setSegment, className: styles_module_scss_1.default.segmentControl, "data-test-id": constants_1.FAVORITES_TEST_IDS.segmentControl, items: segmentControlItems }), favorite.actions && ((0, jsx_runtime_1.jsx)(list_1.Droplist, { size: 'm', ...favorite.actions, closeDroplistOnItemClick: true, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: 'function', size: 'm', appearance: 'neutral', icon: (0, jsx_runtime_1.jsx)(system_1.KebabSVG, { size: 24 }), "data-test-id": constants_1.FAVORITES_TEST_IDS.settingsButton, disabled: loading }) }))] }), content] }));
+}

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

@@ -0,0 +1,3 @@
+export declare function EmptyFavoriteSVG({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyFavoriteSVG = EmptyFavoriteSVG;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function EmptyFavoriteSVG({ className }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { className: className, "data-favorite": 'true', 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', fill: 'none', strokeWidth: '1.5' }), (0, jsx_runtime_1.jsx)("path", { d: 'M20 6L24.7699 14.4348L34.2658 16.3647L27.7178 23.5077L28.8168 33.1353L20 29.115L11.1832 33.1353L12.2822 23.5077L5.73415 16.3647L15.2301 14.4348L20 6Z', stroke: 'none' })] }));
+}

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

@@ -0,0 +1,3 @@
+export declare function EmptyRecentSVG({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;