@cloud-ru/ds-uikit-product-header 1.5.2-preview-b174c2b1.0 → 1.5.2

package/dist/cjs/style.css

@@ -320,8 +320,6 @@
 }
 
 .group{
-  content-visibility:auto;
-  contain-intrinsic-size:auto var(--sn-primitive-dimension-128, 128px);
   position:relative;
   overflow-x:clip;
   display:flex;
@@ -332,14 +330,6 @@
   border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
   background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }
-.group[data-appear]{
-  animation:group-appear 0.24s cubic-bezier(0.4, 0, 0.2, 1) backwards;
-}
-@media (prefers-reduced-motion: reduce){
-  .group[data-appear]{
-    animation:none;
-  }
-}
 .group[data-drag-preview]{
   cursor:grabbing;
 }
@@ -518,23 +508,6 @@
 .skeletonService{
   padding:var(--sn-primitive-dimension-4, 4px);
 }
-
-@keyframes group-appear{
-  from{
-    transform:translate(calc(-1 * var(--sn-primitive-dimension-12, 12px)), var(--sn-primitive-dimension-4, 4px));
-    opacity:0;
-  }
-}
-.content{
-  display:flex;
-  flex-direction:column;
-  gap:var(--sn-primitive-dimension-4, 4px);
-  width:100%;
-  min-width:0;
-}
-.content[data-mobile]{
-  gap:var(--sn-primitive-dimension-8, 8px);
-}
 .content[data-empty]{
   height:100%;
 }
@@ -542,12 +515,6 @@
   flex:1 1 auto;
 }
 
-.top{
-  display:flex;
-  flex-direction:column;
-  gap:inherit;
-}
-
 .noData{
   flex:1 1 auto;
   place-self:center center;
@@ -735,6 +702,11 @@
 .rightContent{
   container-type:inline-size;
   overflow-x:clip;
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  width:100%;
+  min-width:0;
   padding:var(--sn-primitive-dimension-16, 16px);
 }
 
@@ -786,6 +758,13 @@
   padding:0 var(--sn-primitive-dimension-4, 4px);
 }
 
+.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-brand-palette-gray-90, #eeeff3))) !important;
 }
@@ -887,15 +866,10 @@
   border-radius:var(--sn-density-radius-3xs, var(--sn-platform-comfort-radius-3xs, var(--sn-primitive-dimension-2, 2px)));
 }
 
