@cloud-ru/ds-uikit-product-header 1.1.1 → 1.1.2-preview-d405de03.0

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

@@ -19,8 +19,7 @@ export function Content({ searchValue, search, rightTop, segments, searchGroups
     const { t } = headerLocale.useTranslations();
     const showDescription = useDeferredValue(preferences?.showDescription.value ?? false);
     const segmentPrefsById = useMemo(() => new Map((segmentPrefs ?? []).map(prefs => [prefs.id, prefs])), [segmentPrefs]);
-    const visibleSegments = useMemo(() => segments.filter(segment => segment.items.some(group => getLinksGroupVisibleItemsCount(group) > 0)), [segments]);
-    const defaultSegmentId = visibleSegments[0]?.id ?? segments[0]?.id ?? '';
+    const defaultSegmentId = activeSegmentId ?? segments[0]?.id ?? '';
     const [segmentId = defaultSegmentId, setSegmentId] = useValueControl({
         value: activeSegmentId,
         defaultValue: defaultSegmentId,
@@ -29,10 +28,10 @@ export function Content({ searchValue, search, rightTop, segments, searchGroups
     const isSearching = Boolean(searchValue);
     const enableServiceDrag = Boolean(favorite) && !isMobile && !isSearching;
     useEffect(() => {
-        if (!visibleSegments.some(segment => segment.id === segmentId) && defaultSegmentId) {
+        if (!segments.some(segment => segment.id === segmentId) && defaultSegmentId) {
             setSegmentId(defaultSegmentId);
         }
-    }, [defaultSegmentId, segmentId, setSegmentId, visibleSegments]);
+    }, [defaultSegmentId, segmentId, setSegmentId, segments]);
     const handleLinkClick = useCallback(({ disabled, onClick }, e) => {
         if (disabled) {
             e?.preventDefault();
@@ -73,23 +72,23 @@ export function Content({ searchValue, search, rightTop, segments, searchGroups
         }
         onExpandedChange([...new Set([...expandedIds, ...visibleIds])]);
     }, [allGroupsExpanded, expandedIds, onExpandedChange, visibleGroups]);
-    const segmentItems = useMemo(() => visibleSegments.map(segment => ({
+    const segmentItems = useMemo(() => segments.map(segment => ({
         value: segment.id,
         label: segment.label,
         icon: segment.icon,
-    })), [visibleSegments]);
+    })), [segments]);
     const hasCards = visibleGroups.length > 0;
     const cards = (() => {
         if (loading) {
             return Array.from({ length: 5 }).map((_, index) => _jsx(SortableGroupSkeleton, { isMobile: isMobile }, index));
         }
         if (hasCards) {
-            return (_jsx(SortableContext, { items: visibleGroups.map(({ id }) => id), strategy: verticalListSortingStrategy, children: _jsx(Accordion, { selectionMode: 'multiple', expanded: expandedIds, onExpandedChange: onExpandedChange, children: visibleGroups.map(({ id, label, items, favoritesEnabled = true, blockColor, highlight }) => (_jsx(SortableGroup, { id: id, label: label, items: items, isExpanded: expandedIds.includes(id), blockColor: resolveGroupBlockColor(blockColor, preferences?.showGroupsColors?.value), showDescription: showDescription, isMobile: isMobile, enableServiceDrag: enableServiceDrag, favorite: favoritesEnabled ? favorite : undefined, onServiceClick: handleLinkClick, 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 = true, 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: favoritesEnabled ? favorite : undefined, onServiceClick: handleLinkClick, highlight: highlight }, id))) }) }));
         }
         return (_jsx(InfoBlock, { size: 'm', icon: {
                 icon: SearchSVG,
                 appearance: 'neutral',
             }, content: isSearching ? t('noDataFound') : t('noData'), "data-test-id": isSearching ? TEST_IDS.noDataFound : TEST_IDS.noData }));
     })();
-    return (_jsxs(_Fragment, { children: [search, _jsxs("div", { className: cn(styles.content, className), "data-mobile": isMobile || undefined, "data-empty": !hasCards || undefined, children: [!isSearching && (_jsxs(_Fragment, { children: [isMobile && rightTop, _jsx(ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile }), !isMobile && rightTop] })), cards, footer] })] }));
+    return (_jsxs(_Fragment, { children: [search, _jsxs("div", { className: cn(styles.content, className), "data-mobile": isMobile || undefined, "data-empty": (!loading && !hasCards) || undefined, children: [!isSearching && (_jsxs(_Fragment, { children: [isMobile && rightTop, _jsx(ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile }), !isMobile && rightTop] })), cards, footer] })] }));
 }

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.css

@@ -3,6 +3,7 @@
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
   justify-content:space-between;
+  width:100%;
   min-width:0;
   min-height:var(--sn-primitive-dimension-32, 32px);
 }

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

@@ -1,11 +1,11 @@
-import { LinksGroupBlockColor, LinksGroupTitle } from '../../../../types.js';
+import { LinksGroup, LinksGroupBlockColor, LinksGroupTitle } from '../../../../types.js';
 import { SortableGroupCardsProps } from './components/index.js';
-export type SortableGroupProps = Omit<SortableGroupCardsProps, 'groupId'> & {
+export type SortableGroupProps = Omit<SortableGroupCardsProps, 'groupId'> & Pick<LinksGroup, 'icon'> & {
     id: string;
     label: LinksGroupTitle;
     isExpanded?: boolean;
     blockColor?: LinksGroupBlockColor;
     highlight?: boolean;
 };
-export declare function SortableGroup({ id, label, items, isExpanded, showDescription, isMobile, enableServiceDrag, favorite, onServiceClick, blockColor, highlight, }: SortableGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function SortableGroup({ id, icon, label, items, isExpanded, showDescription, isMobile, enableServiceDrag, favorite, onServiceClick, blockColor, highlight, }: SortableGroupProps): import("react/jsx-runtime").JSX.Element;
 export declare function SortableGroupDragPreview({ id, label, items, isExpanded, showDescription, isMobile, favorite, blockColor, highlight, }: Omit<SortableGroupProps, 'enableServiceDrag'>): import("react/jsx-runtime").JSX.Element;

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

@@ -7,7 +7,7 @@ import { useThemeAppearance } from '@cloud-ru/ds-theme';
 import { TEST_IDS } from '../../constants.js';
 import { SortableGroupCards, SortableGroupHeader } from './components/index.js';
 import styles from './styles.module.css';
-export function SortableGroup({ id, label, items, isExpanded, showDescription, isMobile, enableServiceDrag, favorite, onServiceClick, blockColor, highlight, }) {
+export function SortableGroup({ id, icon, label, items, isExpanded, showDescription, isMobile, enableServiceDrag, favorite, onServiceClick, blockColor, highlight, }) {
     const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
         id,
         disabled: !enableServiceDrag,
@@ -21,7 +21,7 @@ export function SortableGroup({ id, label, items, isExpanded, showDescription, i
         transition,
     };
     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, 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, onServiceClick: onServiceClick }) })] }));
