@astral/ui 4.51.0 → 4.52.0

package/components/DashboardContext/DashboardContext.d.ts

@@ -1,10 +1,12 @@
 import { type RefObject } from 'react';
 export type DashboardContextProps = {
     isFocusedMode: boolean;
+    mobileHeaderPriorityFeature: 'profile' | 'menuOrg';
     setAlertElement?: (element: HTMLElement | null) => void;
     alertHeight: number;
     isLoading: boolean;
     hasMenuOrganizationRef: RefObject<boolean | null>;
+    hasProfileRef: RefObject<boolean | null>;
     setFocusedMode: (isFocusedMode: boolean) => void;
 };
 export declare const DashboardContext: import("react").Context<DashboardContextProps>;

package/components/DashboardContext/DashboardContext.js

@@ -1,8 +1,10 @@
 import { createContext, createRef } from 'react';
 export const DashboardContext = createContext({
     isFocusedMode: false,
+    mobileHeaderPriorityFeature: 'menuOrg',
     alertHeight: 0,
     isLoading: false,
     hasMenuOrganizationRef: createRef(),
+    hasProfileRef: createRef(),
     setFocusedMode: () => undefined,
 });

package/components/DashboardContext/DashboardContextProvider/DashboardContextProvider.d.ts

@@ -1,8 +1,8 @@
 import { type ReactNode } from 'react';
 import { type DashboardContextProps } from '../DashboardContext';