-.draggableCard,
-.staticCard{
+.draggableCard{
   display:flex;
   min-width:0;
 }
-
-.staticCard{
-  position:relative;
-}
 .breadcrumbs{
   display:flex;
   align-items:center;

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

@@ -4,7 +4,6 @@ import { ElementType } from 'react';
 export type HeaderButtonProps<T extends ElementType = 'button'> = Omit<ButtonProps<T>, 'size' | 'appearance' | 'view'> & {
     /** Настройки тултипа. `placement` и `disableSpanWrapper` зафиксированы под анатомию хедера */
     tooltip?: Omit<TooltipProps, 'placement'>;
-    /** Мобильная раскладка — тултип не показывается (на mobile нет hover). */
     isMobile?: boolean;
 };
 /**

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

@@ -1,17 +1,11 @@
 import { WithSupportProps } from '@cloud-ru/ds-utils';
 import { ReactNode } from 'react';
 export type HeaderLayoutProps = WithSupportProps<{
-    /** CSS-класс корневого элемента. */
     className?: string;
-    /** Слот главного меню (слева, после логотипа). */
     menu?: ReactNode;
-    /** Слот логотипа (крайний левый). */
     logo?: ReactNode;
-    /** Слот селектора (например, выбор облака/организации), после меню. */
     select?: ReactNode;
-    /** Слот хлебных крошек. На mobile переносится под основную строку хедера. */
     breadcrumbs?: ReactNode;
-    /** Слот тулбара — правая часть хедера. */
     toolbar?: ReactNode;
 }>;
 export declare function HeaderLayout({ menu, logo, select, breadcrumbs, toolbar, className, ...rest }: HeaderLayoutProps): import("react/jsx-runtime").JSX.Element;

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

@@ -3,19 +3,12 @@ import { WithSupportProps } from '@cloud-ru/ds-utils';
 import { MouseEventHandler } from 'react';
 import { HeaderLogoMode } from './constants.js';
 export type LogoProps = WithSupportProps<{
-    /** Флаг загрузки — логотип показывается в состоянии загрузки кнопки. */
     loading?: boolean;
-    /** Путь до кастомного изображения логотипа. Без пропа (или при ошибке загрузки) — дефолтная иконка. */
     path?: string;
-    /** Режим окружения — отображается промо-тегом рядом с дефолтной иконкой (не для `'prod'`). */
     mode?: HeaderLogoMode;
-    /** Ссылка логотипа. */
     href: string;
-    /** Колбэк клика по логотипу. */
     onClick?: MouseEventHandler<HTMLAnchorElement>;
-    /** CSS-класс корневого элемента. */
     className?: string;
-    /** Настройки тултипа логотипа. */
     tooltip?: TooltipProps;
 }>;
 export declare function Logo({ path, loading, mode, href, onClick, className, tooltip, ...rest }: LogoProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { MainMenuSVG } from '@cloud-ru/ds-icons/interface/product';
 import { useValueControl } from '@cloud-ru/ds-utils';
-import { useCallback, useEffect } from 'react';
+import { useEffect } from 'react';
 import { TEST_IDS } from '../../constants.js';
 import { useMobileLayout } from '../../hooks/useMobileLayout.js';
 import { headerLocale } from '../../locale/index.js';
@@ -11,16 +11,13 @@ import { MenuMobile } from './helperComponents/MenuMobile/index.js';
 export function MainMenu({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, logo, leftTop, leftBottom, rightTop, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, favorite, search, preferences, disabled, defaultWidth, onWidthChangeEnd, draggerTooltip, loading, }) {
     const { t } = headerLocale.useTranslations();
     const [open = false, setOpen] = useValueControl({ value: openProp, onChange: setOpenProp });
-    const searchValue = search?.value;
-    const onSearchChange = search?.onChange;
     useEffect(() => {
-        if (!open && searchValue)
-            onSearchChange?.('');
-    }, [open, searchValue, onSearchChange]);
-    const handleOpen = useCallback(() => {
-        setOpen(true);
-    }, [setOpen]);
+        if (!open && search?.value)
+            search?.onChange('');
+    }, [open, search]);
     const isMobile = useMobileLayout();
     const MenuComponent = isMobile ? MenuMobile : MenuDesktop;
-    return (_jsxs(_Fragment, { children: [_jsx(HeaderButton, { tooltip: open ? undefined : { tip: t('services') }, isMobile: isMobile, disabled: disabled, icon: _jsx(MainMenuSVG, {}), onClick: handleOpen, "data-test-id": TEST_IDS.mainMenu.drawerButton }), _jsx(MenuComponent, { settingItems: settingItems, segments: segments, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, platformGroups: platformGroups, search: search, logo: logo, leftTop: leftTop, leftBottom: leftBottom, rightTop: rightTop, favorite: favorite, open: open, setOpen: setOpen, preferences: preferences, defaultWidth: defaultWidth, onWidthChangeEnd: onWidthChangeEnd, draggerTooltip: draggerTooltip, loading: loading })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(HeaderButton, { tooltip: open ? undefined : { tip: t('services') }, isMobile: isMobile, disabled: disabled, icon: _jsx(MainMenuSVG, {}), onClick: () => {
+                    setOpen(true);
+                }, "data-test-id": TEST_IDS.mainMenu.drawerButton }), _jsx(MenuComponent, { settingItems: settingItems, segments: segments, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, platformGroups: platformGroups, search: search, logo: logo, leftTop: leftTop, leftBottom: leftBottom, rightTop: rightTop, favorite: favorite, open: open, setOpen: setOpen, preferences: preferences, defaultWidth: defaultWidth, onWidthChangeEnd: onWidthChangeEnd, draggerTooltip: draggerTooltip, loading: loading })] }));
 }

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

