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

package/dist/cjs/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/cjs/components/HeaderButton/HeaderButton.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderButton = HeaderButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const theme_1 = require("@cloud-ru/ds-theme");
+const tooltip_1 = require("@cloud-ru/ds-tooltip");
+const classnames_1 = __importDefault(require("classnames"));
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/**
+ * HeaderButton — кнопка хедера с тултипом (лого, пользовательское меню и т.п.).
+ * `size`, `appearance`, `view` кнопки и `placement`/`disableSpanWrapper` тултипа зафиксированы,
+ * остальное API `Button` и `Tooltip` передаётся как есть.
+ */
+function HeaderButton({ tooltip, isMobile, className, ...rest }) {
+    const compactThemeClassName = (0, theme_1.useThemeClassnames)({ density: 'compact' });
+    return (
+    // FIXME: typescript ломается, если не указать tip явно
+    //  пока не разбирался почему так
+    (0, jsx_runtime_1.jsx)(tooltip_1.WithTooltip, { tooltip: isMobile
+            ? undefined
+            : {
+                disableSpanWrapper: true,
+                hoverDelayOpen: 300,
+                tip: tooltip?.tip,
+                placement: 'bottom',
+                ...tooltip,
+                triggerClassName: styles_module_scss_1.default.tooltipTrigger,
+            }, children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...rest, size: 'm', appearance: 'neutral', view: 'simple', className: (0, classnames_1.default)(styles_module_scss_1.default.headerButton, compactThemeClassName, className) }) }));
+}

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

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

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

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

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

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

package/dist/cjs/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/cjs/components/HeaderLayout/HeaderLayout.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderLayout = HeaderLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const adaptive_1 = require("@cloud-ru/ds-adaptive");
+const divider_1 = require("@cloud-ru/ds-divider");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function HeaderLayout({ menu, logo, select, breadcrumbs, toolbar, className, ...rest }) {
+    const isMobile = (0, adaptive_1.isMobileLayout)((0, adaptive_1.useAdaptiveLayout)().layoutType);
+    return ((0, jsx_runtime_1.jsxs)("header", { className: (0, classnames_1.default)(styles_module_scss_1.default.header, className), ...(0, utils_1.extractSupportProps)(rest), children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.top, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.left, children: [logo && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: logo }), menu && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), menu] })), !isMobile && select && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), select] })), !isMobile && breadcrumbs && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), breadcrumbs] }))] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.right, children: toolbar })] }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' }), isMobile && Boolean(breadcrumbs) && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottom, children: breadcrumbs })] }));
+}

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

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

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

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

package/dist/cjs/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/cjs/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';
+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/cjs/components/Logo/Logo.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Logo = Logo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const product_1 = require("@cloud-ru/ds-icons/interface/product");
+const logos_1 = require("@cloud-ru/ds-icons/logos");
+const promo_tag_1 = require("@cloud-ru/ds-promo-tag");
+const theme_1 = require("@cloud-ru/ds-theme");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const HeaderButton_1 = require("../HeaderButton");
+const constants_1 = require("./constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function Logo({ path, loading, mode, href, onClick, className, tooltip, ...rest }) {
+    const [error, setError] = (0, react_1.useState)(false);
+    const brancCThemeClassName = (0, theme_1.useThemeClassnames)({ brand: 'brandC' });
+    (0, react_1.useEffect)(() => {
+        setError(false);
+    }, [path, loading]);
+    const logo = (0, react_1.useMemo)(() => {
+        if (path && !error) {
+            return ((0, jsx_runtime_1.jsx)("img", { src: path, alt: 'logo', className: styles_module_scss_1.default.logoImg, onLoad: () => {
+                    setError(false);
+                }, onError: () => {
+                    setError(true);
+                } }));
+        }
+        return ((0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.logoWrap, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.iconStack, children: [(0, jsx_runtime_1.jsx)(logos_1.CloudLogo, { size: 24, className: (0, classnames_1.default)(styles_module_scss_1.default.icon, brancCThemeClassName, styles_module_scss_1.default.iconDefault) }), (0, jsx_runtime_1.jsx)(product_1.HomeFilledSVG, { size: 24, className: (0, classnames_1.default)(styles_module_scss_1.default.icon, brancCThemeClassName, styles_module_scss_1.default.iconHover) })] }), mode && mode !== constants_1.HEADER_LOGO_MODE.prod && ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { as: 'span', label: mode, size: 'xs', appearance: constants_1.MAP_LOGO_MODE_TO_APPEARANCE[mode] }))] }));
+    }, [error, mode, path, brancCThemeClassName]);
+    return ((0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { as: 'a', tooltip: tooltip, className: (0, classnames_1.default)(styles_module_scss_1.default.logo, className), href: href, tabIndex: 0, onClick: onClick, loading: loading, icon: logo, ...(0, utils_1.extractDataTestProps)(rest) }));
+}