-type Props = Pick<DashboardContextProps, 'isFocusedMode'> & {
+type Props = Pick<DashboardContextProps, 'isFocusedMode' | 'mobileHeaderPriorityFeature'> & {
     children: ReactNode;
     isLoading: boolean;
 };
-export declare const DashboardContextProvider: ({ children, isFocusedMode, isLoading, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const DashboardContextProvider: ({ children, isFocusedMode, isLoading, mobileHeaderPriorityFeature, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/components/DashboardContext/DashboardContextProvider/DashboardContextProvider.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { DashboardContext, } from '../DashboardContext';
-export const DashboardContextProvider = ({ children, isFocusedMode, isLoading, }) => {
+export const DashboardContextProvider = ({ children, isFocusedMode, isLoading, mobileHeaderPriorityFeature, }) => {
     const [alertElement, setAlertElement] = useState(null);
     const [alertHeight, setAlertHeight] = useState(0);
     const [isFocusedModeInternal, setFocusedMode] = useState(isFocusedMode);
     const hasMenuOrganizationRef = useRef(false);
+    const hasProfileRef = useRef(false);
     useEffect(() => {
         if (isFocusedMode !== isFocusedModeInternal) {
             setFocusedMode(isFocusedMode);
@@ -27,9 +28,11 @@ export const DashboardContextProvider = ({ children, isFocusedMode, isLoading, }
     }, [alertElement]);
     return (_jsx(DashboardContext.Provider, { value: {
             isFocusedMode: isFocusedModeInternal,
+            mobileHeaderPriorityFeature,
             setAlertElement,
             alertHeight,
             isLoading,
+            hasProfileRef,
             hasMenuOrganizationRef,
             setFocusedMode,
         }, children: children }));

package/components/DashboardLayout/DashboardLayout.d.ts

@@ -4,7 +4,7 @@ import { type DashboardLayoutProps } from './types';
  * Общий Layout приложения
  */
 export declare const DashboardLayout: {
-    ({ children, isFocusedMode, isLoading, }: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, isFocusedMode, isLoading, mobileHeaderPriorityFeature, }: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element;
     Header: import("react").ForwardRefExoticComponent<import("./Header").HeaderProps & import("react").RefAttributes<HTMLDivElement>>;
     Sidebar: import("react").ForwardRefExoticComponent<import("../DashboardSidebar").DashboardSidebarProps & import("react").RefAttributes<HTMLBaseElement>>;
     Main: import("react").ForwardRefExoticComponent<import("./Main").MainProps & import("react").RefAttributes<HTMLDivElement>>;

package/components/DashboardLayout/DashboardLayout.js

@@ -7,8 +7,8 @@ import { Main } from './Main';
 /**
  * Общий Layout приложения
  */
-export const DashboardLayout = ({ children, isFocusedMode = false, isLoading = false, }) => {
-    return (_jsx(DashboardContextProvider, { isFocusedMode: isFocusedMode, isLoading: isLoading, children: _jsx(DashboardWrapper, { children: children }) }));
+export const DashboardLayout = ({ children, isFocusedMode = false, isLoading = false, mobileHeaderPriorityFeature = 'menuOrg', }) => {
+    return (_jsx(DashboardContextProvider, { isFocusedMode: isFocusedMode, isLoading: isLoading, mobileHeaderPriorityFeature: mobileHeaderPriorityFeature, children: _jsx(DashboardWrapper, { children: children }) }));
 };
 DashboardLayout.Header = Header;
 DashboardLayout.Sidebar = DashboardSidebar;

package/components/DashboardLayout/Header/Header.js

@@ -6,15 +6,40 @@ import { QuitOutlineMd } from '../../../icons/QuitOutlineMd';
 import { Button } from '../../Button';
 import { Product } from '../../Product';
 import { Profile } from '../../Profile';
+import { cva } from '../../utils/cva';
 import { getInertProps } from '../../utils/getInertProps';
 import { dashboardLayoutHeaderClassnames } from './constants';
-import { ExitButton, HeaderContent, HeaderContentSection, HeaderRoot, HeaderSection, MenuOrganizationWrapper, MobileSidebarTogglerWrapper, ProductSwitcherWrapper, ProfileWrapper, } from './styles';
+import { ExitButton, HeaderContent, HeaderContentSection, HeaderRoot, HeaderSection, MobileSidebarTogglerWrapper, PriorityFeatureWrapper, ProductSwitcherWrapper, ProfileWrapper, } from './styles';
 import { useLogic } from './useLogic';
+const headerPriorityFeature = cva('', {
+    variants: {
+        feature: {
+            menuOrg: dashboardLayoutHeaderClassnames.priorityFeatureMenuOrg,
+            profile: dashboardLayoutHeaderClassnames.priorityFeatureProfile,
+        },
+        isPinned: {
+            true: dashboardLayoutHeaderClassnames.mobileSidebarPriorityFeatureVisible,
+        },
+        featureInSidebar: {
+            true: dashboardLayoutHeaderClassnames.featureInSidebar,
+        },
+    },
+});
 /**
  * Основной header приложения
  */
 export const Header = forwardRef((props, ref) => {
     const { productSwitcher: ProductSwitcher, product, profile, menuOrganization, children, } = props;
-    const { isShowExitButton, isShowProfile, isFocusedMode, isMobile, collapsedIn, onToggleSidebar, isLoading, alertHeight, menuOrganizationClassnames, } = useLogic(props);
-    return (_jsx(HeaderRoot, { ref: ref, "$isFocusedMode": isFocusedMode, ...getInertProps(!isMobile && isFocusedMode), className: dashboardLayoutHeaderClassnames.root, children: _jsxs(HeaderContent, { children: [_jsx(MobileSidebarTogglerWrapper, { className: dashboardLayoutHeaderClassnames.mobileSidebarButton, children: _jsx(Button, { startIcon: collapsedIn ? _jsx(CrossOutlineMd, {}) : _jsx(MenuOnOutlineMd, {}), variant: "text", onClick: () => onToggleSidebar(), title: "\u041F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0431\u043E\u043A\u043E\u0432\u043E\u0435 \u043C\u0435\u043D\u044E" }) }), _jsxs(HeaderSection, { children: [ProductSwitcher && (_jsx(ProductSwitcherWrapper, { children: _jsx(ProductSwitcher, {}) })), _jsx(Product, { ...product })] }), _jsxs(HeaderContentSection, { children: [children, menuOrganization && (_jsx(MenuOrganizationWrapper, { className: menuOrganizationClassnames, "$alertHeight": alertHeight, children: menuOrganization() })), profile && (_jsx(ProfileWrapper, { "$isShow": isShowProfile, children: _jsx(Profile, { isLoading: isLoading, ...profile }) })), _jsx(ExitButton, { "$isShow": isShowExitButton, onClick: profile?.exitButton?.onClick, title: "\u0412\u044B\u0445\u043E\u0434", variant: "text", children: _jsx(QuitOutlineMd, {}) })] })] }) }));
+    const { isShowExitButton, isShowProfile, isFocusedMode, isMobile, collapsedIn, onToggleSidebar, isLoading, mobileHeaderPriorityFeature, headerStyle, isPinned, } = useLogic(props);
+    return (_jsx(HeaderRoot, { ref: ref, "$isFocusedMode": isFocusedMode, ...getInertProps(!isMobile && isFocusedMode), className: dashboardLayoutHeaderClassnames.root, style: headerStyle, children: _jsxs(HeaderContent, { children: [_jsx(MobileSidebarTogglerWrapper, { className: dashboardLayoutHeaderClassnames.mobileSidebarButton, children: _jsx(Button, { startIcon: collapsedIn ? _jsx(CrossOutlineMd, {}) : _jsx(MenuOnOutlineMd, {}), variant: "text", onClick: () => onToggleSidebar(), title: "\u041F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0431\u043E\u043A\u043E\u0432\u043E\u0435 \u043C\u0435\u043D\u044E" }) }), _jsxs(HeaderSection, { children: [ProductSwitcher && (_jsx(ProductSwitcherWrapper, { children: _jsx(ProductSwitcher, {}) })), _jsx(Product, { ...product })] }), _jsxs(HeaderContentSection, { className: headerPriorityFeature({
+                        feature: mobileHeaderPriorityFeature,
+                    }), children: [children, menuOrganization && (_jsx(PriorityFeatureWrapper, { className: headerPriorityFeature({
+                                feature: mobileHeaderPriorityFeature,
+                                isPinned,
+                                featureInSidebar: mobileHeaderPriorityFeature === 'profile',
+                            }), children: menuOrganization() })), profile && (_jsx(PriorityFeatureWrapper, { className: headerPriorityFeature({
+                                feature: mobileHeaderPriorityFeature,
+                                isPinned,
+                                featureInSidebar: mobileHeaderPriorityFeature === 'menuOrg',
+                            }), children: _jsx(ProfileWrapper, { className: dashboardLayoutHeaderClassnames.profile, "$isShow": isShowProfile, children: _jsx(Profile, { isLoading: isLoading, ...profile }) }) })), _jsx(ExitButton, { "$isShow": isShowExitButton, onClick: profile?.exitButton?.onClick, title: "\u0412\u044B\u0445\u043E\u0434", variant: "text", children: _jsx(QuitOutlineMd, {}) })] })] }) }));
 });

package/components/DashboardLayout/Header/constants.d.ts

@@ -1,5 +1,9 @@
 export declare const dashboardLayoutHeaderClassnames: {
     root: string;
     mobileSidebarButton: string;
-    mobileMenuOrganizationVisible: string;
+    priorityFeatureMenuOrg: string;
+    priorityFeatureProfile: string;
+    mobileSidebarPriorityFeatureVisible: string;
+    featureInSidebar: string;
+    profile: string;
 };

package/components/DashboardLayout/Header/constants.js

@@ -2,5 +2,9 @@ import { createUIKitClassname } from '../../utils/createUIKitClassname';
 export const dashboardLayoutHeaderClassnames = {
     root: createUIKitClassname('dashboard-layout-header'),
     mobileSidebarButton: createUIKitClassname('dashboard-layout-header__sidebar-button_mobile'),
-    mobileMenuOrganizationVisible: createUIKitClassname('dashboard-layout-header__menu-organization_visible'),
+    priorityFeatureMenuOrg: createUIKitClassname('dashboard-layout-header__priority-feature_menu-org'),
+    priorityFeatureProfile: createUIKitClassname('dashboard-layout-header__priority-feature_profile'),
+    mobileSidebarPriorityFeatureVisible: createUIKitClassname('dashboard-layout-header__sidebar-priority-feature_visible'),
+    featureInSidebar: createUIKitClassname('dashboard-layout-header__feature-in-sidebar'),
+    profile: createUIKitClassname('dashboard-layout-header__profile'),
 };

package/components/DashboardLayout/Header/styles.d.ts

@@ -44,9 +44,10 @@ export declare const HeaderContent: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const MenuOrganizationWrapper: import("../../styled").StyledComponent<{
+/**
+ * Обертка для элементов которые должны быть в мобильном хедере или помещены в sidebar.
+ */
+export declare const PriorityFeatureWrapper: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & {
-    $alertHeight?: number | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/DashboardLayout/Header/styles.js

@@ -3,6 +3,7 @@ import { dashboardSidebarClassnames } from '../../DashboardSidebar/constants';
 import { IconButton } from '../../IconButton';
 import { menuOrganizationClassnames } from '../../MenuOrganization/constants';
 import { MOBILE_BUTTON_HEIGHT } from '../../MenuOrganization/OrganizationButton/constants';
+import { profileClassnames } from '../../Profile/constants';
 import { styled } from '../../styled';
 import { dashboardLayoutClassnames, HEADER_HEIGHT_DESKTOP, HEADER_HEIGHT_LAPTOP, HEADER_HEIGHT_MOBILE, } from '../constants';
 import { dashboardLayoutHeaderClassnames } from './constants';
@@ -77,6 +78,15 @@ export const HeaderContentSection = styled(HeaderSection) `
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     gap: ${({ theme }) => theme.spacing(2)};
+
+    &.${dashboardLayoutHeaderClassnames.priorityFeatureMenuOrg} {
+      & .${menuOrganizationClassnames.organizationData} {
+        display: none;
+      }
+      & .${menuOrganizationClassnames.button} {
+        border-radius: ${({ theme }) => theme.shape.medium};
+      }
+    }
   }
 `;
 export const ProductSwitcherWrapper = styled.div `
@@ -111,45 +121,77 @@ export const HeaderContent = styled.div `
     padding: 0;
   }
 `;
-export const MenuOrganizationWrapper = styled.div `
+/**
+ * Обертка для элементов которые должны быть в мобильном хедере или помещены в sidebar.
+ */
+export const PriorityFeatureWrapper = styled.div `
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    position: absolute;
-    z-index: ${({ theme }) => theme.zIndex.appBar - 1};
-    top: ${({ $alertHeight }) => `calc(${$alertHeight}px + ${HEADER_HEIGHT_MOBILE}) `};
-    left: 0;
-    
-    /* Необходимо для анимации компонента вместе с sidebar */
-    transform: translateX(-100vw);
 
-    display: flex;
-    flex-direction: column;
+    &.${dashboardLayoutHeaderClassnames.featureInSidebar} {
+      position: absolute;
+      z-index: ${({ theme }) => theme.zIndex.appBar - 1};
+      top: calc(var(--alert-height, 0px) + ${HEADER_HEIGHT_MOBILE});
+      left: 0;
+      
+      /* Необходимо для анимации компонента вместе с sidebar */
+      transform: translateX(-100vw);
 
-    width: 100vw;
+      display: flex;
+      flex-direction: column;
 
-    background-color: ${({ theme }) => theme.palette.background.default};
+      width: 100vw;
 
-    transition: ${({ theme }) => {
+      background-color: ${({ theme }) => theme.palette.background.default};
+
+      transition: ${({ theme }) => {
     return theme.transitions.create(['transform'], {
         duration: theme.transitions.duration.standard,
     });
 }};
 
-    &.${dashboardLayoutHeaderClassnames.mobileMenuOrganizationVisible} {
-      transform: translateX(0);
-    }
-
-    & .${menuOrganizationClassnames.button} {
-      height: ${MOBILE_BUTTON_HEIGHT};
-      padding: ${({ theme }) => theme.spacing(3, 4)};
+      &.${dashboardLayoutHeaderClassnames.mobileSidebarPriorityFeatureVisible} {
+        transform: translateX(0);
+      }
 
-      border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      & .${menuOrganizationClassnames.button}, & .${profileClassnames.button} {
+        height: ${MOBILE_BUTTON_HEIGHT};
+        padding: ${({ theme }) => theme.spacing(3, 4)};
 
-      &:hover {
         border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+
+        &:hover {
+          border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+        }
+
+        &:active {
+          border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+        }
       }
 
-      &:active {
-        border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      &.${dashboardLayoutHeaderClassnames.priorityFeatureMenuOrg} {
+        & .${dashboardLayoutHeaderClassnames.profile} {
+          display: block;
+        }
+
+
+        & .${profileClassnames.button} {
+          width: 100%;
+          max-width: unset;
+
+          border-radius: 0;
+        }
+
+        & .${profileClassnames.avatar} {
+          display: none;
+        }
+
+        & .${profileClassnames.user} {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          width: 100%;
+        }
       }
     }
   }

package/components/DashboardLayout/Header/useLogic/useLogic.d.ts

@@ -1,12 +1,15 @@
+import { type CSSProperties } from 'react';
 import { type HeaderProps } from '../types';
 export declare const useLogic: ({ profile, menuOrganization }: HeaderProps) => {
     isShowExitButton: boolean;
     isShowProfile: boolean;
     isMobile: boolean;
     isFocusedMode: boolean;
+    mobileHeaderPriorityFeature: "profile" | "menuOrg";
     isLoading: boolean;
     collapsedIn: boolean;
     onToggleSidebar: (newValue?: boolean | undefined) => void;
     alertHeight: number;
-    menuOrganizationClassnames: string;
+    isPinned: boolean;
+    headerStyle: CSSProperties;
 };

package/components/DashboardLayout/Header/useLogic/useLogic.js

@@ -1,31 +1,36 @@
-import { useContext, useEffect, useMemo } from 'react';
+import { useContext, useEffect } from 'react';
 import { DashboardContext } from '../../../DashboardContext';
 import { DashboardSidebarContext } from '../../../DashboardSidebarProvider';
 import { useViewportType } from '../../../useViewportType';
-import { classNames } from '../../../utils/classNames';
-import { dashboardLayoutHeaderClassnames } from '../constants';
 export const useLogic = ({ profile, menuOrganization }) => {
-    const { isFocusedMode, isLoading, hasMenuOrganizationRef, alertHeight } = useContext(DashboardContext);
+    const { isFocusedMode, isLoading, hasMenuOrganizationRef, hasProfileRef, alertHeight, mobileHeaderPriorityFeature, } = useContext(DashboardContext);
     const { collapsedIn, onToggleSidebar, isPinned } = useContext(DashboardSidebarContext);
     useEffect(() => {
         hasMenuOrganizationRef.current = Boolean(menuOrganization);
-    }, [menuOrganization]);
+        hasProfileRef.current = Boolean(profile);
+    }, [menuOrganization, profile]);
     const { isMobile } = useViewportType();
     const hasMenu = Boolean(profile?.menu || profile?.menuList);
-    const isShowProfile = (Boolean(profile) && !isMobile) || (hasMenu && isMobile);
-    const isShowExitButton = isMobile && !hasMenu && Boolean(profile?.exitButton);
-    const menuOrganizationClassnames = useMemo(() => classNames({
-        [dashboardLayoutHeaderClassnames.mobileMenuOrganizationVisible]: isPinned,
-    }), [isPinned]);
+    const isShowProfile = (Boolean(profile) && !isMobile) ||
+        (hasMenu && isMobile && mobileHeaderPriorityFeature === 'profile');
+    const isShowExitButton = isMobile &&
+        !hasMenu &&
+        Boolean(profile?.exitButton) &&
+        mobileHeaderPriorityFeature === 'profile';
+    const headerStyle = {
+        '--alert-height': `${alertHeight}px`,
+    };
     return {
         isShowExitButton,
         isShowProfile,
         isMobile,
         isFocusedMode,
+        mobileHeaderPriorityFeature,
         isLoading,
         collapsedIn,
         onToggleSidebar,
         alertHeight,
-        menuOrganizationClassnames,
+        isPinned,
+        headerStyle,
     };
 };

package/components/DashboardLayout/types.d.ts

@@ -10,4 +10,9 @@ export type DashboardLayoutProps = {
      * Если true, отображается состояние загрузки
      */
     isLoading?: boolean;
+    /**
+     * Элемент, отображаемый в мобильном хедере.
+     * Второстепенный будет помещен в sidebar.
+     */
+    mobileHeaderPriorityFeature?: 'profile' | 'menuOrg';
 };

package/components/DashboardSidebar/DashboardSidebar.js

@@ -3,17 +3,32 @@ import { forwardRef } from 'react';
 import { DashboardSidebarSkeleton } from '../DashboardSidebarSkeleton';
 import { NavMenu } from '../NavMenu';
 import { PinButton } from '../PinButton';
+import { cva } from '../utils/cva';
 import { getInertProps } from '../utils/getInertProps';
+import { dashboardSidebarClassnames } from './constants';
 import { SidebarNav } from './SidebarNav';
 import { Footer, SidebarContent, SidebarHeader, SidebarRoot, StyledPaper, Wrapper, } from './styles';
 import { useLogic } from './useLogic';
+const sidebar = cva('', {
+    variants: {
+        hasProfile: {
+            true: dashboardSidebarClassnames.hasProfile,
+        },
+        hasMenuOrganization: {
+            true: dashboardSidebarClassnames.hasMenuOrganization,
+        },
+    },
+});
 /**
  * Основной sidebar приложения
  */
 export const DashboardSidebar = forwardRef((props, ref) => {
-    const { isPinned, isMobile, collapsedIn, onTogglePin, onMouseEnter, onMouseLeave, alertHeight, classnames, wrapperClassnames, menu, header, isLoading, } = useLogic(props);
+    const { isPinned, isMobile, collapsedIn, onTogglePin, onMouseEnter, onMouseLeave, alertHeight, classnames, menu, header, isLoading, hasMenuOrganization, hasProfile, } = useLogic(props);
     if (isLoading) {
         return _jsx(DashboardSidebarSkeleton, {});
     }
-    return (_jsx(Wrapper, { "$isPinned": isPinned, "$alertHeight": alertHeight, className: wrapperClassnames, children: _jsx(SidebarRoot, { ref: ref, "$isPinned": isPinned, "$collapsedIn": collapsedIn, className: classnames, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ...getInertProps(isMobile && !isPinned), children: _jsxs(StyledPaper, { variant: "outlined", children: [_jsxs(SidebarContent, { "$collapsedIn": collapsedIn, "$isPinned": isPinned, "$hasHeader": Boolean(header), children: [header && _jsx(SidebarHeader, { children: header }), _jsx(SidebarNav, { menu: _jsx(NavMenu, { collapsedIn: collapsedIn, items: menu.items }) })] }), _jsx(Footer, { children: _jsx(PinButton, { isPinned: isPinned, collapsedIn: collapsedIn, onClick: onTogglePin }) })] }) }) }));
+    return (_jsx(Wrapper, { "$isPinned": isPinned, "$alertHeight": alertHeight, className: sidebar({
+            hasProfile,
+            hasMenuOrganization,
+        }), children: _jsx(SidebarRoot, { ref: ref, "$isPinned": isPinned, "$collapsedIn": collapsedIn, className: classnames, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ...getInertProps(isMobile && !isPinned), children: _jsxs(StyledPaper, { variant: "outlined", children: [_jsxs(SidebarContent, { "$collapsedIn": collapsedIn, "$isPinned": isPinned, "$hasHeader": Boolean(header), children: [header && _jsx(SidebarHeader, { children: header }), _jsx(SidebarNav, { menu: _jsx(NavMenu, { collapsedIn: collapsedIn, items: menu.items }) })] }), _jsx(Footer, { children: _jsx(PinButton, { isPinned: isPinned, collapsedIn: collapsedIn, onClick: onTogglePin }) })] }) }) }));
 });

package/components/DashboardSidebar/constants.d.ts

@@ -1,5 +1,6 @@
 export declare const dashboardSidebarClassnames: {
     root: string;
+    hasProfile: string;
     hasMenuOrganization: string;
 };
 export declare const LABEL_WIDTH: {

package/components/DashboardSidebar/constants.js

@@ -1,6 +1,7 @@
 import { createUIKitClassname } from '../utils/createUIKitClassname';
 export const dashboardSidebarClassnames = {
     root: createUIKitClassname('dashboard-layout-sidebar'),
+    hasProfile: createUIKitClassname('dashboard-layout-sidebar_has-profile'),
     hasMenuOrganization: createUIKitClassname('dashboard-layout-sidebar_has-menu-organization'),
 };
 export const LABEL_WIDTH = {

package/components/DashboardSidebar/styles.js

@@ -35,7 +35,7 @@ export const Wrapper = styled('div', {
     });
 }};
 
-    &.${dashboardSidebarClassnames.hasMenuOrganization} {
+    &.${dashboardSidebarClassnames.hasMenuOrganization}, &.${dashboardSidebarClassnames.hasProfile} {
       top: ${({ $alertHeight }) => `calc(${$alertHeight}px + ${HEADER_HEIGHT_MOBILE} + ${MOBILE_BUTTON_HEIGHT}) `};
     }
   }

package/components/DashboardSidebar/useLogic/useLogic.d.ts

@@ -28,5 +28,6 @@ export declare const useLogic: (props: DashboardSidebarProps) => {
     header: import("react").ReactNode;
     isLoading: boolean;
     classnames: string;
-    wrapperClassnames: string;
+    hasMenuOrganization: boolean | null;
+    hasProfile: boolean | null;
 };

package/components/DashboardSidebar/useLogic/useLogic.js

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useMemo, useRef } from 'react';
+import { useContext, useEffect, useRef } from 'react';
 import { DashboardContext } from '../../DashboardContext';
 import { dashboardLayoutHeaderClassnames } from '../../DashboardLayout/Header';
 import { dashboardLayoutMainClassnames } from '../../DashboardLayout/Main';
@@ -10,7 +10,7 @@ import { dashboardSidebarClassnames } from '../constants';
 export const useLogic = (props) => {
     const { className, menu, header, isLoading } = props;
     const { onToggleSidebar, isPinned, onTogglePin, collapsedIn, setIsPopupOpen, } = useContext(DashboardSidebarContext);
-    const { alertHeight, isLoading: isDashboardLoading, hasMenuOrganizationRef, } = useContext(DashboardContext);
+    const { alertHeight, isLoading: isDashboardLoading, hasMenuOrganizationRef, hasProfileRef, mobileHeaderPriorityFeature, } = useContext(DashboardContext);
     const { isMobile } = useViewportType();
     const hoverTimerRef = useRef(null);
     const theme = useTheme();
@@ -80,9 +80,6 @@ export const useLogic = (props) => {
             }
         };
     }, [collapsedIn, isPinned]);
-    const wrapperClassnames = useMemo(() => classNames({
-        [dashboardSidebarClassnames.hasMenuOrganization]: hasMenuOrganizationRef.current,
-    }), [hasMenuOrganizationRef.current]);
     const classnames = classNames(className, dashboardSidebarClassnames.root);
     return {
         isPinned,
@@ -96,6 +93,8 @@ export const useLogic = (props) => {
         header,
         isLoading: isLoading || isDashboardLoading,
         classnames,
-        wrapperClassnames,
+        hasMenuOrganization: hasMenuOrganizationRef.current &&
+            mobileHeaderPriorityFeature === 'profile',
+        hasProfile: hasProfileRef.current && mobileHeaderPriorityFeature === 'menuOrg',
     };
 };

package/components/MenuOrganization/OrganizationButton/OrganizationButton.js

@@ -13,7 +13,7 @@ export const OrganizationButton = forwardRef(({ onClick, isOpen, currentOrganiza
     });
     const renderButton = () => (_jsx(StyledButton, { ref: ref, variant: "text", disabled: isDisabled, onClick: onClick, className: menuOrganizationClassnames.button, endIcon: _jsx(StyledChevron, { isActive: isOpen, width: 24, height: 24 }), children: renderPreview ? (renderPreview(currentOrganization, {
             className: hidePersonalDataClassname,
-        })) : (_jsxs(Container, { className: hidePersonalDataClassname, children: [_jsx(OverflowTypography, { variant: "h6", component: "div", children: name }), _jsxs(OrganizationData, { children: [_jsxs(StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u0418\u041D\u041D ", inn] }), kpp && (_jsxs(StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u041A\u041F\u041F ", kpp] }))] })] })) }));
+        })) : (_jsxs(Container, { className: hidePersonalDataClassname, children: [_jsx(OverflowTypography, { variant: "h6", component: "div", children: name }), _jsxs(OrganizationData, { className: menuOrganizationClassnames.organizationData, children: [_jsxs(StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u0418\u041D\u041D ", inn] }), kpp && (_jsxs(StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u041A\u041F\u041F ", kpp] }))] })] })) }));
     if (isDisabled && disabledReason) {
         return (_jsx(Tooltip, { title: disabledReason, withoutContainer: false, placement: "bottom", children: renderButton() }));
     }

package/components/MenuOrganization/constants.d.ts

@@ -5,4 +5,5 @@ export declare const menuOrganizationClassnames: {
     root: string;
     errorPlaceholder: string;
     button: string;
+    organizationData: string;
 };

package/components/MenuOrganization/constants.js

@@ -6,4 +6,5 @@ export const menuOrganizationClassnames = {
     root: createUIKitClassname('menu-organization'),
     errorPlaceholder: createUIKitClassname('menu-organization__error-placeholder'),
     button: createUIKitClassname('menu-organization__button'),
+    organizationData: createUIKitClassname('menu-organization__organization-data'),
 };

package/components/Profile/Profile.js

@@ -23,7 +23,7 @@ export const Profile = (props) => {
     if (isLoading) {
         return _jsx(ProfileSkeleton, {});
     }
-    return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, { onClickAway: handleCloseMenu, children: _jsxs(ProfileRoot, { ref: anchorRef, variant: "text", onClick: handleOpenMenu, children: [_jsx(StyledAvatar, { ...avatar }), _jsxs(User, { children: [_jsxs(Credentials, { className: hidePersonalDataClassname, children: [_jsx(Typography, { variant: "body1", className: profileClassnames.credentials, children: displayName }), _jsx(Typography, { variant: "caption", color: "textSecondary", className: profileClassnames.credentials, children: annotation })] }), _jsx(StyledChevron, { isActive: open })] })] }) }), Menu ? (_jsx(Menu, { open: open, anchorEl: anchorRef.current, onClose: handleCloseMenu, anchorOrigin: {
+    return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, { onClickAway: handleCloseMenu, children: _jsxs(ProfileRoot, { ref: anchorRef, variant: "text", onClick: handleOpenMenu, className: profileClassnames.button, children: [_jsx(StyledAvatar, { ...avatar, className: profileClassnames.avatar }), _jsxs(User, { className: profileClassnames.user, children: [_jsxs(Credentials, { className: hidePersonalDataClassname, children: [_jsx(Typography, { variant: "body1", className: profileClassnames.credentials, children: displayName }), _jsx(Typography, { variant: "caption", color: "textSecondary", className: profileClassnames.credentials, children: annotation })] }), _jsx(StyledChevron, { isActive: open })] })] }) }), Menu ? (_jsx(Menu, { open: open, anchorEl: anchorRef.current, onClose: handleCloseMenu, anchorOrigin: {
                     vertical: 'bottom',
                     horizontal: 'right',
                 }, transformOrigin: {

package/components/Profile/constants.d.ts

@@ -1,3 +1,6 @@
 export declare const profileClassnames: {
     credentials: string;
+    button: string;
+    avatar: string;
+    user: string;
 };

package/components/Profile/constants.js

@@ -1,4 +1,7 @@
 import { createUIKitClassname } from '../utils/createUIKitClassname';
 export const profileClassnames = {
     credentials: createUIKitClassname('profile__credentials'),
+    button: createUIKitClassname('profile__button'),
+    avatar: createUIKitClassname('profile__avatar'),
+    user: createUIKitClassname('profile__user'),
 };

package/node/components/DashboardContext/DashboardContext.d.ts

@@ -1,10 +1,12 @@
 import { type RefObject } from 'react';
 export type DashboardContextProps = {
     isFocusedMode: boolean;
+    mobileHeaderPriorityFeature: 'profile' | 'menuOrg';
     setAlertElement?: (element: HTMLElement | null) => void;
     alertHeight: number;
     isLoading: boolean;
     hasMenuOrganizationRef: RefObject<boolean | null>;
+    hasProfileRef: RefObject<boolean | null>;
     setFocusedMode: (isFocusedMode: boolean) => void;
 };
 export declare const DashboardContext: import("react").Context<DashboardContextProps>;

package/node/components/DashboardContext/DashboardContext.js

@@ -4,8 +4,10 @@ exports.DashboardContext = void 0;
 const react_1 = require("react");
 exports.DashboardContext = (0, react_1.createContext)({
     isFocusedMode: false,
+    mobileHeaderPriorityFeature: 'menuOrg',
     alertHeight: 0,
     isLoading: false,
     hasMenuOrganizationRef: (0, react_1.createRef)(),
+    hasProfileRef: (0, react_1.createRef)(),
     setFocusedMode: () => undefined,
 });

package/node/components/DashboardContext/DashboardContextProvider/DashboardContextProvider.d.ts

@@ -1,8 +1,8 @@
 import { type ReactNode } from 'react';
 import { type DashboardContextProps } from '../DashboardContext';
-type Props = Pick<DashboardContextProps, 'isFocusedMode'> & {
+type Props = Pick<DashboardContextProps, 'isFocusedMode' | 'mobileHeaderPriorityFeature'> & {
     children: ReactNode;
     isLoading: boolean;
 };
-export declare const DashboardContextProvider: ({ children, isFocusedMode, isLoading, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const DashboardContextProvider: ({ children, isFocusedMode, isLoading, mobileHeaderPriorityFeature, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/node/components/DashboardContext/DashboardContextProvider/DashboardContextProvider.js

@@ -4,11 +4,12 @@ exports.DashboardContextProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const DashboardContext_1 = require("../DashboardContext");
-const DashboardContextProvider = ({ children, isFocusedMode, isLoading, }) => {
+const DashboardContextProvider = ({ children, isFocusedMode, isLoading, mobileHeaderPriorityFeature, }) => {
     const [alertElement, setAlertElement] = (0, react_1.useState)(null);
     const [alertHeight, setAlertHeight] = (0, react_1.useState)(0);
     const [isFocusedModeInternal, setFocusedMode] = (0, react_1.useState)(isFocusedMode);
     const hasMenuOrganizationRef = (0, react_1.useRef)(false);
+    const hasProfileRef = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
         if (isFocusedMode !== isFocusedModeInternal) {
             setFocusedMode(isFocusedMode);
@@ -30,9 +31,11 @@ const DashboardContextProvider = ({ children, isFocusedMode, isLoading, }) => {
     }, [alertElement]);
     return ((0, jsx_runtime_1.jsx)(DashboardContext_1.DashboardContext.Provider, { value: {
             isFocusedMode: isFocusedModeInternal,
+            mobileHeaderPriorityFeature,
             setAlertElement,
             alertHeight,
             isLoading,
+            hasProfileRef,
             hasMenuOrganizationRef,
             setFocusedMode,
         }, children: children }));

package/node/components/DashboardLayout/DashboardLayout.d.ts

@@ -4,7 +4,7 @@ import { type DashboardLayoutProps } from './types';
  * Общий Layout приложения
  */
 export declare const DashboardLayout: {
-    ({ children, isFocusedMode, isLoading, }: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, isFocusedMode, isLoading, mobileHeaderPriorityFeature, }: DashboardLayoutProps): import("react/jsx-runtime").JSX.Element;
     Header: import("react").ForwardRefExoticComponent<import("./Header").HeaderProps & import("react").RefAttributes<HTMLDivElement>>;
     Sidebar: import("react").ForwardRefExoticComponent<import("../DashboardSidebar").DashboardSidebarProps & import("react").RefAttributes<HTMLBaseElement>>;
     Main: import("react").ForwardRefExoticComponent<import("./Main").MainProps & import("react").RefAttributes<HTMLDivElement>>;

package/node/components/DashboardLayout/DashboardLayout.js

@@ -10,8 +10,8 @@ const Main_1 = require("./Main");
 /**
  * Общий Layout приложения
  */
-const DashboardLayout = ({ children, isFocusedMode = false, isLoading = false, }) => {
-    return ((0, jsx_runtime_1.jsx)(DashboardContext_1.DashboardContextProvider, { isFocusedMode: isFocusedMode, isLoading: isLoading, children: (0, jsx_runtime_1.jsx)(DashboardWrapper_1.DashboardWrapper, { children: children }) }));
+const DashboardLayout = ({ children, isFocusedMode = false, isLoading = false, mobileHeaderPriorityFeature = 'menuOrg', }) => {
+    return ((0, jsx_runtime_1.jsx)(DashboardContext_1.DashboardContextProvider, { isFocusedMode: isFocusedMode, isLoading: isLoading, mobileHeaderPriorityFeature: mobileHeaderPriorityFeature, children: (0, jsx_runtime_1.jsx)(DashboardWrapper_1.DashboardWrapper, { children: children }) }));
 };
 exports.DashboardLayout = DashboardLayout;
 exports.DashboardLayout.Header = Header_1.Header;

package/node/components/DashboardLayout/Header/Header.js

@@ -9,15 +9,40 @@ const QuitOutlineMd_1 = require("../../../icons/QuitOutlineMd");
 const Button_1 = require("../../Button");
 const Product_1 = require("../../Product");
 const Profile_1 = require("../../Profile");
+const cva_1 = require("../../utils/cva");
 const getInertProps_1 = require("../../utils/getInertProps");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
+const headerPriorityFeature = (0, cva_1.cva)('', {
+    variants: {
+        feature: {
+            menuOrg: constants_1.dashboardLayoutHeaderClassnames.priorityFeatureMenuOrg,
+            profile: constants_1.dashboardLayoutHeaderClassnames.priorityFeatureProfile,
+        },
+        isPinned: {
+            true: constants_1.dashboardLayoutHeaderClassnames.mobileSidebarPriorityFeatureVisible,
+        },
+        featureInSidebar: {
+            true: constants_1.dashboardLayoutHeaderClassnames.featureInSidebar,
+        },
+    },
+});
 /**
  * Основной header приложения
  */
 exports.Header = (0, react_1.forwardRef)((props, ref) => {
     const { productSwitcher: ProductSwitcher, product, profile, menuOrganization, children, } = props;
-    const { isShowExitButton, isShowProfile, isFocusedMode, isMobile, collapsedIn, onToggleSidebar, isLoading, alertHeight, menuOrganizationClassnames, } = (0, useLogic_1.useLogic)(props);
-    return ((0, jsx_runtime_1.jsx)(styles_1.HeaderRoot, { ref: ref, "$isFocusedMode": isFocusedMode, ...(0, getInertProps_1.getInertProps)(!isMobile && isFocusedMode), className: constants_1.dashboardLayoutHeaderClassnames.root, children: (0, jsx_runtime_1.jsxs)(styles_1.HeaderContent, { children: [(0, jsx_runtime_1.jsx)(styles_1.MobileSidebarTogglerWrapper, { className: constants_1.dashboardLayoutHeaderClassnames.mobileSidebarButton, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { startIcon: collapsedIn ? (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) : (0, jsx_runtime_1.jsx)(MenuOnOutlineMd_1.MenuOnOutlineMd, {}), variant: "text", onClick: () => onToggleSidebar(), title: "\u041F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0431\u043E\u043A\u043E\u0432\u043E\u0435 \u043C\u0435\u043D\u044E" }) }), (0, jsx_runtime_1.jsxs)(styles_1.HeaderSection, { children: [ProductSwitcher && ((0, jsx_runtime_1.jsx)(styles_1.ProductSwitcherWrapper, { children: (0, jsx_runtime_1.jsx)(ProductSwitcher, {}) })), (0, jsx_runtime_1.jsx)(Product_1.Product, { ...product })] }), (0, jsx_runtime_1.jsxs)(styles_1.HeaderContentSection, { children: [children, menuOrganization && ((0, jsx_runtime_1.jsx)(styles_1.MenuOrganizationWrapper, { className: menuOrganizationClassnames, "$alertHeight": alertHeight, children: menuOrganization() })), profile && ((0, jsx_runtime_1.jsx)(styles_1.ProfileWrapper, { "$isShow": isShowProfile, children: (0, jsx_runtime_1.jsx)(Profile_1.Profile, { isLoading: isLoading, ...profile }) })), (0, jsx_runtime_1.jsx)(styles_1.ExitButton, { "$isShow": isShowExitButton, onClick: profile?.exitButton?.onClick, title: "\u0412\u044B\u0445\u043E\u0434", variant: "text", children: (0, jsx_runtime_1.jsx)(QuitOutlineMd_1.QuitOutlineMd, {}) })] })] }) }));
+    const { isShowExitButton, isShowProfile, isFocusedMode, isMobile, collapsedIn, onToggleSidebar, isLoading, mobileHeaderPriorityFeature, headerStyle, isPinned, } = (0, useLogic_1.useLogic)(props);
+    return ((0, jsx_runtime_1.jsx)(styles_1.HeaderRoot, { ref: ref, "$isFocusedMode": isFocusedMode, ...(0, getInertProps_1.getInertProps)(!isMobile && isFocusedMode), className: constants_1.dashboardLayoutHeaderClassnames.root, style: headerStyle, children: (0, jsx_runtime_1.jsxs)(styles_1.HeaderContent, { children: [(0, jsx_runtime_1.jsx)(styles_1.MobileSidebarTogglerWrapper, { className: constants_1.dashboardLayoutHeaderClassnames.mobileSidebarButton, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { startIcon: collapsedIn ? (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) : (0, jsx_runtime_1.jsx)(MenuOnOutlineMd_1.MenuOnOutlineMd, {}), variant: "text", onClick: () => onToggleSidebar(), title: "\u041F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0431\u043E\u043A\u043E\u0432\u043E\u0435 \u043C\u0435\u043D\u044E" }) }), (0, jsx_runtime_1.jsxs)(styles_1.HeaderSection, { children: [ProductSwitcher && ((0, jsx_runtime_1.jsx)(styles_1.ProductSwitcherWrapper, { children: (0, jsx_runtime_1.jsx)(ProductSwitcher, {}) })), (0, jsx_runtime_1.jsx)(Product_1.Product, { ...product })] }), (0, jsx_runtime_1.jsxs)(styles_1.HeaderContentSection, { className: headerPriorityFeature({
+                        feature: mobileHeaderPriorityFeature,
+                    }), children: [children, menuOrganization && ((0, jsx_runtime_1.jsx)(styles_1.PriorityFeatureWrapper, { className: headerPriorityFeature({
+                                feature: mobileHeaderPriorityFeature,
+                                isPinned,
+                                featureInSidebar: mobileHeaderPriorityFeature === 'profile',
+                            }), children: menuOrganization() })), profile && ((0, jsx_runtime_1.jsx)(styles_1.PriorityFeatureWrapper, { className: headerPriorityFeature({
+                                feature: mobileHeaderPriorityFeature,
+                                isPinned,
+                                featureInSidebar: mobileHeaderPriorityFeature === 'menuOrg',
+                            }), children: (0, jsx_runtime_1.jsx)(styles_1.ProfileWrapper, { className: constants_1.dashboardLayoutHeaderClassnames.profile, "$isShow": isShowProfile, children: (0, jsx_runtime_1.jsx)(Profile_1.Profile, { isLoading: isLoading, ...profile }) }) })), (0, jsx_runtime_1.jsx)(styles_1.ExitButton, { "$isShow": isShowExitButton, onClick: profile?.exitButton?.onClick, title: "\u0412\u044B\u0445\u043E\u0434", variant: "text", children: (0, jsx_runtime_1.jsx)(QuitOutlineMd_1.QuitOutlineMd, {}) })] })] }) }));
 });

package/node/components/DashboardLayout/Header/constants.d.ts

@@ -1,5 +1,9 @@
 export declare const dashboardLayoutHeaderClassnames: {
     root: string;
     mobileSidebarButton: string;
-    mobileMenuOrganizationVisible: string;
+    priorityFeatureMenuOrg: string;
+    priorityFeatureProfile: string;
+    mobileSidebarPriorityFeatureVisible: string;
+    featureInSidebar: string;
+    profile: string;
 };

package/node/components/DashboardLayout/Header/constants.js

@@ -5,5 +5,9 @@ const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
 exports.dashboardLayoutHeaderClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout-header'),
     mobileSidebarButton: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout-header__sidebar-button_mobile'),
-    mobileMenuOrganizationVisible: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout-header__menu-organization_visible'),
+    priorityFeatureMenuOrg: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout-header__priority-feature_menu-org'),
+    priorityFeatureProfile: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout-header__priority-feature_profile'),
+    mobileSidebarPriorityFeatureVisible: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout-header__sidebar-priority-feature_visible'),
+    featureInSidebar: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout-header__feature-in-sidebar'),
+    profile: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout-header__profile'),
 };

package/node/components/DashboardLayout/Header/styles.d.ts

@@ -44,9 +44,10 @@ export declare const HeaderContent: import("@emotion/styled/dist/declarations/sr
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const MenuOrganizationWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+/**
+ * Обертка для элементов которые должны быть в мобильном хедере или помещены в sidebar.
+ */
+export declare const PriorityFeatureWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & {
-    $alertHeight?: number | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/DashboardLayout/Header/styles.js

@@ -1,14 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuOrganizationWrapper = exports.HeaderContent = exports.ExitButton = exports.ProfileWrapper = exports.ProductSwitcherWrapper = exports.HeaderContentSection = exports.HeaderSection = exports.MobileSidebarTogglerWrapper = exports.HeaderRoot = void 0;
+exports.PriorityFeatureWrapper = exports.HeaderContent = exports.ExitButton = exports.ProfileWrapper = exports.ProductSwitcherWrapper = exports.HeaderContentSection = exports.HeaderSection = exports.MobileSidebarTogglerWrapper = exports.HeaderRoot = void 0;
 const Button_1 = require("@mui/material/Button");
 const constants_1 = require("../../DashboardSidebar/constants");
 const IconButton_1 = require("../../IconButton");
 const constants_2 = require("../../MenuOrganization/constants");
 const constants_3 = require("../../MenuOrganization/OrganizationButton/constants");
+const constants_4 = require("../../Profile/constants");
 const styled_1 = require("../../styled");
-const constants_4 = require("../constants");
-const constants_5 = require("./constants");
+const constants_5 = require("../constants");
+const constants_6 = require("./constants");
 exports.HeaderRoot = (0, styled_1.styled)('header', {
     shouldForwardProp: (prop) => !['$isFocusedMode'].includes(prop),
 }) `
@@ -21,8 +22,8 @@ exports.HeaderRoot = (0, styled_1.styled)('header', {
   justify-content: space-between;
 
   width: 100%;
-  height: ${constants_4.HEADER_HEIGHT_DESKTOP};
-  margin-top: ${({ $isFocusedMode }) => $isFocusedMode ? `-${constants_4.HEADER_HEIGHT_DESKTOP}` : 0};
+  height: ${constants_5.HEADER_HEIGHT_DESKTOP};
+  margin-top: ${({ $isFocusedMode }) => $isFocusedMode ? `-${constants_5.HEADER_HEIGHT_DESKTOP}` : 0};
   margin-bottom: ${({ theme }) => theme.spacing(4)};
 
   transition: ${({ theme }) => {
@@ -32,14 +33,14 @@ exports.HeaderRoot = (0, styled_1.styled)('header', {
 }};
 
   ${({ theme }) => theme.breakpoints.down('laptop')} {
-    height: ${constants_4.HEADER_HEIGHT_LAPTOP};
+    height: ${constants_5.HEADER_HEIGHT_LAPTOP};
   }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     grid-row: 2;
     justify-content: flex-start;
 
-    height: ${constants_4.HEADER_HEIGHT_MOBILE};
+    height: ${constants_5.HEADER_HEIGHT_MOBILE};
     margin-bottom: 0;
     padding: ${({ theme }) => theme.spacing(0, 2, 0, 1)};
 
@@ -60,7 +61,7 @@ exports.MobileSidebarTogglerWrapper = styled_1.styled.div `
   
   /* Причина игнора: Не критично для отображения */
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-  .${constants_4.dashboardLayoutClassnames.root}:not(:has(.${constants_1.dashboardSidebarClassnames.root}))
+  .${constants_5.dashboardLayoutClassnames.root}:not(:has(.${constants_1.dashboardSidebarClassnames.root}))
     & {
     display: none;
   }
@@ -80,6 +81,15 @@ exports.HeaderContentSection = (0, styled_1.styled)(exports.HeaderSection) `
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     gap: ${({ theme }) => theme.spacing(2)};
+
+    &.${constants_6.dashboardLayoutHeaderClassnames.priorityFeatureMenuOrg} {
+      & .${constants_2.menuOrganizationClassnames.organizationData} {
+        display: none;
+      }
+      & .${constants_2.menuOrganizationClassnames.button} {
+        border-radius: ${({ theme }) => theme.shape.medium};
+      }
+    }
   }
 `;
 exports.ProductSwitcherWrapper = styled_1.styled.div `
@@ -114,45 +124,77 @@ exports.HeaderContent = styled_1.styled.div `
     padding: 0;
   }
 `;
-exports.MenuOrganizationWrapper = styled_1.styled.div `
+/**
+ * Обертка для элементов которые должны быть в мобильном хедере или помещены в sidebar.
+ */
+exports.PriorityFeatureWrapper = styled_1.styled.div `
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    position: absolute;
-    z-index: ${({ theme }) => theme.zIndex.appBar - 1};
-    top: ${({ $alertHeight }) => `calc(${$alertHeight}px + ${constants_4.HEADER_HEIGHT_MOBILE}) `};
-    left: 0;
-    
-    /* Необходимо для анимации компонента вместе с sidebar */
-    transform: translateX(-100vw);
 
-    display: flex;
-    flex-direction: column;
+    &.${constants_6.dashboardLayoutHeaderClassnames.featureInSidebar} {
+      position: absolute;
+      z-index: ${({ theme }) => theme.zIndex.appBar - 1};
+      top: calc(var(--alert-height, 0px) + ${constants_5.HEADER_HEIGHT_MOBILE});
+      left: 0;
+      
+      /* Необходимо для анимации компонента вместе с sidebar */
+      transform: translateX(-100vw);
 
-    width: 100vw;
+      display: flex;
+      flex-direction: column;
 
-    background-color: ${({ theme }) => theme.palette.background.default};
+      width: 100vw;
 
-    transition: ${({ theme }) => {
+      background-color: ${({ theme }) => theme.palette.background.default};
+
+      transition: ${({ theme }) => {
     return theme.transitions.create(['transform'], {
         duration: theme.transitions.duration.standard,
     });
 }};
 
-    &.${constants_5.dashboardLayoutHeaderClassnames.mobileMenuOrganizationVisible} {
-      transform: translateX(0);
-    }
-
-    & .${constants_2.menuOrganizationClassnames.button} {
-      height: ${constants_3.MOBILE_BUTTON_HEIGHT};
-      padding: ${({ theme }) => theme.spacing(3, 4)};
+      &.${constants_6.dashboardLayoutHeaderClassnames.mobileSidebarPriorityFeatureVisible} {
+        transform: translateX(0);
+      }
 
-      border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      & .${constants_2.menuOrganizationClassnames.button}, & .${constants_4.profileClassnames.button} {
+        height: ${constants_3.MOBILE_BUTTON_HEIGHT};
+        padding: ${({ theme }) => theme.spacing(3, 4)};
 
-      &:hover {
         border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+
+        &:hover {
+          border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+        }
+
+        &:active {
+          border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+        }
       }
 
-      &:active {
-        border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+      &.${constants_6.dashboardLayoutHeaderClassnames.priorityFeatureMenuOrg} {
+        & .${constants_6.dashboardLayoutHeaderClassnames.profile} {
+          display: block;
+        }
+
+
+        & .${constants_4.profileClassnames.button} {
+          width: 100%;
+          max-width: unset;
+
+          border-radius: 0;
+        }
+
+        & .${constants_4.profileClassnames.avatar} {
+          display: none;
+        }
+
+        & .${constants_4.profileClassnames.user} {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          width: 100%;
+        }
       }
     }
   }

package/node/components/DashboardLayout/Header/useLogic/useLogic.d.ts

@@ -1,12 +1,15 @@
+import { type CSSProperties } from 'react';
 import { type HeaderProps } from '../types';
 export declare const useLogic: ({ profile, menuOrganization }: HeaderProps) => {
     isShowExitButton: boolean;
     isShowProfile: boolean;
     isMobile: boolean;
     isFocusedMode: boolean;
+    mobileHeaderPriorityFeature: "profile" | "menuOrg";
     isLoading: boolean;
     collapsedIn: boolean;
     onToggleSidebar: (newValue?: boolean | undefined) => void;
     alertHeight: number;
-    menuOrganizationClassnames: string;
+    isPinned: boolean;
+    headerStyle: CSSProperties;
 };

package/node/components/DashboardLayout/Header/useLogic/useLogic.js

@@ -5,31 +5,36 @@ const react_1 = require("react");
 const DashboardContext_1 = require("../../../DashboardContext");
 const DashboardSidebarProvider_1 = require("../../../DashboardSidebarProvider");
 const useViewportType_1 = require("../../../useViewportType");
-const classNames_1 = require("../../../utils/classNames");
-const constants_1 = require("../constants");
 const useLogic = ({ profile, menuOrganization }) => {
-    const { isFocusedMode, isLoading, hasMenuOrganizationRef, alertHeight } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
+    const { isFocusedMode, isLoading, hasMenuOrganizationRef, hasProfileRef, alertHeight, mobileHeaderPriorityFeature, } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
     const { collapsedIn, onToggleSidebar, isPinned } = (0, react_1.useContext)(DashboardSidebarProvider_1.DashboardSidebarContext);
     (0, react_1.useEffect)(() => {
         hasMenuOrganizationRef.current = Boolean(menuOrganization);
-    }, [menuOrganization]);
+        hasProfileRef.current = Boolean(profile);
+    }, [menuOrganization, profile]);
     const { isMobile } = (0, useViewportType_1.useViewportType)();
     const hasMenu = Boolean(profile?.menu || profile?.menuList);
-    const isShowProfile = (Boolean(profile) && !isMobile) || (hasMenu && isMobile);
-    const isShowExitButton = isMobile && !hasMenu && Boolean(profile?.exitButton);
-    const menuOrganizationClassnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)({
-        [constants_1.dashboardLayoutHeaderClassnames.mobileMenuOrganizationVisible]: isPinned,
-    }), [isPinned]);
+    const isShowProfile = (Boolean(profile) && !isMobile) ||
+        (hasMenu && isMobile && mobileHeaderPriorityFeature === 'profile');
+    const isShowExitButton = isMobile &&
+        !hasMenu &&
+        Boolean(profile?.exitButton) &&
+        mobileHeaderPriorityFeature === 'profile';
+    const headerStyle = {
+        '--alert-height': `${alertHeight}px`,
+    };
     return {
         isShowExitButton,
         isShowProfile,
         isMobile,
         isFocusedMode,
+        mobileHeaderPriorityFeature,
         isLoading,
         collapsedIn,
         onToggleSidebar,
         alertHeight,
-        menuOrganizationClassnames,
+        isPinned,
+        headerStyle,
     };
 };
 exports.useLogic = useLogic;

package/node/components/DashboardLayout/types.d.ts

@@ -10,4 +10,9 @@ export type DashboardLayoutProps = {
      * Если true, отображается состояние загрузки
      */
     isLoading?: boolean;
+    /**
+     * Элемент, отображаемый в мобильном хедере.
+     * Второстепенный будет помещен в sidebar.
+     */
+    mobileHeaderPriorityFeature?: 'profile' | 'menuOrg';
 };

package/node/components/DashboardSidebar/DashboardSidebar.js

@@ -6,17 +6,32 @@ const react_1 = require("react");
 const DashboardSidebarSkeleton_1 = require("../DashboardSidebarSkeleton");
 const NavMenu_1 = require("../NavMenu");
 const PinButton_1 = require("../PinButton");
+const cva_1 = require("../utils/cva");
 const getInertProps_1 = require("../utils/getInertProps");
+const constants_1 = require("./constants");
 const SidebarNav_1 = require("./SidebarNav");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
+const sidebar = (0, cva_1.cva)('', {
+    variants: {
+        hasProfile: {
+            true: constants_1.dashboardSidebarClassnames.hasProfile,
+        },
+        hasMenuOrganization: {
+            true: constants_1.dashboardSidebarClassnames.hasMenuOrganization,
+        },
+    },
+});
 /**
  * Основной sidebar приложения
  */
 exports.DashboardSidebar = (0, react_1.forwardRef)((props, ref) => {
-    const { isPinned, isMobile, collapsedIn, onTogglePin, onMouseEnter, onMouseLeave, alertHeight, classnames, wrapperClassnames, menu, header, isLoading, } = (0, useLogic_1.useLogic)(props);
+    const { isPinned, isMobile, collapsedIn, onTogglePin, onMouseEnter, onMouseLeave, alertHeight, classnames, menu, header, isLoading, hasMenuOrganization, hasProfile, } = (0, useLogic_1.useLogic)(props);
     if (isLoading) {
         return (0, jsx_runtime_1.jsx)(DashboardSidebarSkeleton_1.DashboardSidebarSkeleton, {});
     }
-    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { "$isPinned": isPinned, "$alertHeight": alertHeight, className: wrapperClassnames, children: (0, jsx_runtime_1.jsx)(styles_1.SidebarRoot, { ref: ref, "$isPinned": isPinned, "$collapsedIn": collapsedIn, className: classnames, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ...(0, getInertProps_1.getInertProps)(isMobile && !isPinned), children: (0, jsx_runtime_1.jsxs)(styles_1.StyledPaper, { variant: "outlined", children: [(0, jsx_runtime_1.jsxs)(styles_1.SidebarContent, { "$collapsedIn": collapsedIn, "$isPinned": isPinned, "$hasHeader": Boolean(header), children: [header && (0, jsx_runtime_1.jsx)(styles_1.SidebarHeader, { children: header }), (0, jsx_runtime_1.jsx)(SidebarNav_1.SidebarNav, { menu: (0, jsx_runtime_1.jsx)(NavMenu_1.NavMenu, { collapsedIn: collapsedIn, items: menu.items }) })] }), (0, jsx_runtime_1.jsx)(styles_1.Footer, { children: (0, jsx_runtime_1.jsx)(PinButton_1.PinButton, { isPinned: isPinned, collapsedIn: collapsedIn, onClick: onTogglePin }) })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { "$isPinned": isPinned, "$alertHeight": alertHeight, className: sidebar({
+            hasProfile,
+            hasMenuOrganization,
+        }), children: (0, jsx_runtime_1.jsx)(styles_1.SidebarRoot, { ref: ref, "$isPinned": isPinned, "$collapsedIn": collapsedIn, className: classnames, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ...(0, getInertProps_1.getInertProps)(isMobile && !isPinned), children: (0, jsx_runtime_1.jsxs)(styles_1.StyledPaper, { variant: "outlined", children: [(0, jsx_runtime_1.jsxs)(styles_1.SidebarContent, { "$collapsedIn": collapsedIn, "$isPinned": isPinned, "$hasHeader": Boolean(header), children: [header && (0, jsx_runtime_1.jsx)(styles_1.SidebarHeader, { children: header }), (0, jsx_runtime_1.jsx)(SidebarNav_1.SidebarNav, { menu: (0, jsx_runtime_1.jsx)(NavMenu_1.NavMenu, { collapsedIn: collapsedIn, items: menu.items }) })] }), (0, jsx_runtime_1.jsx)(styles_1.Footer, { children: (0, jsx_runtime_1.jsx)(PinButton_1.PinButton, { isPinned: isPinned, collapsedIn: collapsedIn, onClick: onTogglePin }) })] }) }) }));
 });

package/node/components/DashboardSidebar/constants.d.ts

@@ -1,5 +1,6 @@
 export declare const dashboardSidebarClassnames: {
     root: string;
+    hasProfile: string;
     hasMenuOrganization: string;
 };
 export declare const LABEL_WIDTH: {

package/node/components/DashboardSidebar/constants.js

@@ -4,6 +4,7 @@ exports.LABEL_WIDTH = exports.dashboardSidebarClassnames = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.dashboardSidebarClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout-sidebar'),
+    hasProfile: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout-sidebar_has-profile'),
     hasMenuOrganization: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout-sidebar_has-menu-organization'),
 };
 exports.LABEL_WIDTH = {

package/node/components/DashboardSidebar/styles.js

@@ -38,7 +38,7 @@ exports.Wrapper = (0, styled_1.styled)('div', {
     });
 }};
 
-    &.${constants_4.dashboardSidebarClassnames.hasMenuOrganization} {
+    &.${constants_4.dashboardSidebarClassnames.hasMenuOrganization}, &.${constants_4.dashboardSidebarClassnames.hasProfile} {
       top: ${({ $alertHeight }) => `calc(${$alertHeight}px + ${constants_2.HEADER_HEIGHT_MOBILE} + ${OrganizationButton_1.MOBILE_BUTTON_HEIGHT}) `};
     }
   }

package/node/components/DashboardSidebar/useLogic/useLogic.d.ts

@@ -28,5 +28,6 @@ export declare const useLogic: (props: DashboardSidebarProps) => {
     header: import("react").ReactNode;
     isLoading: boolean;
     classnames: string;
-    wrapperClassnames: string;
+    hasMenuOrganization: boolean | null;
+    hasProfile: boolean | null;
 };

package/node/components/DashboardSidebar/useLogic/useLogic.js

@@ -13,7 +13,7 @@ const constants_1 = require("../constants");
 const useLogic = (props) => {
     const { className, menu, header, isLoading } = props;
     const { onToggleSidebar, isPinned, onTogglePin, collapsedIn, setIsPopupOpen, } = (0, react_1.useContext)(DashboardSidebarProvider_1.DashboardSidebarContext);
-    const { alertHeight, isLoading: isDashboardLoading, hasMenuOrganizationRef, } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
+    const { alertHeight, isLoading: isDashboardLoading, hasMenuOrganizationRef, hasProfileRef, mobileHeaderPriorityFeature, } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
     const { isMobile } = (0, useViewportType_1.useViewportType)();
     const hoverTimerRef = (0, react_1.useRef)(null);
     const theme = (0, useTheme_1.useTheme)();
@@ -83,9 +83,6 @@ const useLogic = (props) => {
             }
         };
     }, [collapsedIn, isPinned]);
-    const wrapperClassnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)({
-        [constants_1.dashboardSidebarClassnames.hasMenuOrganization]: hasMenuOrganizationRef.current,
-    }), [hasMenuOrganizationRef.current]);
     const classnames = (0, classNames_1.classNames)(className, constants_1.dashboardSidebarClassnames.root);
     return {
         isPinned,
@@ -99,7 +96,9 @@ const useLogic = (props) => {
         header,
         isLoading: isLoading || isDashboardLoading,
         classnames,
-        wrapperClassnames,
+        hasMenuOrganization: hasMenuOrganizationRef.current &&
+            mobileHeaderPriorityFeature === 'profile',
+        hasProfile: hasProfileRef.current && mobileHeaderPriorityFeature === 'menuOrg',
     };
 };
 exports.useLogic = useLogic;

package/node/components/MenuOrganization/OrganizationButton/OrganizationButton.js

@@ -16,7 +16,7 @@ exports.OrganizationButton = (0, react_1.forwardRef)(({ onClick, isOpen, current
     });
     const renderButton = () => ((0, jsx_runtime_1.jsx)(styles_2.StyledButton, { ref: ref, variant: "text", disabled: isDisabled, onClick: onClick, className: constants_1.menuOrganizationClassnames.button, endIcon: (0, jsx_runtime_1.jsx)(styles_2.StyledChevron, { isActive: isOpen, width: 24, height: 24 }), children: renderPreview ? (renderPreview(currentOrganization, {
             className: hidePersonalDataClassname,
-        })) : ((0, jsx_runtime_1.jsxs)(styles_2.Container, { className: hidePersonalDataClassname, children: [(0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { variant: "h6", component: "div", children: name }), (0, jsx_runtime_1.jsxs)(styles_1.OrganizationData, { children: [(0, jsx_runtime_1.jsxs)(styles_2.StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u0418\u041D\u041D ", inn] }), kpp && ((0, jsx_runtime_1.jsxs)(styles_2.StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u041A\u041F\u041F ", kpp] }))] })] })) }));
+        })) : ((0, jsx_runtime_1.jsxs)(styles_2.Container, { className: hidePersonalDataClassname, children: [(0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { variant: "h6", component: "div", children: name }), (0, jsx_runtime_1.jsxs)(styles_1.OrganizationData, { className: constants_1.menuOrganizationClassnames.organizationData, children: [(0, jsx_runtime_1.jsxs)(styles_2.StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u0418\u041D\u041D ", inn] }), kpp && ((0, jsx_runtime_1.jsxs)(styles_2.StyledTypography, { "$isDisabled": isDisabled, variant: "caption", color: "textSecondary", children: ["\u041A\u041F\u041F ", kpp] }))] })] })) }));
     if (isDisabled && disabledReason) {
         return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: disabledReason, withoutContainer: false, placement: "bottom", children: renderButton() }));
     }

package/node/components/MenuOrganization/constants.d.ts

@@ -5,4 +5,5 @@ export declare const menuOrganizationClassnames: {
     root: string;
     errorPlaceholder: string;
     button: string;
+    organizationData: string;
 };

package/node/components/MenuOrganization/constants.js

@@ -9,4 +9,5 @@ exports.menuOrganizationClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('menu-organization'),
     errorPlaceholder: (0, createUIKitClassname_1.createUIKitClassname)('menu-organization__error-placeholder'),
     button: (0, createUIKitClassname_1.createUIKitClassname)('menu-organization__button'),
+    organizationData: (0, createUIKitClassname_1.createUIKitClassname)('menu-organization__organization-data'),
 };

package/node/components/Profile/Profile.js

@@ -29,7 +29,7 @@ const Profile = (props) => {
     if (isLoading) {
         return (0, jsx_runtime_1.jsx)(ProfileSkeleton_1.ProfileSkeleton, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ClickAwayListener_1.default, { onClickAway: handleCloseMenu, children: (0, jsx_runtime_1.jsxs)(styles_1.ProfileRoot, { ref: anchorRef, variant: "text", onClick: handleOpenMenu, children: [(0, jsx_runtime_1.jsx)(styles_1.StyledAvatar, { ...avatar }), (0, jsx_runtime_1.jsxs)(styles_1.User, { children: [(0, jsx_runtime_1.jsxs)(styles_1.Credentials, { className: hidePersonalDataClassname, children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body1", className: constants_1.profileClassnames.credentials, children: displayName }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "textSecondary", className: constants_1.profileClassnames.credentials, children: annotation })] }), (0, jsx_runtime_1.jsx)(styles_1.StyledChevron, { isActive: open })] })] }) }), Menu ? ((0, jsx_runtime_1.jsx)(Menu, { open: open, anchorEl: anchorRef.current, onClose: handleCloseMenu, anchorOrigin: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ClickAwayListener_1.default, { onClickAway: handleCloseMenu, children: (0, jsx_runtime_1.jsxs)(styles_1.ProfileRoot, { ref: anchorRef, variant: "text", onClick: handleOpenMenu, className: constants_1.profileClassnames.button, children: [(0, jsx_runtime_1.jsx)(styles_1.StyledAvatar, { ...avatar, className: constants_1.profileClassnames.avatar }), (0, jsx_runtime_1.jsxs)(styles_1.User, { className: constants_1.profileClassnames.user, children: [(0, jsx_runtime_1.jsxs)(styles_1.Credentials, { className: hidePersonalDataClassname, children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body1", className: constants_1.profileClassnames.credentials, children: displayName }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "textSecondary", className: constants_1.profileClassnames.credentials, children: annotation })] }), (0, jsx_runtime_1.jsx)(styles_1.StyledChevron, { isActive: open })] })] }) }), Menu ? ((0, jsx_runtime_1.jsx)(Menu, { open: open, anchorEl: anchorRef.current, onClose: handleCloseMenu, anchorOrigin: {
                     vertical: 'bottom',
                     horizontal: 'right',
                 }, transformOrigin: {

package/node/components/Profile/constants.d.ts

@@ -1,3 +1,6 @@
 export declare const profileClassnames: {
     credentials: string;
+    button: string;
+    avatar: string;
+    user: string;
 };

package/node/components/Profile/constants.js

@@ -4,4 +4,7 @@ exports.profileClassnames = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.profileClassnames = {
     credentials: (0, createUIKitClassname_1.createUIKitClassname)('profile__credentials'),
+    button: (0, createUIKitClassname_1.createUIKitClassname)('profile__button'),
+    avatar: (0, createUIKitClassname_1.createUIKitClassname)('profile__avatar'),
+    user: (0, createUIKitClassname_1.createUIKitClassname)('profile__user'),
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.51.0",
+  "version": "4.52.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {