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

package/dist/cjs/utils/shouldBeOpenedInNewTab.d.ts

@@ -0,0 +1,2 @@
+import { MouseEvent } from 'react';
+export declare function shouldBeOpenedInNewTab(e?: MouseEvent<HTMLElement>): boolean;

package/dist/cjs/utils/shouldBeOpenedInNewTab.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shouldBeOpenedInNewTab = shouldBeOpenedInNewTab;
+function shouldBeOpenedInNewTab(e) {
+    return Boolean(e?.metaKey || e?.ctrlKey);
+}

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

@@ -0,0 +1,14 @@
+import { ButtonProps } from '@cloud-ru/ds-button';
+import { TooltipProps } from '@cloud-ru/ds-tooltip';
+import { ElementType } from 'react';
+export type HeaderButtonProps<T extends ElementType = 'button'> = Omit<ButtonProps<T>, 'size' | 'appearance' | 'view'> & {
+    /** Настройки тултипа. `placement` и `disableSpanWrapper` зафиксированы под анатомию хедера */
+    tooltip?: Omit<TooltipProps, 'placement'>;
+    isMobile?: boolean;
+};
+/**
+ * HeaderButton — кнопка хедера с тултипом (лого, пользовательское меню и т.п.).
+ * `size`, `appearance`, `view` кнопки и `placement`/`disableSpanWrapper` тултипа зафиксированы,
+ * остальное API `Button` и `Tooltip` передаётся как есть.
+ */
+export declare function HeaderButton<T extends ElementType = 'button'>({ tooltip, isMobile, className, ...rest }: HeaderButtonProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/HeaderButton/HeaderButton.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@cloud-ru/ds-button';
+import { useThemeClassnames } from '@cloud-ru/ds-theme';
+import { WithTooltip } from '@cloud-ru/ds-tooltip';
+import cn from 'classnames';
+import styles from './styles.module.css';
+/**
+ * HeaderButton — кнопка хедера с тултипом (лого, пользовательское меню и т.п.).
+ * `size`, `appearance`, `view` кнопки и `placement`/`disableSpanWrapper` тултипа зафиксированы,
+ * остальное API `Button` и `Tooltip` передаётся как есть.
+ */
+export function HeaderButton({ tooltip, isMobile, className, ...rest }) {
+    const compactThemeClassName = useThemeClassnames({ density: 'compact' });
+    return (
+    // FIXME: typescript ломается, если не указать tip явно
+    //  пока не разбирался почему так
+    _jsx(WithTooltip, { tooltip: isMobile
+            ? undefined
+            : {
+                disableSpanWrapper: true,
+                hoverDelayOpen: 300,
+                tip: tooltip?.tip,
+                placement: 'bottom',
+                ...tooltip,
+                triggerClassName: styles.tooltipTrigger,
+            }, children: _jsx(Button, { ...rest, size: 'm', appearance: 'neutral', view: 'simple', className: cn(styles.headerButton, compactThemeClassName, className) }) }));
+}

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

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

package/dist/esm/components/HeaderButton/index.js

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

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

@@ -0,0 +1,3 @@
+.tooltipTrigger{
+  display:inline-flex;
+}

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

@@ -0,0 +1,11 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { ReactNode } from 'react';
+export type HeaderLayoutProps = WithSupportProps<{
+    className?: string;
+    menu?: ReactNode;
+    logo?: ReactNode;
+    select?: ReactNode;
+    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/HeaderLayout/HeaderLayout.js

@@ -0,0 +1,10 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { Divider } from '@cloud-ru/ds-divider';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import styles from './styles.module.css';
+export function HeaderLayout({ menu, logo, select, breadcrumbs, toolbar, className, ...rest }) {
+    const isMobile = isMobileLayout(useAdaptiveLayout().layoutType);
+    return (_jsxs("header", { className: cn(styles.header, className), ...extractSupportProps(rest), children: [_jsxs("div", { className: styles.top, children: [_jsxs("div", { className: styles.left, children: [logo && _jsx(_Fragment, { children: logo }), menu && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), menu] })), !isMobile && select && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), select] })), !isMobile && breadcrumbs && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), breadcrumbs] }))] }), _jsx("div", { className: styles.right, children: toolbar })] }), _jsx(Divider, { orientation: 'horizontal' }), isMobile && Boolean(breadcrumbs) && _jsx("div", { className: styles.bottom, children: breadcrumbs })] }));
+}

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

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

package/dist/esm/components/HeaderLayout/index.js

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

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

@@ -0,0 +1,37 @@
+.header{
+  box-sizing:border-box;
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+}
+
+.top{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  box-sizing:border-box;
+  height:var(--sn-primitive-dimension-40, 40px);
+  padding:0 var(--sn-primitive-dimension-4, 4px);
+}
+
+.bottom{
+  overflow:hidden;
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  height:var(--sn-primitive-dimension-24, 24px);
+  border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+}
+
+.left{
+  display:flex;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  min-width:0;
+  height:100%;
+}
+
+.right{
+  display:flex;
+  gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  height:100%;
+}

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

@@ -0,0 +1,14 @@
+import { TooltipProps } from '@cloud-ru/ds-tooltip';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { MouseEventHandler } from 'react';
+import { HeaderLogoMode } from './constants.js';
+export type LogoProps = WithSupportProps<{
+    loading?: boolean;
+    path?: string;
+    mode?: HeaderLogoMode;
+    href: string;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    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/Logo/Logo.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HomeFilledSVG } from '@cloud-ru/ds-icons/interface/product';
+import { CloudLogo } from '@cloud-ru/ds-icons/logos';
+import { PromoTag } from '@cloud-ru/ds-promo-tag';
+import { useThemeClassnames } from '@cloud-ru/ds-theme';
+import { extractDataTestProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useEffect, useMemo, useState } from 'react';
+import { HeaderButton } from '../HeaderButton/index.js';
+import { HEADER_LOGO_MODE, MAP_LOGO_MODE_TO_APPEARANCE } from './constants.js';
+import styles from './styles.module.css';
+export function Logo({ path, loading, mode, href, onClick, className, tooltip, ...rest }) {
+    const [error, setError] = useState(false);
+    const brancCThemeClassName = useThemeClassnames({ brand: 'brandC' });
+    useEffect(() => {
+        setError(false);
+    }, [path, loading]);
+    const logo = useMemo(() => {
+        if (path && !error) {
+            return (_jsx("img", { src: path, alt: 'logo', className: styles.logoImg, onLoad: () => {
+                    setError(false);
+                }, onError: () => {
+                    setError(true);
+                } }));
+        }
+        return (_jsxs("span", { className: styles.logoWrap, children: [_jsxs("span", { className: styles.iconStack, children: [_jsx(CloudLogo, { size: 24, className: cn(styles.icon, brancCThemeClassName, styles.iconDefault) }), _jsx(HomeFilledSVG, { size: 24, className: cn(styles.icon, brancCThemeClassName, styles.iconHover) })] }), mode && mode !== HEADER_LOGO_MODE.prod && (_jsx(PromoTag, { as: 'span', label: mode, size: 'xs', appearance: MAP_LOGO_MODE_TO_APPEARANCE[mode] }))] }));
+    }, [error, mode, path, brancCThemeClassName]);
+    return (_jsx(HeaderButton, { as: 'a', tooltip: tooltip, className: cn(styles.logo, className), href: href, tabIndex: 0, onClick: onClick, loading: loading, icon: logo, ...extractDataTestProps(rest) }));
+}

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

@@ -0,0 +1,10 @@
+import { PromoTagProps } from '@cloud-ru/ds-promo-tag';
+import { ValueOf } from '@cloud-ru/ds-utils';
+export declare const HEADER_LOGO_MODE: {
+    readonly develop: "develop";
+    readonly stage: "stage";
+    readonly hybrid: "hybrid";
+    readonly prod: "prod";
+};
+export type HeaderLogoMode = ValueOf<typeof HEADER_LOGO_MODE>;
+export declare const MAP_LOGO_MODE_TO_APPEARANCE: Record<Exclude<HeaderLogoMode, 'prod'>, PromoTagProps['appearance']>;

package/dist/esm/components/Logo/constants.js

@@ -0,0 +1,11 @@
+export const HEADER_LOGO_MODE = {
+    develop: 'develop',
+    stage: 'stage',
+    hybrid: 'hybrid',
+    prod: 'prod',
+};
+export const MAP_LOGO_MODE_TO_APPEARANCE = {
+    [HEADER_LOGO_MODE.develop]: 'blue',
+    [HEADER_LOGO_MODE.stage]: 'orange',
+    [HEADER_LOGO_MODE.hybrid]: 'violet',
+};

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

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

package/dist/esm/components/Logo/index.js

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

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

@@ -0,0 +1,53 @@
+.logoImg{
+  width:auto;
+  min-height:var(--sn-primitive-dimension-24, 24px);
+  max-height:var(--sn-primitive-dimension-24, 24px);
+}
+
+.logoWrap{
+  display:flex;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+}
+
+.iconStack{
+  position:relative;
+  display:flex;
+  flex-shrink:0;
+}
+
+.icon{
+  transform-origin:50% center;
+  transform-box:fill-box;
+  color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  transition:opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.iconDefault{
+  opacity:1;
+}
+
+.iconHover{
+  position:absolute;
+  inset:0;
+  opacity:0;
+}
+
+.logo{
+  position:relative;
+  flex-shrink:0;
+}
+.logo:active:not([data-disabled]) .iconDefault{
+  opacity:0;
+}
+.logo:active:not([data-disabled]) .iconHover{
+  opacity:1;
+}
+@media (hover: hover){
+  .logo:hover:not([data-disabled]) .iconDefault{
+    opacity:0;
+  }
+  .logo:hover:not([data-disabled]) .iconHover{
+    opacity:1;
+  }
+}

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

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

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { MainMenuSVG } from '@cloud-ru/ds-icons/interface/product';
+import { useValueControl } from '@cloud-ru/ds-utils';
+import { useEffect } from 'react';
+import { headerLocale } from '../../locale/index.js';
+import { HeaderButton } from '../HeaderButton/index.js';
+import { MenuDesktop } from './helperComponents/MenuDesktop/index.js';
+import { MenuMobile } from './helperComponents/MenuMobile/index.js';
+export function MainMenu({ open: openProp, setOpen: setOpenProp, settingItems, platformGroups, logo, leftTop, rightTop, segments, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, favorite, search, preferences, disabled, defaultWidth, onWidthChangeEnd, draggerTooltip, loading, }) {
+    const { t } = headerLocale.useTranslations();
+    const [open = false, setOpen] = useValueControl({ value: openProp, onChange: setOpenProp });
+    useEffect(() => {
+        if (!openProp && search?.value)
+            search?.onChange('');
+    }, [openProp, search]);
+    const isMobile = isMobileLayout(useAdaptiveLayout().layoutType);
+    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: () => {
+                    setOpen(true);
+                }, "data-test-id": 'header__drawer-menu-button' }), _jsx(MenuComponent, { settingItems: settingItems, segments: segments, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, platformGroups: platformGroups, search: search, logo: logo, leftTop: leftTop, rightTop: rightTop, favorite: favorite, open: open, setOpen: setOpen, preferences: preferences, defaultWidth: defaultWidth, onWidthChangeEnd: onWidthChangeEnd, draggerTooltip: draggerTooltip, loading: loading })] }));
+}

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

@@ -0,0 +1,14 @@
+export declare const FUZZY_SEARCH_THRESHOLD = 0.3;
+export declare enum SearchGroupsAccessor {
+    GroupId = "id",
+    GroupLabelText = "label.text",
+    GroupAliases = "aliases",
+    ItemId = "items.id",
+    ItemLabelText = "items.label",
+    ItemAliases = "items.aliases",
+    ItemNestedId = "items.items.id",
+    ItemNestedLabelText = "items.items.label",
+    ItemNestedAliases = "items.items.aliases"
+}
+export declare const enToRuMap: Record<string, string>;
+export declare const ruToEnMap: Record<string, string>;

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

@@ -0,0 +1,21 @@
+export const FUZZY_SEARCH_THRESHOLD = 0.3;
+export var SearchGroupsAccessor;
+(function (SearchGroupsAccessor) {
+    SearchGroupsAccessor["GroupId"] = "id";
+    SearchGroupsAccessor["GroupLabelText"] = "label.text";
+    SearchGroupsAccessor["GroupAliases"] = "aliases";
+    SearchGroupsAccessor["ItemId"] = "items.id";
+    SearchGroupsAccessor["ItemLabelText"] = "items.label";
+    SearchGroupsAccessor["ItemAliases"] = "items.aliases";
+    SearchGroupsAccessor["ItemNestedId"] = "items.items.id";
+    SearchGroupsAccessor["ItemNestedLabelText"] = "items.items.label";
+    SearchGroupsAccessor["ItemNestedAliases"] = "items.items.aliases";
+})(SearchGroupsAccessor || (SearchGroupsAccessor = {}));
+const enCharacters = "qwertyuiop[]asdfghjkl;'zxcvbnm,./`";
+const ruCharacters = 'йцукенгшщзхъфывапролджэячсмитьбю.ё';
+export const enToRuMap = {};
+export const ruToEnMap = {};
+for (let i = 0; i < enCharacters.length; i++) {
+    enToRuMap[enCharacters[i]] = ruCharacters[i];
+    ruToEnMap[ruCharacters[i]] = enCharacters[i];
+}

package/dist/esm/components/MainMenu/helperComponents/Banners/MenuBanner.d.ts

@@ -0,0 +1,16 @@
+import { PromoTagProps } from '@cloud-ru/ds-promo-tag';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { AnchorHTMLAttributes, MouseEventHandler, ReactElement, ReactNode } from 'react';
+export type MenuBannerProps = WithSupportProps<{
+    /** Заголовок баннера */
+    title: string;
+    /** Текст промо-тега рядом с заголовком */
+    promoTag?: Omit<PromoTagProps, 'data-test-id' | 'size' | 'role' | 'as'>;
+    /** Слот справа от заголовка и промо-тега */
+    afterTitle?: ReactNode;
+    /** Колбэк закрытия. При наличии отображается кнопка «Закрыть» на hover */
+    onClose?: MouseEventHandler<HTMLElement>;
+    /** CSS-класс корневого элемента */
+    className?: string;
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'title' | 'children'>>;
+export declare function MenuBanner({ title, promoTag, afterTitle, onClose, className, href, target, 'data-test-id': dataTestId, ...rest }: MenuBannerProps): ReactElement;

package/dist/esm/components/MainMenu/helperComponents/Banners/MenuBanner.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@cloud-ru/ds-button';
+import { CrossSVG } from '@cloud-ru/ds-icons/interface/system';
+import { PromoTag, ROLE_APPEARANCE, SIZE } from '@cloud-ru/ds-promo-tag';
+import { useThemeClassnames } from '@cloud-ru/ds-theme';
+import { Typography } from '@cloud-ru/ds-typography';
+import cn from 'classnames';
+import { useCallback } from 'react';
+import { headerLocale } from '../../../../locale/index.js';
+import { MENU_BANNER_TEST_IDS } from './constants.js';
+import styles from './styles.module.css';
+export function MenuBanner({ title, promoTag, afterTitle, onClose, className, href = '#', target, 'data-test-id': dataTestId, ...rest }) {
+    const { t } = headerLocale.useTranslations();
+    const compactThemeClassname = useThemeClassnames({ density: 'compact' });
+    const handleClose = useCallback(e => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClose?.(e);
+    }, [onClose]);
+    return (_jsxs("a", { href: href, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: cn(styles.root, className), "data-test-id": dataTestId ?? MENU_BANNER_TEST_IDS.root, ...rest, children: [_jsxs("span", { className: styles.titleWrapper, children: [_jsx(Typography, { as: 'span', variant: 'body', size: 'm', className: styles.title, "data-test-id": MENU_BANNER_TEST_IDS.title, children: title }), promoTag && (_jsx(PromoTag, { ...promoTag, as: 'span', role: ROLE_APPEARANCE.Decor, size: SIZE.Xs, "data-test-id": MENU_BANNER_TEST_IDS.promoTag }))] }), afterTitle && (_jsx("div", { className: styles.afterTitle, "data-test-id": MENU_BANNER_TEST_IDS.afterTitle, children: afterTitle })), onClose && (_jsx(Button, { className: cn(styles.closeButton, compactThemeClassname), view: 'elevated', appearance: 'neutral', size: 's', icon: _jsx(CrossSVG, { size: 16 }), onClick: handleClose, "aria-label": t('close'), "data-test-id": MENU_BANNER_TEST_IDS.close }))] }));
+}

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

@@ -0,0 +1,7 @@
+export declare const MENU_BANNER_TEST_IDS: {
+    readonly root: "header__menu-banner";
+    readonly title: "header__menu-banner__title";
+    readonly promoTag: "header__menu-banner__promo-tag";
+    readonly afterTitle: "header__menu-banner__after-title";
+    readonly close: "header__menu-banner__close";
+};

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

@@ -0,0 +1,7 @@
+export const MENU_BANNER_TEST_IDS = {
+    root: 'header__menu-banner',
+    title: 'header__menu-banner__title',
+    promoTag: 'header__menu-banner__promo-tag',
+    afterTitle: 'header__menu-banner__after-title',
+    close: 'header__menu-banner__close',
+};

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

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

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

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

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

@@ -0,0 +1,61 @@
+.closeButton{
+  position:absolute;
+  top:var(--sn-primitive-dimension-4, 4px);
+  right:var(--sn-primitive-dimension-4, 4px);
+}
+@media (hover: hover){
+  .closeButton{
+    visibility:hidden;
+  }
+}
+
+.root{
+  position:relative;
+  display:flex;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  box-sizing:border-box;
+  width:100%;
+  min-width:0;
+  min-height:var(--sn-primitive-dimension-48, 48px);
+  padding:0 var(--sn-primitive-dimension-12, 12px);
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  font:inherit;
+  color:inherit;
+  text-align:left;
+  text-decoration:none;
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+.root:hover .closeButton, .root:focus-visible .closeButton, .root:focus-within .closeButton{
+  visibility:visible;
+}
+.root: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);
+}
+
+.titleWrapper{
+  display:flex;
+  flex:1 1 auto;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  min-width:0;
+}
+
+.title{
+  overflow:hidden;
+  flex-shrink:1;
+  min-width:0;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.afterTitle{
+  display:flex;
+  flex-shrink:0;
+  flex-wrap:wrap;
+  gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  justify-content:flex-end;
+}

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

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { FavoriteProps, LinksGroup, MainMenuPreferencesProps, MainMenuSegment, MainMenuSegmentPrefs } from '../../types.js';
+export type ContentProps = {
+    segments: MainMenuSegment[];
+    /** Результаты поиска (уже смерженные); в обычном режиме не используются. */
+    searchGroups?: LinksGroup[];
+    segmentPrefs?: MainMenuSegmentPrefs[];
+    /**
+     * Активный сегмент правой панели. Не передано — неуправляемое состояние
+     * (дефолт — первый сегмент с видимыми карточками).
+     */
+    activeSegmentId?: string;
+    /** Колбэк смены активного сегмента правой панели. */
+    onActiveSegmentChange?(segmentId: string): void;
+    onSegmentOrderChange?(segmentId: string, orderedGroupIds: string[]): void;
+    onSegmentExpandedChange?(segmentId: string, expandedGroupIds: string[]): void;
+    favorite?: FavoriteProps;
+    preferences?: MainMenuPreferencesProps;
+    searchValue?: string;
+    search?: ReactNode;
+    /** Слот над тулбаром правой колонки (например, баннеры) */
+    rightTop?: ReactNode;
+    footer?: ReactNode;
+    isMobile?: boolean;
+    onClose?(): void;
+    className?: string;
+    /** Флаг загрузки данных */
+    loading?: boolean;
+};
+export declare function Content({ searchValue, search, rightTop, segments, searchGroups, segmentPrefs, activeSegmentId, onActiveSegmentChange, onSegmentOrderChange, onSegmentExpandedChange, className, footer, favorite, isMobile, onClose, preferences, loading, }: ContentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,94 @@
+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 { SearchSVG } from '@cloud-ru/ds-icons/interface/system';
+import { InfoBlock } from '@cloud-ru/ds-info-block';
+import { useValueControl } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useCallback, useDeferredValue, useEffect, useMemo } from 'react';
+import { headerLocale } from '../../../../locale/index.js';
+import { shouldBeOpenedInNewTab } from '../../../../utils/shouldBeOpenedInNewTab.js';
+import { getLinksGroupVisibleItemsCount, resolveGroupBlockColor } from '../../utils/index.js';
+import { ContentToolbar } from './helperComponents/ContentToolbar/index.js';
+import { SortableGroup, SortableGroupSkeleton } from './helperComponents/SortableGroup/index.js';
+import { useContentSegmentsSortable } from './hooks/useContentSegmentsSortable.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, className, footer, favorite, isMobile, onClose, preferences, loading, }) {
+    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 [segmentId = defaultSegmentId, setSegmentId] = useValueControl({
+        value: activeSegmentId,
+        defaultValue: defaultSegmentId,
+        onChange: onActiveSegmentChange,
+    });
+    const isSearching = Boolean(searchValue);
+    const enableServiceDrag = Boolean(favorite) && !isMobile && !isSearching;
+    useEffect(() => {
+        if (!visibleSegments.some(segment => segment.id === segmentId) && defaultSegmentId) {
+            setSegmentId(defaultSegmentId);
+        }
+    }, [defaultSegmentId, segmentId, setSegmentId, visibleSegments]);
+    const handleLinkClick = useCallback(({ disabled, onClick }, e) => {
+        if (disabled) {
+            e?.preventDefault();
+            return;
+        }
+        if (!shouldBeOpenedInNewTab(e)) {
+            e?.preventDefault();
+            onClose?.();
+        }
+        onClick?.(e);
+    }, [onClose]);
+    const { orderedGroups, expandedIds, onExpandedChange, handleDragEnd: handleSortableDragEnd, } = useContentSegmentsSortable({
+        segments,
+        activeSegmentId: segmentId,
+        isSearching,
+        searchGroups,
+        segmentPrefsById,
+        onSegmentOrderChange,
+        onSegmentExpandedChange,
+        disabled: isSearching,
+        isMobile,
+    });
+    const visibleGroups = useMemo(() => orderedGroups.filter(group => getLinksGroupVisibleItemsCount(group) > 0), [orderedGroups]);
+    useSegmentDnd({
+        visibleGroups,
+        expandedIds,
+        onSortableDragEnd: handleSortableDragEnd,
+        showDescription,
+        showGroupsColors: preferences?.showGroupsColors?.value,
+        favorite,
+    });
+    const allGroupsExpanded = visibleGroups.length > 0 && visibleGroups.every(({ id }) => expandedIds.includes(id));
+    const handleToggleAllGroupsExpanded = useCallback(() => {
+        const visibleIds = visibleGroups.map(({ id }) => id);
+        if (allGroupsExpanded) {
+            onExpandedChange(expandedIds.filter(id => !visibleIds.includes(id)));
+            return;
+        }
+        onExpandedChange([...new Set([...expandedIds, ...visibleIds])]);
+    }, [allGroupsExpanded, expandedIds, onExpandedChange, visibleGroups]);
+    const segmentItems = useMemo(() => visibleSegments.map(segment => ({
+        value: segment.id,
+        label: segment.label,
+        icon: segment.icon,
+    })), [visibleSegments]);
+    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(InfoBlock, { size: 'm', icon: {
+                icon: SearchSVG,
+                appearance: 'neutral',
+            }, content: isSearching ? t('noDataFound') : t('noData'), "data-test-id": isSearching ? 'header__drawer-menu__no-data-found' : 'header__drawer-menu__no-data' }));
+    })();
+    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] })] }));
+}

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

@@ -0,0 +1,9 @@
+export declare const TEST_IDS: {
+    readonly toolbar: "header__drawer-menu__content-toolbar";
+    readonly segmentControl: "header__drawer-menu__content-segment";
+    readonly toggleAllGroups: "header__drawer-menu__content-toggle-all-groups";
+    readonly settingsButton: "header__drawer-menu__content-settings-button";
+    readonly settingsModal: "header__drawer-menu__content-settings-modal";
+    readonly settingsShowGroupsColorsSwitch: "header__drawer-menu__content-settings-show-groups-colors-switch";
+    readonly settingsShowDescriptionSwitch: "header__drawer-menu__content-settings-show-description-switch";
+};

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

@@ -0,0 +1,9 @@
+export const TEST_IDS = {
+    toolbar: 'header__drawer-menu__content-toolbar',
+    segmentControl: 'header__drawer-menu__content-segment',
+    toggleAllGroups: 'header__drawer-menu__content-toggle-all-groups',
+    settingsButton: 'header__drawer-menu__content-settings-button',
+    settingsModal: 'header__drawer-menu__content-settings-modal',
+    settingsShowGroupsColorsSwitch: 'header__drawer-menu__content-settings-show-groups-colors-switch',
+    settingsShowDescriptionSwitch: 'header__drawer-menu__content-settings-show-description-switch',
+};

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

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { MainMenuPreferencesProps } from '../../../../types.js';
+export type ContentToolbarSegmentItem = {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+};
+export type ContentToolbarProps = {
+    segment: string;
+    onSegmentChange(segment: string): void;
+    segmentItems: ContentToolbarSegmentItem[];
+    allGroupsExpanded: boolean;
+    onToggleAllGroupsExpanded(): void;
+    /** Настройки меню (модалка по кнопке). Не передано — кнопка настроек не отображается. */
+    preferences?: MainMenuPreferencesProps;
+    isMobile?: boolean;
+};
+export declare function ContentToolbar({ segment, onSegmentChange, segmentItems, allGroupsExpanded, onToggleAllGroupsExpanded, preferences, isMobile, }: ContentToolbarProps): import("react/jsx-runtime").JSX.Element;