package/dist/cjs/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/cjs/components/Logo/constants.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAP_LOGO_MODE_TO_APPEARANCE = exports.HEADER_LOGO_MODE = void 0;
+exports.HEADER_LOGO_MODE = {
+    develop: 'develop',
+    stage: 'stage',
+    hybrid: 'hybrid',
+    prod: 'prod',
+};
+exports.MAP_LOGO_MODE_TO_APPEARANCE = {
+    [exports.HEADER_LOGO_MODE.develop]: 'blue',
+    [exports.HEADER_LOGO_MODE.stage]: 'orange',
+    [exports.HEADER_LOGO_MODE.hybrid]: 'violet',
+};

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

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

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

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

package/dist/cjs/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/cjs/components/MainMenu/MainMenu.d.ts

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MainMenu = MainMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const adaptive_1 = require("@cloud-ru/ds-adaptive");
+const product_1 = require("@cloud-ru/ds-icons/interface/product");
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+const locale_1 = require("../../locale");
+const HeaderButton_1 = require("../HeaderButton");
+const MenuDesktop_1 = require("./helperComponents/MenuDesktop");
+const MenuMobile_1 = require("./helperComponents/MenuMobile");
+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 } = locale_1.headerLocale.useTranslations();
+    const [open = false, setOpen] = (0, utils_1.useValueControl)({ value: openProp, onChange: setOpenProp });
+    (0, react_1.useEffect)(() => {
+        if (!openProp && search?.value)
+            search?.onChange('');
+    }, [openProp, search]);
+    const isMobile = (0, adaptive_1.isMobileLayout)((0, adaptive_1.useAdaptiveLayout)().layoutType);
+    const MenuComponent = isMobile ? MenuMobile_1.MenuMobile : MenuDesktop_1.MenuDesktop;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { tooltip: open ? undefined : { tip: t('services') }, isMobile: isMobile, disabled: disabled, icon: (0, jsx_runtime_1.jsx)(product_1.MainMenuSVG, {}), onClick: () => {
+                    setOpen(true);
+                }, "data-test-id": 'header__drawer-menu-button' }), (0, jsx_runtime_1.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/cjs/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/cjs/components/MainMenu/constants.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ruToEnMap = exports.enToRuMap = exports.SearchGroupsAccessor = exports.FUZZY_SEARCH_THRESHOLD = void 0;
+exports.FUZZY_SEARCH_THRESHOLD = 0.3;
+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 || (exports.SearchGroupsAccessor = SearchGroupsAccessor = {}));
+const enCharacters = "qwertyuiop[]asdfghjkl;'zxcvbnm,./`";
+const ruCharacters = 'йцукенгшщзхъфывапролджэячсмитьбю.ё';
+exports.enToRuMap = {};
+exports.ruToEnMap = {};
+for (let i = 0; i < enCharacters.length; i++) {
+    exports.enToRuMap[enCharacters[i]] = ruCharacters[i];
+    exports.ruToEnMap[ruCharacters[i]] = enCharacters[i];
+}

package/dist/cjs/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/cjs/components/MainMenu/helperComponents/Banners/MenuBanner.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuBanner = MenuBanner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const promo_tag_1 = require("@cloud-ru/ds-promo-tag");
+const theme_1 = require("@cloud-ru/ds-theme");
+const typography_1 = require("@cloud-ru/ds-typography");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const locale_1 = require("../../../../locale");
+const constants_1 = require("./constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function MenuBanner({ title, promoTag, afterTitle, onClose, className, href = '#', target, 'data-test-id': dataTestId, ...rest }) {
+    const { t } = locale_1.headerLocale.useTranslations();
+    const compactThemeClassname = (0, theme_1.useThemeClassnames)({ density: 'compact' });
+    const handleClose = (0, react_1.useCallback)(e => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClose?.(e);
+    }, [onClose]);
+    return ((0, jsx_runtime_1.jsxs)("a", { href: href, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-test-id": dataTestId ?? constants_1.MENU_BANNER_TEST_IDS.root, ...rest, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.titleWrapper, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { as: 'span', variant: 'body', size: 'm', className: styles_module_scss_1.default.title, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.title, children: title }), promoTag && ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { ...promoTag, as: 'span', role: promo_tag_1.ROLE_APPEARANCE.Decor, size: promo_tag_1.SIZE.Xs, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.promoTag }))] }), afterTitle && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.afterTitle, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.afterTitle, children: afterTitle })), onClose && ((0, jsx_runtime_1.jsx)(button_1.Button, { className: (0, classnames_1.default)(styles_module_scss_1.default.closeButton, compactThemeClassname), view: 'elevated', appearance: 'neutral', size: 's', icon: (0, jsx_runtime_1.jsx)(system_1.CrossSVG, { size: 16 }), onClick: handleClose, "aria-label": t('close'), "data-test-id": constants_1.MENU_BANNER_TEST_IDS.close }))] }));
+}

package/dist/cjs/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/cjs/components/MainMenu/helperComponents/Banners/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MENU_BANNER_TEST_IDS = void 0;
+exports.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/cjs/components/MainMenu/helperComponents/Banners/index.d.ts

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

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

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

package/dist/cjs/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/cjs/components/MainMenu/helperComponents/Content/Content.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { FavoriteProps, LinksGroup, MainMenuPreferencesProps, MainMenuSegment, MainMenuSegmentPrefs } from '../../types';
+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;