+    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, onServiceClick: onServiceClick }) })] }));
 }
 export function SortableGroupDragPreview({ id, label, items, isExpanded, showDescription, isMobile, favorite, blockColor, highlight, }) {
     const { colorScheme } = useThemeAppearance().appearance;

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

@@ -1,9 +1,9 @@
-import { LinksGroupTitle } from '../../../../../types.js';
+import { LinksGroup, LinksGroupTitle } from '../../../../../types.js';
 import { SortableGroupDragHandleProps } from './SortableGroupDragHandle.js';
-export type SortableGroupHeaderProps = {
+export type SortableGroupHeaderProps = Pick<LinksGroup, 'icon'> & {
     label: LinksGroupTitle;
     isExpanded?: boolean;
     enableServiceDrag?: boolean;
     isMobile?: boolean;
 } & SortableGroupDragHandleProps;
-export declare function SortableGroupHeader({ label, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }: SortableGroupHeaderProps): import("react/jsx-runtime").JSX.Element;
+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

@@ -2,8 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 { getLinkEmblem } from '../../../../../utils/index.js';
 import styles from '../styles.module.css';
 import { SortableGroupDragHandle } from './SortableGroupDragHandle.js';
-export function SortableGroupHeader({ label, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }) {
-    return (_jsxs("div", { className: styles.header, "data-expanded": isExpanded || undefined, children: [_jsx(Typography, { variant: 'title', size: 'm', className: styles.headerTitle, children: 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 function SortableGroupHeader({ label, icon, isExpanded, enableServiceDrag, attributes, listeners, isMobile, }) {
+    const handleLabelClick = e => {
+        e.stopPropagation();
+        label?.onClick?.(e);
+    };
+    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, before: 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' }))] }))] }));
 }

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

@@ -50,6 +50,7 @@
   overflow-x:clip;
   display:flex;
   flex-direction:column;
+  width:100%;
   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));

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

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

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

@@ -1,13 +1,15 @@
+import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Divider } from '@cloud-ru/ds-divider';
 import { DrawerCustom } from '@cloud-ru/ds-drawer';
-import { List } from '@cloud-ru/ds-list';
 import { Scroll } from '@cloud-ru/ds-scroll';
+import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';
 import { useValueControl } from '@cloud-ru/ds-utils';
 import { useCallback, useEffect, useMemo } from 'react';
 import { TEST_IDS } from '../../../../constants.js';
 import { MainMenuDndContext, useMainMenuDnd } from '../../hooks/useMainMenuDnd.js';
 import { useMenuItems } from '../../hooks/useMenuItems.js';
+import { getLinkEmblem } from '../../utils/index.js';
 import { Content } from '../Content/index.js';
 import { Favorites } from '../Favorites/index.js';
 import { MenuHeaderBrand } from '../MenuHeaderBrand/index.js';
@@ -15,7 +17,7 @@ import { MountAnimation } from '../MountAnimation/index.js';
 import { Search } from '../Search/index.js';
 import { MENU_WIDTH_MAX, MENU_WIDTH_MIN } from './constants.js';
 import styles from './styles.module.css';
-export function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, favorite, search, preferences, logo, rightTop, leftTop, defaultWidth = MENU_WIDTH_MAX, onWidthChangeEnd, draggerTooltip, loading, }) {
+export function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, favorite, search, preferences, logo, rightTop, leftTop, leftBottom, defaultWidth = MENU_WIDTH_MAX, onWidthChangeEnd, draggerTooltip, loading, }) {
     const [open = false, setOpen] = useValueControl({ value: openProp, onChange: setOpenProp });
     const { scrollRef, searchRef, resultItems } = useMenuItems({
         segments,
@@ -35,6 +37,7 @@ export function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems
         return () => cancelAnimationFrame(frameId);
     }, [open, hasSearch, searchRef]);
     const isNeedRightBlock = segments && segments.some(segment => segment.items.length > 0);
+    const hasBottomItems = Boolean(settingItems?.length) || Boolean(leftBottom);
     const allServiceGroups = useMemo(() => segments?.flatMap(segment => segment.items) ?? [], [segments]);
     const mainMenuDnd = useMainMenuDnd({
         favorite,
@@ -44,7 +47,7 @@ export function MenuDesktop({ open: openProp, setOpen: setOpenProp, settingItems
     const handleCloseDrawer = useCallback(() => {
         setOpen(false);
     }, [setOpen]);
-    const menu = (_jsxs("div", { className: styles.menu, children: [_jsxs("div", { className: styles.menuHeader, children: [_jsx(MenuHeaderBrand, { logo: logo, onClose: handleCloseDrawer, className: styles.menuHeaderBrand }), isNeedRightBlock && search && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), _jsx(Search, { ...search, ref: searchRef })] }))] }), _jsx(Divider, {}), _jsxs("div", { className: styles.menuBody, children: [_jsxs(MountAnimation, { className: styles.left, "data-test-id": TEST_IDS.mainMenu.left, type: 'slide-right', children: [leftTop && _jsx("div", { className: styles.leftTop, children: leftTop }), isNeedRightBlock && favorite && _jsx(Favorites, { favorite: favorite, allServiceGroups: allServiceGroups }), Boolean(settingItems?.length) && (_jsx(List, { items: settingItems ?? [], size: 'm', barHideStrategy: 'never', className: styles.settingItems }))] }), isNeedRightBlock && (_jsxs(_Fragment, { children: [_jsx(MountAnimation, { type: 'fade-in', children: _jsx(Divider, { orientation: 'vertical' }) }), _jsx(MountAnimation, { type: 'fade-slide-up-right', className: styles.right, "data-test-id": TEST_IDS.mainMenu.right, children: _jsx(Scroll, { paddingAbsolute: true, className: styles.scroll, ref: scrollRef, barHideStrategy: 'never', overflow: { x: 'hidden' }, children: _jsx(Content, { onClose: handleCloseDrawer, className: styles.rightContent, searchValue: search?.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, preferences: preferences, loading: loading }) }) })] }))] })] }));
+    const menu = (_jsxs("div", { className: styles.menu, children: [_jsxs("div", { className: styles.menuHeader, children: [_jsx(MenuHeaderBrand, { logo: logo, onClose: handleCloseDrawer, className: styles.menuHeaderBrand }), isNeedRightBlock && search && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), _jsx(Search, { ...search, ref: searchRef })] }))] }), _jsx(Divider, {}), _jsxs("div", { className: styles.menuBody, children: [_jsxs(MountAnimation, { className: styles.left, "data-test-id": TEST_IDS.mainMenu.left, type: 'slide-right', children: [leftTop && _jsx("div", { className: styles.leftTop, children: leftTop }), isNeedRightBlock && favorite && _jsx(Favorites, { favorite: favorite, allServiceGroups: allServiceGroups }), hasBottomItems ? (_jsxs("div", { className: styles.leftBottom, "data-test-id": TEST_IDS.mainMenu.leftBottom, children: [_jsx("div", { className: styles.leftBottomItems, "data-test-id": TEST_IDS.mainMenu.leftBottomItems, children: settingItems?.map(item => (_jsxs(_Fragment, { children: [item.dividerBefore && _jsx(Divider, { orientation: 'horizontal', className: styles.leftBottomDivider }), _createElement(CardServiceLight, { ...(item.href ? { href: item.href, as: 'a' } : { as: 'button', type: 'button' }), key: item.id, title: item.label, icon: getLinkEmblem(item), onClick: item.onClick, "data-test-id": `header__drawer-menu__setting-${item.id}` })] }))) }), leftBottom] })) : null] }), isNeedRightBlock && (_jsxs(_Fragment, { children: [_jsx(MountAnimation, { type: 'fade-in', children: _jsx(Divider, { orientation: 'vertical' }) }), _jsx(MountAnimation, { type: 'fade-slide-up-right', className: styles.right, "data-test-id": TEST_IDS.mainMenu.right, children: _jsx(Scroll, { paddingAbsolute: true, className: styles.scroll, ref: scrollRef, barHideStrategy: 'never', overflow: { x: 'hidden' }, children: _jsx(Content, { onClose: handleCloseDrawer, className: styles.rightContent, searchValue: search?.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, preferences: preferences, loading: loading }) }) })] }))] })] }));
     return (_jsx(DrawerCustom, { open: open, onClose: handleCloseDrawer, width: isNeedRightBlock ? 'm' : 's', position: 'left', className: styles.drawer, rootClassName: styles.drawerRoot, "data-test-id": TEST_IDS.mainMenu.drawer, "data-small": !isNeedRightBlock || undefined, disableMotions: true, showButtonClosed: false, resizable: isNeedRightBlock
             ? {
                 min: MENU_WIDTH_MIN,

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

@@ -43,9 +43,18 @@
   min-height:0;
 }
 
-.settingItems{
-  flex-shrink:0;
-  height:auto;
+.leftBottomItems{
+  width:100%;
+}
+
+.leftBottom{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+
+.leftBottomDivider{
+  margin:var(--sn-primitive-dimension-2, 2px) 0;
 }
 
 .right{
@@ -63,6 +72,7 @@
   display:flex;
   flex-direction:column;
   gap:var(--sn-primitive-dimension-4, 4px);
+  width:100%;
   min-width:0;
   padding:var(--sn-primitive-dimension-16, 16px);
 }

package/dist/esm/components/MainMenu/types.d.ts

@@ -1,4 +1,4 @@
-import { BaseItemProps, ListProps } from '@cloud-ru/ds-list';
+import { BaseItemProps } from '@cloud-ru/ds-list';
 import { SearchProps as SearchPropsSnack } from '@cloud-ru/ds-search';
 import { CardServiceLightProps } from '@cloud-ru/ds-uikit-product-card-predefined';
 import { JSXElementConstructor, MouseEvent, ReactNode } from 'react';
@@ -19,12 +19,7 @@ export type InnerLink = {
      * остаётся только первое по приоритету сегментов (см. {@link MainMenuProps.segments}).
      */
     id: string;
-    /**
-     * Иконка карточки.
-     *
-     * Если не задана, вместо иконки рендерится `Avatar` с двухбуквенным текстом по `label`
-     * (см. `getAvatarNameFromLabel`).
-     */
+    /** Иконка карточки. */
     icon?: JSXElementConstructor<{
         size?: number;
         className?: string;
@@ -53,9 +48,11 @@ export type InnerLink = {
 type TitleStatic = {
     text: string;
     onClick?: never;
+    href?: never;
 };
 type TitleClickable = {
     text: string;
+    href?: string;
     onClick?(e?: MouseEvent<HTMLElement>): void;
 };
 export type LinksGroupTitle = TitleStatic | TitleClickable;
@@ -71,6 +68,10 @@ export type LinksGroup = {
     id: string;
     /** Заголовок группы в сетке карточек и в боковой навигации. */
     label: LinksGroupTitle;
+    icon?: JSXElementConstructor<{
+        size?: number;
+        className?: string;
+    }>;
     /**
      * Синонимы заголовка группы для fuzzy-поиска.
      */
@@ -202,12 +203,16 @@ export type MainMenuPreferencesProps = {
      */
     showGroupsColors?: MainMenuToggleProps;
 };
+export type MainMenuSettingsItem = Pick<InnerLink, 'id' | 'label' | 'icon' | 'onClick' | 'href' | 'hidden'> & {
+    dividerBefore?: boolean;
+};
 export type MainMenuProps = {
     disabled?: boolean;
     open?: boolean;
     setOpen?(open: boolean): void;
     logo?: ReactNode;
     leftTop?: ReactNode;
+    leftBottom?: ReactNode;
     rightTop?: ReactNode;
     /**
      * Сегменты правой панели (сетка карточек) — только каталог.
@@ -245,10 +250,10 @@ export type MainMenuProps = {
     /**
      * Пункты левой колонки (desktop) / нижней части списка (mobile).
      *
-     * Плоский список `List` (`BaseItem` и при необходимости `type: 'group'` с `divider` для разделителей).
+     * Плоский список (`dividerBefore` для разделителей).
      * Не связан с сегментами правой панели и не меняется при сортировке групп в сегментах.
      */
-    settingItems?: ListProps['items'];
+    settingItems?: MainMenuSettingsItem[];
     /**
      * Платформенные группы (например «Облачные продукты», «Другие продукты»).
      *

package/dist/esm/components/MainMenu/utils/getLinkEmblem.d.ts

@@ -1,3 +1,3 @@
 import { CardServiceLightProps } from '@cloud-ru/ds-uikit-product-card-predefined';
 import { InnerLink } from '../types.js';
-export declare function getLinkEmblem(link: InnerLink): CardServiceLightProps['icon'];
+export declare function getLinkEmblem(link: Pick<InnerLink, 'icon'>): CardServiceLightProps['icon'];

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

@@ -1,15 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Avatar } from '@cloud-ru/ds-avatar';
 import { createElement } from 'react';
-import { getAvatarNameFromLabel } from './getAvatarNameFromLabel.js';
-function createAvatarIcon(displayName) {
-    return function LinkAvatarIcon({ className }) {
-        return (_jsx(Avatar, { name: displayName, showTwoSymbols: true, shape: 'squared', appearance: 'neutral', size: 's', className: className }));
-    };
-}
 export function getLinkEmblem(link) {
     if (!link.icon) {
-        return createElement(createAvatarIcon(getAvatarNameFromLabel(link.label)));
+        return undefined;
     }
     return createElement(link.icon);
 }

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

@@ -1,5 +1,4 @@
 export * from './innerLink.js';
-export * from './getAvatarNameFromLabel.js';
 export * from './flatLinksGroups.js';
 export * from './getLinkEmblem.js';
 export * from './mapInnerLinksToListItems.js';

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

@@ -1,5 +1,4 @@
 export * from './innerLink.js';
-export * from './getAvatarNameFromLabel.js';
 export * from './flatLinksGroups.js';
 export * from './getLinkEmblem.js';
 export * from './mapInnerLinksToListItems.js';

package/dist/esm/components/PathBreadcrumbs/styles.module.css

@@ -1,4 +1,7 @@
 .breadcrumbs{
+  display:flex;
+  align-items:center;
   min-width:0;
+  height:100%;
   padding:0 var(--sn-primitive-dimension-8, 8px) !important;
 }

package/dist/esm/constants.d.ts

@@ -10,6 +10,8 @@ export declare const TEST_IDS: {
         readonly search: "header__drawer-menu__search";
         readonly left: "header__drawer-menu__left";
         readonly right: "header__drawer-menu__right";
+        readonly leftBottom: "header__drawer-menu__left-bottom";
+        readonly leftBottomItems: "header__drawer-menu__left-bottom-items";
     };
     readonly userMenu: {
         readonly root: "header__user-menu";

package/dist/esm/constants.js

@@ -10,6 +10,8 @@ export const TEST_IDS = {
         search: 'header__drawer-menu__search',
         left: 'header__drawer-menu__left',
         right: 'header__drawer-menu__right',
+        leftBottom: 'header__drawer-menu__left-bottom',
+        leftBottomItems: 'header__drawer-menu__left-bottom-items',
     },
     userMenu: {
         root: 'header__user-menu',

package/dist/esm/style.css

@@ -157,6 +157,7 @@
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
   justify-content:space-between;
+  width:100%;
   min-width:0;
   min-height:var(--sn-primitive-dimension-32, 32px);
 }
@@ -297,6 +298,7 @@
   overflow-x:clip;
   display:flex;
   flex-direction:column;
+  width:100%;
   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));
@@ -646,9 +648,18 @@
   min-height:0;
 }
 
-.settingItems{
-  flex-shrink:0;
-  height:auto;
+.leftBottomItems{
+  width:100%;
+}
+
+.leftBottom{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-8, 8px);
+}
+
+.leftBottomDivider{
+  margin:var(--sn-primitive-dimension-2, 2px) 0;
 }
 
 .right{
@@ -666,6 +677,7 @@
   display:flex;
   flex-direction:column;
   gap:var(--sn-primitive-dimension-4, 4px);
+  width:100%;
   min-width:0;
   padding:var(--sn-primitive-dimension-16, 16px);
 }
@@ -827,7 +839,10 @@
   min-width:0;
 }
 .breadcrumbs{
+  display:flex;
+  align-items:center;
   min-width:0;
+  height:100%;
   padding:0 var(--sn-primitive-dimension-8, 8px) !important;
 }
 .container{