@@ -40,7 +40,6 @@ export type ContentProps = {
      * Колбэк клика по карточке сервиса в сегменте.
      */
     onSegmentServiceClick?(service: InnerLink, e?: MouseEvent<HTMLElement>): void;
-    /** Избранное. Без пропа группа-предок карточек драга из избранного не активируется. */
     favorite?: FavoriteProps;
     /**
      * Настройки меню (модалка по кнопке в тулбаре): описания карточек, цвета групп.
@@ -48,17 +47,12 @@ export type ContentProps = {
      * Не передано — кнопка настроек в тулбаре не отображается.
      */
     preferences?: MainMenuPreferencesProps;
-    /** Текущее значение поисковой строки — переключает контент между каталогом и результатами поиска. */
     searchValue?: string;
-    /** Слот поисковой строки — рендерится над контентом. */
     search?: ReactNode;
     /** Слот над тулбаром правой колонки (например, баннеры) */
     rightTop?: ReactNode;
-    /** Слот под сеткой карточек. */
     footer?: ReactNode;
-    /** Мобильная раскладка. */
     isMobile?: boolean;
-    /** CSS-класс корневого элемента. */
     className?: string;
     /** Флаг загрузки данных */
     loading?: boolean;

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

@@ -1,22 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { Accordion } from '@cloud-ru/ds-accordion';
 import { CrossSVG, SearchSVG } from '@cloud-ru/ds-icons/interface/system';
 import { InfoBlock } from '@cloud-ru/ds-info-block';
-import { useEventHandler, useValueControl } from '@cloud-ru/ds-utils';
+import { useValueControl } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
 import { useCallback, useDeferredValue, useMemo } from 'react';
 import { headerLocale } from '../../../../locale/index.js';
-import { noop } from '../../../../utils/noop.js';
 import { shouldBeOpenedInNewTab } from '../../../../utils/shouldBeOpenedInNewTab.js';
 import { getLinksGroupVisibleItemsCount, resolveGroupBlockColor } from '../../utils/index.js';
-import { MountAnimation } from '../MountAnimation/index.js';
-import { CardsContext } from './cardsContext.js';
 import { TEST_IDS } from './constants.js';
 import { ContentToolbar } from './helperComponents/ContentToolbar/index.js';
 import { SortableGroup, SortableGroupSkeleton } from './helperComponents/SortableGroup/index.js';
 import { useContentSegmentsSortable } from './hooks/useContentSegmentsSortable.js';
-import { useProgressiveCount } from './hooks/useProgressiveCount.js';
 import { useSegmentDnd } from './hooks/useSegmentDnd.js';
 import styles from './styles.module.css';
 export function Content({ searchValue, search, rightTop, segments, searchGroups = [], segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, onSegmentServiceClick, className, footer, favorite, isMobile, preferences, loading, }) {
@@ -31,8 +27,7 @@ export function Content({ searchValue, search, rightTop, segments, searchGroups
     });
     const isSearching = Boolean(searchValue);
     const enableServiceDrag = Boolean(favorite) && !isMobile && !isSearching;
-    // Ссылки на обработчики стабильны: иначе `memo` карточек ломается при каждом рендере потребителя.
-    const handleLinkClick = useEventHandler((service, e) => {
+    const handleLinkClick = useCallback((service, e) => {
         if (service.disabled) {
             e?.preventDefault();
             return;
@@ -42,11 +37,7 @@ export function Content({ searchValue, search, rightTop, segments, searchGroups
         }
         onSegmentServiceClick?.(service, e);
         service.onClick?.(e);
-    });
-    const handleFavoriteChange = useEventHandler((productId) => (favorite ? favorite.onChange(productId) : noop));
-    const favoriteValue = favorite?.value;
-    const favoriteIds = useMemo(() => (favoriteValue ? new Set(favoriteValue) : undefined), [favoriteValue]);
-    const showGroupsColors = preferences?.showGroupsColors?.value;
+    }, [onSegmentServiceClick]);
     const { orderedGroups, expandedIds, onExpandedChange, handleDragEnd: handleSortableDragEnd, } = useContentSegmentsSortable({
         segments,
         activeSegmentId: segmentId,
@@ -64,50 +55,35 @@ export function Content({ searchValue, search, rightTop, segments, searchGroups
         expandedIds,
         onSortableDragEnd: handleSortableDragEnd,
         showDescription,
-        showGroupsColors,
-        favoriteIds,
-        onFavoriteChange: handleFavoriteChange,
+        showGroupsColors: preferences?.showGroupsColors?.value,
+        favorite,
     });
-    // Первый экран монтируется сразу, остальные группы дорисовываются порциями (см. `useProgressiveCount`).
-    const renderedGroupsCount = useProgressiveCount(visibleGroups.length, `${segmentId}|${isSearching}`, !loading);
-    const renderedGroups = useMemo(() => (renderedGroupsCount < visibleGroups.length ? visibleGroups.slice(0, renderedGroupsCount) : visibleGroups), [visibleGroups, renderedGroupsCount]);
-    const expandedIdsSet = useMemo(() => new Set(expandedIds), [expandedIds]);
-    const visibleGroupIds = useMemo(() => visibleGroups.map(({ id }) => id), [visibleGroups]);
-    const allGroupsExpanded = visibleGroups.length > 0 && visibleGroupIds.every(id => expandedIdsSet.has(id));
+    const allGroupsExpanded = visibleGroups.length > 0 && visibleGroups.every(({ id }) => expandedIds.includes(id));
     const handleToggleAllGroupsExpanded = useCallback(() => {
+        const visibleIds = visibleGroups.map(({ id }) => id);
         if (allGroupsExpanded) {
-            const visibleIdsSet = new Set(visibleGroupIds);
-            onExpandedChange(expandedIds.filter(id => !visibleIdsSet.has(id)));
+            onExpandedChange(expandedIds.filter(id => !visibleIds.includes(id)));
             return;
         }
-        onExpandedChange([...new Set([...expandedIds, ...visibleGroupIds])]);
-    }, [allGroupsExpanded, expandedIds, onExpandedChange, visibleGroupIds]);
-    const cardsContext = useMemo(() => ({
-        showDescription,
-        isMobile,
-        dragEnabled: enableServiceDrag,
-        favoriteIds,
-        onFavoriteChange: favoriteIds ? handleFavoriteChange : undefined,
-        onServiceClick: handleLinkClick,
-    }), [showDescription, isMobile, enableServiceDrag, favoriteIds, handleFavoriteChange, handleLinkClick]);
+        onExpandedChange([...new Set([...expandedIds, ...visibleIds])]);
+    }, [allGroupsExpanded, expandedIds, onExpandedChange, visibleGroups]);
     const segmentItems = useMemo(() => segments?.map(segment => ({
         value: segment.id,
         label: segment.label,
         icon: segment.icon,
     })), [segments]);
     const hasCards = visibleGroups.length > 0;
-    const mountAnimationType = isMobile ? undefined : 'fade-slide-up-right';
     const cards = (() => {
         if (loading) {
             return Array.from({ length: 5 }).map((_, index) => _jsx(SortableGroupSkeleton, { isMobile: isMobile }, index));
         }
         if (hasCards) {
-            return (_jsx(SortableContext, { items: visibleGroupIds, strategy: verticalListSortingStrategy, children: _jsx(CardsContext.Provider, { value: cardsContext, children: _jsx(Accordion, { selectionMode: 'multiple', expanded: expandedIds, onExpandedChange: onExpandedChange, children: renderedGroups.map(({ id, label, icon, items, favoritesEnabled, blockColor, highlight }) => (_jsx(SortableGroup, { id: id, icon: icon, label: label, items: items, isExpanded: expandedIdsSet.has(id), blockColor: resolveGroupBlockColor(blockColor, showGroupsColors), isMobile: isMobile, enableServiceDrag: enableServiceDrag, groupFavoritesEnabled: favoritesEnabled, appear: !isMobile, highlight: highlight }, id))) }) }) }));
+            return (_jsx(SortableContext, { items: visibleGroups.map(({ id }) => id), strategy: verticalListSortingStrategy, children: _jsx(Accordion, { selectionMode: 'multiple', expanded: expandedIds, onExpandedChange: onExpandedChange, children: visibleGroups.map(({ id, label, icon, items, favoritesEnabled, blockColor, highlight }) => (_jsx(SortableGroup, { id: id, icon: icon, label: label, items: items, isExpanded: expandedIds.includes(id), blockColor: resolveGroupBlockColor(blockColor, preferences?.showGroupsColors?.value), showDescription: showDescription, isMobile: isMobile, enableServiceDrag: enableServiceDrag, favorite: favorite, groupFavoritesEnabled: favoritesEnabled, onServiceClick: handleLinkClick, highlight: highlight }, id))) }) }));
         }
         return (_jsx(InfoBlock, { size: 'm', icon: {
                 icon: isSearching ? SearchSVG : CrossSVG,
                 appearance: 'neutral',
             }, content: isSearching ? t('noDataFound') : t('noData'), "data-test-id": isSearching ? TEST_IDS.noDataFound : TEST_IDS.noData, "data-mobile": isMobile || undefined, className: styles.noData }));
     })();
-    return (_jsxs(_Fragment, { children: [search, _jsxs("div", { className: cn(styles.content, className), "data-mobile": isMobile || undefined, "data-empty": (!loading && !hasCards) || undefined, children: [!isSearching && (_jsx(_Fragment, { children: _jsxs(MountAnimation, { type: mountAnimationType, className: styles.top, children: [_jsx(ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile, loading: loading }), rightTop] }) })), cards, footer] })] }));
+    return (_jsxs(_Fragment, { children: [search, _jsxs("div", { className: cn(styles.content, className), "data-empty": (!loading && !hasCards) || undefined, children: [!isSearching && (_jsxs(_Fragment, { children: [_jsx(ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile, loading: loading }), rightTop] })), cards, footer] })] }));
 }

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/ContentToolbar.d.ts

@@ -1,27 +1,18 @@
 import { ReactNode } from 'react';
 import { MainMenuPreferencesProps } from '../../../../types.js';
 export type ContentToolbarSegmentItem = {
-    /** Значение сегмента (id). */
     value: string;
-    /** Подпись сегмента. */
     label: string;
-    /** Иконка сегмента. */
     icon?: ReactNode;
 };
 export type ContentToolbarProps = {
-    /** Значение активного сегмента SegmentControl. */
     segment: string;
-    /** Колбэк смены активного сегмента. */
     onSegmentChange(segment: string): void;
-    /** Пункты SegmentControl. Без пунктов (или с одним) SegmentControl не отображается. */
     segmentItems?: ContentToolbarSegmentItem[];
-    /** Все группы сегмента раскрыты — определяет иконку кнопки свернуть/развернуть все. */
     allGroupsExpanded: boolean;
-    /** Колбэк клика по кнопке свернуть/развернуть все группы. */
     onToggleAllGroupsExpanded(): void;
     /** Настройки меню (модалка по кнопке). Не передано — кнопка настроек не отображается. */
     preferences?: MainMenuPreferencesProps;
-    /** Мобильная раскладка — кнопка свернуть/развернуть все скрывается. */
     isMobile?: boolean;
     /** Флаг загрузки данных — сегменты подгружаются с бэка, поэтому SegmentControl тоже уходит в скелетон. */
     loading?: boolean;

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/SortableGroup.d.ts

@@ -1,31 +1,12 @@
 import { LinksGroup, LinksGroupBlockColor, LinksGroupTitle } from '../../../../types.js';
-import { CardsContextValue } from '../../cardsContext.js';
-export type SortableGroupProps = Pick<LinksGroup, 'icon' | 'items'> & {
-    /** Id группы. */
+import { SortableGroupCardsProps } from './components/index.js';
+export type SortableGroupProps = Omit<SortableGroupCardsProps, 'groupId'> & Pick<LinksGroup, 'icon'> & {
     id: string;
-    /** Заголовок группы. */
     label: LinksGroupTitle;
-    /** Раскрыта ли группа. */
     isExpanded?: boolean;
-    /** Мобильная раскладка. */
-    isMobile?: boolean;
-    /** Группу можно перетаскивать (иначе рендерится без `useSortable`). */
-    enableServiceDrag?: boolean;
-    /** Цвет блока группы. */
     blockColor?: LinksGroupBlockColor;
-    /** Визуальное выделение группы. */
     highlight?: boolean;
-    /** Разрешено ли добавление карточек группы в избранное. */
     groupFavoritesEnabled?: boolean;
-    /** Группа появляется с fade-in при монтировании (на desktop; на mobile анимирует контейнер). */
-    appear?: boolean;
 };
-declare function SortableGroupBase(props: SortableGroupProps): import("react/jsx-runtime").JSX.Element;
-export declare const SortableGroup: import("react").MemoExoticComponent<typeof SortableGroupBase>;
-export type SortableGroupDragPreviewProps = Omit<SortableGroupProps, 'enableServiceDrag'> & Pick<CardsContextValue, 'showDescription' | 'favoriteIds' | 'onFavoriteChange'>;
-/**
- * Превью группы в `DragOverlay`. Рендерится вне `Content`, поэтому свой `CardsContext` собирает
- * сам: без drag-обвязки карточек и без обработчика клика.
- */
-export declare function SortableGroupDragPreview({ id, label, items, isExpanded, showDescription, isMobile, favoriteIds, onFavoriteChange, groupFavoritesEnabled, blockColor, highlight, }: SortableGroupDragPreviewProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function SortableGroup({ id, icon, label, items, isExpanded, showDescription, isMobile, enableServiceDrag, favorite, groupFavoritesEnabled, onServiceClick, blockColor, highlight, }: SortableGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function SortableGroupDragPreview({ id, label, items, isExpanded, showDescription, isMobile, favorite, groupFavoritesEnabled, blockColor, highlight, }: Omit<SortableGroupProps, 'enableServiceDrag'>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/SortableGroup.js

@@ -4,27 +4,14 @@ import { CSS } from '@dnd-kit/utilities';
 import { Accordion } from '@cloud-ru/ds-accordion';
 import { DRAG_MODE, DragGhost, DragPreview } from '@cloud-ru/ds-drag-and-drop';
 import { useThemeAppearance } from '@cloud-ru/ds-theme';
-import { memo, useCallback, useState } from 'react';
-import { CardsContext } from '../../cardsContext.js';
 import { TEST_IDS } from '../../constants.js';
 import { SortableGroupCards, SortableGroupHeader } from './components/index.js';
 import styles from './styles.module.css';
-function GroupView({ id, icon, label, items, isExpanded, isMobile, enableServiceDrag, groupFavoritesEnabled = true, blockColor, highlight, appear, attributes, listeners, setNodeRef, style, isDragging, }) {
-    const { colorScheme } = useThemeAppearance().appearance;
-    // Появление проигрывается один раз. React переставляет узлы `insertBefore`, а браузер при
-    // повторной вставке перезапускает CSS-анимацию — при перетаскивании группы соседи «моргали».
-    // После окончания флаг снимается, и перестановка анимацию уже не запускает.
-    const [isAppearing, setIsAppearing] = useState(Boolean(appear));
-    const handleAnimationEnd = useCallback((event) => {
-        // `animationend` всплывает от вложенных анимаций — нужна только своя.
-        if (event.target === event.currentTarget) {
-            setIsAppearing(false);
-        }
-    }, []);
-    return (_jsxs(DragGhost, { innerRef: setNodeRef, id: id, style: style, className: styles.group, dragging: isDragging, mode: DRAG_MODE.Dynamic, "data-appear": isAppearing || undefined, onAnimationEnd: handleAnimationEnd, "data-test-id": `${TEST_IDS.groupCard}-${id}`, children: [_jsx("div", { className: styles.decoration, "data-color-scheme": colorScheme, "data-is-highlighted": highlight || undefined, children: _jsx("div", { className: styles.decorationBackground, children: _jsx("div", { className: styles.colorMarker, "data-block-color": blockColor }) }) }), _jsx(Accordion.CollapseBlockTertiary, { id: id, showChevron: false, afterTitle: _jsx(SortableGroupHeader, { label: label, icon: icon, isExpanded: isExpanded, enableServiceDrag: enableServiceDrag, attributes: attributes, listeners: listeners, isMobile: isMobile }), children: _jsx(SortableGroupCards, { groupId: id, items: items, groupFavoritesEnabled: groupFavoritesEnabled }) })] }));
-}
-function DraggableGroup(props) {
-    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: props.id });
+export function SortableGroup({ id, icon, label, items, isExpanded, showDescription, isMobile, enableServiceDrag, favorite, groupFavoritesEnabled = true, onServiceClick, blockColor, highlight, }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+        id,
+        disabled: !enableServiceDrag,
+    });
     const style = {
         // CSS.Transform добавляет scaleX/scaleY, из-за чего перетаскиваемая группа "растягивается"
         // при пересечении с соседней группой другой высоты. CSS.Translate использует только сдвиг.
@@ -33,25 +20,10 @@ function DraggableGroup(props) {
         transform: transform ? CSS.Translate.toString(transform) : undefined,
         transition,
     };
-    return (_jsx(GroupView, { ...props, attributes: attributes, listeners: listeners, setNodeRef: setNodeRef, style: style, isDragging: isDragging }));
-}
-function SortableGroupBase(props) {
-    // Без drag (mobile, поиск, нет избранного) группа не регистрируется в `SortableContext`.
-    return props.enableServiceDrag ? _jsx(DraggableGroup, { ...props }) : _jsx(GroupView, { ...props });
+    const { colorScheme } = useThemeAppearance().appearance;
+    return (_jsxs(DragGhost, { innerRef: setNodeRef, id: id, style: style, className: styles.group, dragging: isDragging, mode: DRAG_MODE.Dynamic, "data-test-id": `${TEST_IDS.groupCard}-${id}`, children: [_jsx("div", { className: styles.decoration, "data-color-scheme": colorScheme, "data-is-highlighted": highlight || undefined, children: _jsx("div", { className: styles.decorationBackground, children: _jsx("div", { className: styles.colorMarker, "data-block-color": blockColor }) }) }), _jsx(Accordion.CollapseBlockTertiary, { id: id, showChevron: false, afterTitle: _jsx(SortableGroupHeader, { label: label, icon: icon, isExpanded: isExpanded, enableServiceDrag: enableServiceDrag, attributes: attributes, listeners: listeners, isMobile: isMobile }), children: _jsx(SortableGroupCards, { groupId: id, items: items, showDescription: showDescription, isMobile: isMobile, enableServiceDrag: enableServiceDrag, favorite: favorite, groupFavoritesEnabled: groupFavoritesEnabled, onServiceClick: onServiceClick }) })] }));
 }
-export const SortableGroup = memo(SortableGroupBase);
-/**
- * Превью группы в `DragOverlay`. Рендерится вне `Content`, поэтому свой `CardsContext` собирает
- * сам: без drag-обвязки карточек и без обработчика клика.
- */
-export function SortableGroupDragPreview({ id, label, items, isExpanded, showDescription, isMobile, favoriteIds, onFavoriteChange, groupFavoritesEnabled, blockColor, highlight, }) {
+export function SortableGroupDragPreview({ id, label, items, isExpanded, showDescription, isMobile, favorite, groupFavoritesEnabled, blockColor, highlight, }) {
     const { colorScheme } = useThemeAppearance().appearance;
-    const cardsContext = {
-        showDescription,
-        isMobile,
-        dragEnabled: false,
-        favoriteIds,
-        onFavoriteChange,
-    };
-    return (_jsx(DragPreview, { className: styles.groupDragPreview, children: _jsxs("div", { className: styles.group, "data-drag-preview": true, children: [_jsx("div", { className: styles.decoration, "data-color-scheme": colorScheme, "data-is-highlighted": highlight || undefined, children: _jsx("div", { className: styles.decorationBackground, children: _jsx("div", { className: styles.colorMarker, "data-block-color": blockColor }) }) }), _jsx("div", { className: styles.groupDragPreviewHeader, children: _jsx(SortableGroupHeader, { label: label, isExpanded: isExpanded, isMobile: isMobile, enableServiceDrag: true }) }), isExpanded && (_jsx(CardsContext.Provider, { value: cardsContext, children: _jsx(SortableGroupCards, { groupId: id, items: items, groupFavoritesEnabled: groupFavoritesEnabled }) }))] }) }));
+    return (_jsx(DragPreview, { className: styles.groupDragPreview, children: _jsxs("div", { className: styles.group, "data-drag-preview": true, children: [_jsx("div", { className: styles.decoration, "data-color-scheme": colorScheme, "data-is-highlighted": highlight || undefined, children: _jsx("div", { className: styles.decorationBackground, children: _jsx("div", { className: styles.colorMarker, "data-block-color": blockColor }) }) }), _jsx("div", { className: styles.groupDragPreviewHeader, children: _jsx(SortableGroupHeader, { label: label, isExpanded: isExpanded, isMobile: isMobile, enableServiceDrag: true }) }), isExpanded && (_jsx(SortableGroupCards, { groupId: id, items: items, showDescription: showDescription, isMobile: isMobile, favorite: favorite, groupFavoritesEnabled: groupFavoritesEnabled }))] }) }));
 }

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupCards.d.ts

@@ -1,12 +1,9 @@
 import { InnerLink } from '../../../../../types.js';
-export type SortableGroupCardsProps = {
-    /** Id группы-предка. */
+import { ServiceCardProps } from '../../../../ServiceCard/index.js';
+export type SortableGroupCardsProps = Pick<ServiceCardProps, 'showDescription' | 'isMobile' | 'favorite' | 'onServiceClick'> & {
     groupId: string;
-    /** Карточки сервисов группы. */
     items: InnerLink[];
-    /** Разрешено ли добавление карточек группы в избранное. */
+    enableServiceDrag?: boolean;
     groupFavoritesEnabled?: boolean;
 };
-declare function SortableGroupCardsBase({ groupId, items, groupFavoritesEnabled }: SortableGroupCardsProps): import("react/jsx-runtime").JSX.Element;
-export declare const SortableGroupCards: import("react").MemoExoticComponent<typeof SortableGroupCardsBase>;
-export {};
+export declare function SortableGroupCards({ groupId, items, showDescription, isMobile, enableServiceDrag, favorite, groupFavoritesEnabled, onServiceClick, }: SortableGroupCardsProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupCards.js

@@ -1,22 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
 import { isSubCategoryCard } from '../../../../../utils/innerLink.js';
-import { GridServiceCard } from '../../../../ServiceCard/index.js';
-import { useCardsContext } from '../../../cardsContext.js';
+import { DraggableServiceCard } from '../../../../ServiceCard/index.js';
 import styles from '../styles.module.css';
 import { SubCategory } from './SubCategory/index.js';
-function SortableGroupCardsBase({ groupId, items, groupFavoritesEnabled }) {
-    const { isMobile, showDescription, dragEnabled, favoriteIds, onFavoriteChange, onServiceClick } = useCardsContext();
-    const cardFavoriteChange = favoriteIds ? onFavoriteChange : undefined;
+export function SortableGroupCards({ groupId, items, showDescription, isMobile, enableServiceDrag, favorite, groupFavoritesEnabled, onServiceClick, }) {
     return (_jsx("div", { className: styles.groupBody, "data-mobile": isMobile || undefined, children: items.map(service => {
             if (service.hidden) {
                 return null;
             }
             const key = String(groupId) + service.id;
             if (isSubCategoryCard(service)) {
-                return (_jsx(SubCategory, { groupId: groupId, service: service, groupFavoritesEnabled: groupFavoritesEnabled }, key));
+                return (_jsx(SubCategory, { groupId: groupId, service: service, showDescription: showDescription, isMobile: isMobile, dragDisabled: !enableServiceDrag, favorite: favorite, groupFavoritesEnabled: groupFavoritesEnabled, onServiceClick: onServiceClick }, key));
             }
-            return (_jsx(GridServiceCard, { groupId: groupId, service: service, isFavorite: favoriteIds?.has(service.id), onFavoriteChange: cardFavoriteChange, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragEnabled: dragEnabled }, key));
+            return (_jsx(DraggableServiceCard, { groupId: groupId, service: service, favorite: favorite, isMobile: isMobile, onServiceClick: onServiceClick, showDescription: showDescription, dragDisabled: !enableServiceDrag }, key));
         }) }));
 }
-export const SortableGroupCards = memo(SortableGroupCardsBase);

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupDragHandle.d.ts

@@ -1,8 +1,6 @@
 import { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
 export type SortableGroupDragHandleProps = {
-    /** ARIA-атрибуты `dnd-kit` draggable-элемента. */
     attributes?: DraggableAttributes;
-    /** Обработчики событий `dnd-kit` для инициации перетаскивания. */
     listeners?: DraggableSyntheticListeners;
 };
 export declare function SortableGroupDragHandle({ attributes, listeners }: SortableGroupDragHandleProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.d.ts

@@ -6,6 +6,4 @@ export type SortableGroupHeaderProps = Pick<LinksGroup, 'icon'> & {
     enableServiceDrag?: boolean;
     isMobile?: boolean;
 } & SortableGroupDragHandleProps;
-declare function SortableGroupHeaderBase({ label, icon, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }: SortableGroupHeaderProps): import("react/jsx-runtime").JSX.Element;
-export declare const SortableGroupHeader: import("react").MemoExoticComponent<typeof SortableGroupHeaderBase>;
-export {};
+export declare function SortableGroupHeader({ label, icon, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }: SortableGroupHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupHeader.js

@@ -3,15 +3,13 @@ import { Button } from '@cloud-ru/ds-button';
 import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/ds-icons/interface/system';
 import { Typography } from '@cloud-ru/ds-typography';
 import { TitleClickable } from '@cloud-ru/ds-uikit-product-title-clickable';
-import { memo, useCallback } from 'react';
 import { getLinkEmblem } from '../../../../../utils/index.js';
 import styles from '../styles.module.css';
 import { SortableGroupDragHandle } from './SortableGroupDragHandle.js';
-function SortableGroupHeaderBase({ label, icon, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }) {
-    const handleLabelClick = useCallback(e => {
+export function SortableGroupHeader({ label, icon, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }) {
+    const handleLabelClick = e => {
         e.stopPropagation();
         label?.onClick?.(e);
-    }, [label]);
+    };
     return (_jsxs("div", { className: styles.header, "data-expanded": isExpanded || undefined, children: [_jsx(Typography, { variant: 'title', size: 'm', className: styles.headerTitle, "data-test-id": 'header__drawer-menu__group-card-title', children: label.onClick || label.href ? (_jsx(TitleClickable, { ...(label.href ? { as: 'a', href: label.href } : { as: 'div' }), onClick: handleLabelClick, title: label.text, icon: getLinkEmblem({ icon }) })) : (label.text) }), (enableServiceDrag || !isMobile) && (_jsxs("div", { className: styles.headerActions, "data-always-visible": isMobile || undefined, children: [enableServiceDrag && _jsx(SortableGroupDragHandle, { attributes: attributes, listeners: listeners }), !isMobile && (_jsx(Button, { view: 'elevated', appearance: 'neutral', size: 's', icon: isExpanded ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), "data-test-id": 'header__drawer-menu__group-card-collapse' }))] }))] }));
 }
-export const SortableGroupHeader = memo(SortableGroupHeaderBase);

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupSkeleton.d.ts

@@ -1,5 +1,4 @@
 type SortableGroupSkeletonProps = {
-    /** Мобильная раскладка. */
     isMobile?: boolean;
 };
 export declare function SortableGroupSkeleton({ isMobile }: SortableGroupSkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/SubCategory.d.ts

@@ -1,12 +1,7 @@
-import { InnerLink } from '../../../../../../types.js';
-export type SubCategoryProps = {
-    /** Id группы-предка. */
+import { ServiceCardProps } from '../../../../../ServiceCard/index.js';
+export type SubCategoryProps = Pick<ServiceCardProps, 'service' | 'onServiceClick' | 'favorite' | 'showDescription' | 'isMobile'> & {
     groupId: string;
-    /** Карточка подкатегории (с непустым {@link InnerLink.items}). */
-    service: InnerLink;
-    /** Разрешено ли добавление карточек группы в избранное. */
+    dragDisabled?: boolean;
     groupFavoritesEnabled?: boolean;
 };
-declare function SubCategoryBase({ groupId, service, groupFavoritesEnabled }: SubCategoryProps): import("react/jsx-runtime").JSX.Element;
-export declare const SubCategory: import("react").MemoExoticComponent<typeof SubCategoryBase>;
-export {};
+export declare function SubCategory({ groupId, service, showDescription, isMobile, dragDisabled, favorite, onServiceClick, groupFavoritesEnabled, }: SubCategoryProps): import("react/jsx-runtime").JSX.Element;