@astral/ui 4.24.0 → 4.24.2

package/components/DashboardLayout/Header/Header.js

@@ -8,13 +8,13 @@ import { Product } from '../../Product';
 import { Profile } from '../../Profile';
 import { getInertProps } from '../../utils/getInertProps';
 import { dashboardLayoutHeaderClassnames } from './constants';
-import { ExitButton, HeaderContent, HeaderContentSection, HeaderRoot, HeaderSection, MobileSidebarTogglerWrapper, ProductSwitcherWrapper, ProfileWrapper, } from './styles';
+import { ExitButton, HeaderContent, HeaderContentSection, HeaderRoot, HeaderSection, MenuOrganizationWrapper, MobileSidebarTogglerWrapper, ProductSwitcherWrapper, ProfileWrapper, } from './styles';
 import { useLogic } from './useLogic';
 /**
  * Основной header приложения
  */
 export const Header = forwardRef((props, ref) => {
     const { productSwitcher: ProductSwitcher, product, profile, menuOrganization, children, } = props;
-    const { isShowExitButton, isShowProfile, isFocusedMode, isMobile, collapsedIn, onToggleSidebar, isLoading, } = 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?.(), 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, 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, {}) })] })] }) }));
 });

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

@@ -1,4 +1,5 @@
 export declare const dashboardLayoutHeaderClassnames: {
     root: string;
     mobileSidebarButton: string;
+    mobileMenuOrganizationVisible: string;
 };

package/components/DashboardLayout/Header/constants.js

@@ -2,4 +2,5 @@ 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'),
 };

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

@@ -44,3 +44,9 @@ 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<{
+    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

@@ -1,8 +1,11 @@
 import { buttonClasses } from '@mui/material/Button';
 import { dashboardSidebarClassnames } from '../../DashboardSidebar/constants';
 import { IconButton } from '../../IconButton';
+import { menuOrganizationClassnames } from '../../MenuOrganization/constants';
+import { MOBILE_BUTTON_HEIGHT } from '../../MenuOrganization/OrganizationButton/constants';
 import { styled } from '../../styled';
 import { dashboardLayoutClassnames, HEADER_HEIGHT, HEADER_HEIGHT_MOBILE, } from '../constants';
+import { dashboardLayoutHeaderClassnames } from './constants';
 export const HeaderRoot = styled('header', {
     shouldForwardProp: (prop) => !['$isFocusedMode'].includes(prop),
 }) `
@@ -102,3 +105,46 @@ export const HeaderContent = styled.div `
     padding: 0;
   }
 `;
+export const MenuOrganizationWrapper = 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;
+
+    width: 100vw;
+
+    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)};
+
+      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]};
+      }
+    }
+  }
+`;

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

@@ -7,4 +7,6 @@ export declare const useLogic: ({ profile, menuOrganization }: HeaderProps) => {
     isLoading: boolean;
     collapsedIn: boolean;
     onToggleSidebar: (newValue?: boolean | undefined) => void;
+    alertHeight: number;
+    menuOrganizationClassnames: string;
 };

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

@@ -1,10 +1,12 @@
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useMemo } 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 } = useContext(DashboardContext);
-    const { collapsedIn, onToggleSidebar } = useContext(DashboardSidebarContext);
+    const { isFocusedMode, isLoading, hasMenuOrganizationRef, alertHeight } = useContext(DashboardContext);
+    const { collapsedIn, onToggleSidebar, isPinned } = useContext(DashboardSidebarContext);
     useEffect(() => {
         hasMenuOrganizationRef.current = Boolean(menuOrganization);
     }, [menuOrganization]);
@@ -12,6 +14,9 @@ export const useLogic = ({ profile, menuOrganization }) => {
     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]);
     return {
         isShowExitButton,
         isShowProfile,
@@ -20,5 +25,7 @@ export const useLogic = ({ profile, menuOrganization }) => {
         isLoading,
         collapsedIn,
         onToggleSidebar,
+        alertHeight,
+        menuOrganizationClassnames,
     };
 };

package/components/DashboardSidebar/styles.js

@@ -1,4 +1,5 @@
 import { HEADER_HEIGHT_MOBILE } from '../DashboardLayout/constants';
+import { menuOrganizationClassnames } from '../MenuOrganization/constants';
 import { MOBILE_BUTTON_HEIGHT } from '../MenuOrganization/OrganizationButton';
 import { Paper } from '../Paper';
 import { pinButtonClassnames } from '../PinButton';
@@ -83,6 +84,15 @@ export const SidebarHeader = styled.header `
     padding: ${({ theme }) => theme.spacing(4)};
 
     border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+
+    &:has(.${menuOrganizationClassnames.button}) {
+      padding: 0;
+    }
+
+    & .${menuOrganizationClassnames.button} {
+      height: ${MOBILE_BUTTON_HEIGHT};
+      padding: ${({ theme }) => theme.spacing(3, 4)};
+    }
   }
 `;
 export const SidebarContent = styled.div `

package/components/MenuOrganization/MenuOrganization.js

@@ -8,15 +8,15 @@ import { NoData } from './NoData';
 import { OrganizationButton } from './OrganizationButton';
 import { OrganizationList } from './OrganizationList';
 import { OrganizationListSkeleton } from './OrganizationListSkeleton';
-import { ActionWrapper, ButtonWrapper, OrganizationsWrapper, SearchWrapper, StyledPopover, StyledTypography, } from './styles';
+import { ActionWrapper, OrganizationsWrapper, SearchWrapper, StyledPopover, StyledTypography, } from './styles';
 import { useLogic } from './useLogic';
 export const MenuOrganization = (props) => {
     const { anchorOrigin = { vertical: 'bottom', horizontal: 'right' }, transformOrigin = { vertical: 'top', horizontal: 'right' }, } = props;
-    const { actionButtonProps, hasAction, isLoading, isError, onRetry, isComponentLoading, isShowOrganizationList, searchProps, popoverProps, organizationListProps, organizationButtonProps, isShowSearchField, isMobile, classnames, alertHeight, } = useLogic(props);
+    const { actionButtonProps, hasAction, isLoading, isError, onRetry, isComponentLoading, isShowOrganizationList, searchProps, popoverProps, organizationListProps, organizationButtonProps, isShowSearchField, isMobile, } = useLogic(props);
     if (isComponentLoading) {
         return _jsx(MenuOrganizationSkeleton, {});
     }
-    return (_jsxs(_Fragment, { children: [_jsx(ButtonWrapper, { className: classnames, "$alertHeight": alertHeight, children: _jsx(OrganizationButton, { ...organizationButtonProps }) }), _jsxs(StyledPopover, { ...popoverProps, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, title: POPOVER_TITLE, children: [isShowSearchField && (_jsx(SearchWrapper, { children: _jsx(SearchField, { fullWidth: true, ...searchProps }) })), _jsx(OrganizationsWrapper, { "$isLoading": isLoading, className: menuOrganizationClassnames.root, children: _jsx(ContentState, { isLoading: isLoading, isCustom: isError, customState: {
+    return (_jsxs(_Fragment, { children: [_jsx(OrganizationButton, { ...organizationButtonProps }), _jsxs(StyledPopover, { ...popoverProps, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, title: POPOVER_TITLE, children: [isShowSearchField && (_jsx(SearchWrapper, { children: _jsx(SearchField, { fullWidth: true, ...searchProps }) })), _jsx(OrganizationsWrapper, { "$isLoading": isLoading, className: menuOrganizationClassnames.root, children: _jsx(ContentState, { isLoading: isLoading, isCustom: isError, customState: {
                                 title: (_jsx(StyledTypography, { children: "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435" })),
                                 Actions: (_jsx(Button, { variant: "light", color: "grey", onClick: onRetry, children: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0441\u043D\u043E\u0432\u0430" })),
                                 className: menuOrganizationClassnames.errorPlaceholder,

package/components/MenuOrganization/OrganizationButton/OrganizationButton.js

@@ -3,6 +3,7 @@ import { forwardRef } from 'react';
 import { OverflowTypography } from '../../OverflowTypography';
 import { useHidePersonalData } from '../../personalDataSecurity';
 import { Tooltip } from '../../Tooltip';
+import { menuOrganizationClassnames } from '../constants';
 import { OrganizationData } from '../styles';
 import { Container, StyledButton, StyledChevron, StyledTypography, } from './styles';
 export const OrganizationButton = forwardRef(({ onClick, isOpen, currentOrganization, isDisabled, disabledReason, isHidePersonalData, renderPreview, }, ref) => {
@@ -10,7 +11,7 @@ export const OrganizationButton = forwardRef(({ onClick, isOpen, currentOrganiza
     const hidePersonalDataClassname = useHidePersonalData({
         isEnabled: isHidePersonalData,
     });
-    const renderButton = () => (_jsx(StyledButton, { ref: ref, variant: "text", disabled: isDisabled, onClick: onClick, endIcon: _jsx(StyledChevron, { isActive: isOpen, width: 24, height: 24 }), children: renderPreview ? (renderPreview(currentOrganization, {
+    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] }))] })] })) }));
     if (isDisabled && disabledReason) {

package/components/MenuOrganization/OrganizationButton/styles.js

@@ -2,7 +2,6 @@ import { Button } from '../../Button';
 import { Chevron } from '../../Chevron';
 import { styled } from '../../styled/styled';
 import { Typography } from '../../Typography';
-import { MOBILE_BUTTON_HEIGHT } from './constants';
 export const StyledButton = styled(Button) `
   display: flex;
   align-items: center;
@@ -27,21 +26,17 @@ export const StyledButton = styled(Button) `
   ${({ theme }) => theme.breakpoints.down('sm')} {
     justify-content: space-between;
 
+    width: 100%;
     max-width: unset;
-    height: ${MOBILE_BUTTON_HEIGHT};
-    padding: ${({ theme }) => theme.spacing(3, 4)};
 
-    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
     border-radius: 0;
 
     &:hover {
       background-color: initial;
-      border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
     }
 
     &:active {
       background-color: ${({ theme }) => theme.palette.primary[100]};
-      border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
     }
   }
 `;

package/components/MenuOrganization/constants.d.ts

@@ -4,5 +4,5 @@ export declare const PLACEHOLDER_HEIGHT = "108px";
 export declare const menuOrganizationClassnames: {
     root: string;
     errorPlaceholder: string;
-    mobileVisible: string;
+    button: string;
 };

package/components/MenuOrganization/constants.js

@@ -5,5 +5,5 @@ export const PLACEHOLDER_HEIGHT = '108px';
 export const menuOrganizationClassnames = {
     root: createUIKitClassname('menu-organization'),
     errorPlaceholder: createUIKitClassname('menu-organization__error-placeholder'),
-    mobileVisible: createUIKitClassname('menu-organization_visible'),
+    button: createUIKitClassname('menu-organization__button'),
 };

package/components/MenuOrganization/styles.d.ts

@@ -25,12 +25,6 @@ export declare const StyledTypography: import("../styled").StyledComponent<impor
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const ButtonWrapper: 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>, {}>;
 export declare const StyledPopover: import("../styled").StyledComponent<import("..").WithoutEmotionSpecific<import("@mui/material").PopoverProps> & {
     title?: string | undefined;
 } & {

package/components/MenuOrganization/styles.js

@@ -1,6 +1,5 @@
 import { bottomDrawerClassnames } from '../BottomDrawer';
 import { OFFSET_TOP_SCREEN } from '../BottomDrawer/constants';
-import { HEADER_HEIGHT_MOBILE } from '../DashboardLayout/constants';
 import { Grid } from '../Grid';
 import { Popover } from '../Popover';
 import { loadingPlaceholderClassnames } from '../placeholders/LoadingPlaceholder';
@@ -80,34 +79,6 @@ export const OrganizationData = styled(Grid) `
 export const StyledTypography = styled(Typography) `
   color: ${({ theme }) => theme.palette.grey[600]};
 `;
-export const ButtonWrapper = 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;
-
-    width: 100vw;
-
-    background-color: ${({ theme }) => theme.palette.background.default};
-
-    transition: ${({ theme }) => {
-    return theme.transitions.create(['transform'], {
-        duration: theme.transitions.duration.standard,
-    });
-}};
-
-    &.${menuOrganizationClassnames.mobileVisible} {
-      transform: translateX(0);
-    }
-  }
-`;
 export const StyledPopover = styled(Popover) `
 
   ${({ theme }) => theme.breakpoints.down('sm')} {

package/components/MenuOrganization/useLogic/useLogic.d.ts

@@ -61,7 +61,5 @@ export declare const useLogic: <TData extends Organization & Record<string, unkn
     };
     isShowSearchField: boolean;
     isMobile: boolean;
-    classnames: string;
-    alertHeight: number;
 };
 export {};

package/components/MenuOrganization/useLogic/useLogic.js

@@ -1,16 +1,12 @@
 import { useCallback, useContext, useMemo, useState, } from 'react';
 import { DashboardContext } from '../../DashboardContext';
-import { DashboardSidebarContext } from '../../DashboardSidebarProvider';
 import { useHidePersonalData } from '../../personalDataSecurity';
 import { usePopover } from '../../usePopover';
 import { useViewportType } from '../../useViewportType';
-import { classNames } from '../../utils/classNames';
-import { menuOrganizationClassnames } from '../constants';
 export const useLogic = ({ organizations = [], onChangeSearch, onChange, currentOrganizationGroupLabel, currentOrganization, groupBy, onClose, onOpen, isOpen: isOpenPopover, isDisabled, disabledReason, isHidePersonalData, action, isLoading, isError, onRetry, renderItem, renderPreview, }) => {
-    const { isLoading: isDashboardLoading, alertHeight } = useContext(DashboardContext);
+    const { isLoading: isDashboardLoading } = useContext(DashboardContext);
     const [searchValue, setSearchValue] = useState('');
     const [anchorButtonEl, setAnchorButtonEl] = useState(null);
-    const { isPinned } = useContext(DashboardSidebarContext);
     const { isMobile } = useViewportType();
     const { onClick, ...restActionProps } = action || {};
     const buttonRef = useCallback((node) => {
@@ -64,7 +60,6 @@ export const useLogic = ({ organizations = [], onChangeSearch, onChange, current
     const renderPreviewWrapper = useMemo(() => renderPreview
         ? (organization, params) => renderPreview(organization, params)
         : undefined, [renderPreview]);
-    const classnames = useMemo(() => classNames({ [menuOrganizationClassnames.mobileVisible]: isPinned }), [isPinned]);
     return {
         actionButtonProps: {
             onClick: handleActionClick,
@@ -109,7 +104,5 @@ export const useLogic = ({ organizations = [], onChangeSearch, onChange, current
         },
         isShowSearchField,
         isMobile,
-        classnames,
-        alertHeight,
     };
 };

package/components/PageHeader/Title/Title.js

@@ -6,5 +6,5 @@ export const Title = ({ backButton, title, isLoading, hasDescription, hasBreadcr
     if (!title && isLoading) {
         return _jsx(StyledSkeleton, { height: 20, width: 280, variant: "rounded" });
     }
-    return (_jsxs(_Fragment, { children: [backButton && (_jsx(BackButton, { ...backButton, variant: "outlined", color: "grey", size: "medium", children: _jsx(ArrowLOutlineMd, {}) })), typeof title === 'string' ? (_jsx(TitleWrapper, { component: "h1", variant: "h3", "$hasDescription": hasDescription, "$hasBreadcrumbs": hasBreadcrumbs, children: _jsx(OverflowTypography, { component: "div", variant: "inherit", children: title }) })) : (_jsx(TitleWrapper, { component: "div", role: "heading", variant: "h3", "aria-level": 1, "$hasDescription": hasDescription, "$hasBreadcrumbs": hasBreadcrumbs, children: title }))] }));
+    return (_jsxs(_Fragment, { children: [backButton && (_jsx(BackButton, { ...backButton, variant: "outlined", color: "grey", size: "medium", children: _jsx(ArrowLOutlineMd, {}) })), typeof title === 'string' ? (_jsx(TitleWrapper, { component: "h1", variant: "h3", "$hasDescription": hasDescription || isLoading, "$hasBreadcrumbs": hasBreadcrumbs, children: _jsx(OverflowTypography, { component: "div", variant: "inherit", children: title }) })) : (_jsx(TitleWrapper, { component: "div", role: "heading", variant: "h3", "aria-level": 1, "$hasDescription": hasDescription, "$hasBreadcrumbs": hasBreadcrumbs, children: title }))] }));
 };

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

@@ -18,6 +18,6 @@ const useLogic_1 = require("./useLogic");
  */
 exports.Header = (0, react_1.forwardRef)((props, ref) => {
     const { productSwitcher: ProductSwitcher, product, profile, menuOrganization, children, } = props;
-    const { isShowExitButton, isShowProfile, isFocusedMode, isMobile, collapsedIn, onToggleSidebar, isLoading, } = (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?.(), 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, 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, {}) })] })] }) }));
 });

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

@@ -1,4 +1,5 @@
 export declare const dashboardLayoutHeaderClassnames: {
     root: string;
     mobileSidebarButton: string;
+    mobileMenuOrganizationVisible: string;
 };

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

@@ -5,4 +5,5 @@ 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'),
 };

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

@@ -44,3 +44,9 @@ 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<{
+    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,11 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeaderContent = exports.ExitButton = exports.ProfileWrapper = exports.ProductSwitcherWrapper = exports.HeaderContentSection = exports.HeaderSection = exports.MobileSidebarTogglerWrapper = exports.HeaderRoot = void 0;
+exports.MenuOrganizationWrapper = 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 styled_1 = require("../../styled");
-const constants_2 = require("../constants");
+const constants_4 = require("../constants");
+const constants_5 = require("./constants");
 exports.HeaderRoot = (0, styled_1.styled)('header', {
     shouldForwardProp: (prop) => !['$isFocusedMode'].includes(prop),
 }) `
@@ -18,8 +21,8 @@ exports.HeaderRoot = (0, styled_1.styled)('header', {
   justify-content: space-between;
 
   width: 100%;
-  height: ${constants_2.HEADER_HEIGHT};
-  margin-top: ${({ $isFocusedMode }) => $isFocusedMode ? `-${constants_2.HEADER_HEIGHT}` : 0};
+  height: ${constants_4.HEADER_HEIGHT};
+  margin-top: ${({ $isFocusedMode }) => $isFocusedMode ? `-${constants_4.HEADER_HEIGHT}` : 0};
   margin-bottom: ${({ theme }) => theme.spacing(4)};
 
   transition: ${({ theme }) => {
@@ -32,7 +35,7 @@ exports.HeaderRoot = (0, styled_1.styled)('header', {
     grid-row: 2;
     justify-content: flex-start;
 
-    height: ${constants_2.HEADER_HEIGHT_MOBILE};
+    height: ${constants_4.HEADER_HEIGHT_MOBILE};
     margin-bottom: 0;
     padding: ${({ theme }) => theme.spacing(0, 2, 0, 1)};
 
@@ -51,7 +54,7 @@ exports.MobileSidebarTogglerWrapper = styled_1.styled.div `
     padding: ${({ theme }) => theme.spacing(2)};
   }
   
-  .${constants_2.dashboardLayoutClassnames.root}:not(:has(.${constants_1.dashboardSidebarClassnames.root}))
+  .${constants_4.dashboardLayoutClassnames.root}:not(:has(.${constants_1.dashboardSidebarClassnames.root}))
     & {
     display: none;
   }
@@ -105,3 +108,46 @@ exports.HeaderContent = styled_1.styled.div `
     padding: 0;
   }
 `;
+exports.MenuOrganizationWrapper = 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;
+
+    width: 100vw;
+
+    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)};
+
+      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]};
+      }
+    }
+  }
+`;

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

@@ -7,4 +7,6 @@ export declare const useLogic: ({ profile, menuOrganization }: HeaderProps) => {
     isLoading: boolean;
     collapsedIn: boolean;
     onToggleSidebar: (newValue?: boolean | undefined) => void;
+    alertHeight: number;
+    menuOrganizationClassnames: string;
 };

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

@@ -5,9 +5,11 @@ 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 } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
-    const { collapsedIn, onToggleSidebar } = (0, react_1.useContext)(DashboardSidebarProvider_1.DashboardSidebarContext);
+    const { isFocusedMode, isLoading, hasMenuOrganizationRef, alertHeight } = (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]);
@@ -15,6 +17,9 @@ const useLogic = ({ profile, menuOrganization }) => {
     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]);
     return {
         isShowExitButton,
         isShowProfile,
@@ -23,6 +28,8 @@ const useLogic = ({ profile, menuOrganization }) => {
         isLoading,
         collapsedIn,
         onToggleSidebar,
+        alertHeight,
+        menuOrganizationClassnames,
     };
 };
 exports.useLogic = useLogic;

package/node/components/DashboardSidebar/styles.js

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Footer = exports.SidebarContent = exports.SidebarHeader = exports.SidebarRoot = exports.StyledPaper = exports.Wrapper = void 0;
 const constants_1 = require("../DashboardLayout/constants");
+const constants_2 = require("../MenuOrganization/constants");
 const OrganizationButton_1 = require("../MenuOrganization/OrganizationButton");
 const Paper_1 = require("../Paper");
 const PinButton_1 = require("../PinButton");
 const styled_1 = require("../styled");
-const constants_2 = require("./constants");
+const constants_3 = require("./constants");
 exports.Wrapper = (0, styled_1.styled)('div', {
     shouldForwardProp: (prop) => !['$isPinned', '$alertHeight'].includes(prop),
 }) `
@@ -35,7 +36,7 @@ exports.Wrapper = (0, styled_1.styled)('div', {
     });
 }};
 
-    &.${constants_2.dashboardSidebarClassnames.hasMenuOrganization} {
+    &.${constants_3.dashboardSidebarClassnames.hasMenuOrganization} {
       top: ${({ $alertHeight }) => `calc(${$alertHeight}px + ${constants_1.HEADER_HEIGHT_MOBILE} + ${OrganizationButton_1.MOBILE_BUTTON_HEIGHT}) `};
     }
   }
@@ -86,6 +87,15 @@ exports.SidebarHeader = styled_1.styled.header `
     padding: ${({ theme }) => theme.spacing(4)};
 
     border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+
+    &:has(.${constants_2.menuOrganizationClassnames.button}) {
+      padding: 0;
+    }
+
+    & .${constants_2.menuOrganizationClassnames.button} {
+      height: ${OrganizationButton_1.MOBILE_BUTTON_HEIGHT};
+      padding: ${({ theme }) => theme.spacing(3, 4)};
+    }
   }
 `;
 exports.SidebarContent = styled_1.styled.div `

package/node/components/MenuOrganization/MenuOrganization.js

@@ -15,11 +15,11 @@ const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const MenuOrganization = (props) => {
     const { anchorOrigin = { vertical: 'bottom', horizontal: 'right' }, transformOrigin = { vertical: 'top', horizontal: 'right' }, } = props;
-    const { actionButtonProps, hasAction, isLoading, isError, onRetry, isComponentLoading, isShowOrganizationList, searchProps, popoverProps, organizationListProps, organizationButtonProps, isShowSearchField, isMobile, classnames, alertHeight, } = (0, useLogic_1.useLogic)(props);
+    const { actionButtonProps, hasAction, isLoading, isError, onRetry, isComponentLoading, isShowOrganizationList, searchProps, popoverProps, organizationListProps, organizationButtonProps, isShowSearchField, isMobile, } = (0, useLogic_1.useLogic)(props);
     if (isComponentLoading) {
         return (0, jsx_runtime_1.jsx)(MenuOrganizationSkeleton_1.MenuOrganizationSkeleton, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.ButtonWrapper, { className: classnames, "$alertHeight": alertHeight, children: (0, jsx_runtime_1.jsx)(OrganizationButton_1.OrganizationButton, { ...organizationButtonProps }) }), (0, jsx_runtime_1.jsxs)(styles_1.StyledPopover, { ...popoverProps, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, title: constants_1.POPOVER_TITLE, children: [isShowSearchField && ((0, jsx_runtime_1.jsx)(styles_1.SearchWrapper, { children: (0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { fullWidth: true, ...searchProps }) })), (0, jsx_runtime_1.jsx)(styles_1.OrganizationsWrapper, { "$isLoading": isLoading, className: constants_1.menuOrganizationClassnames.root, children: (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isLoading: isLoading, isCustom: isError, customState: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrganizationButton_1.OrganizationButton, { ...organizationButtonProps }), (0, jsx_runtime_1.jsxs)(styles_1.StyledPopover, { ...popoverProps, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, title: constants_1.POPOVER_TITLE, children: [isShowSearchField && ((0, jsx_runtime_1.jsx)(styles_1.SearchWrapper, { children: (0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { fullWidth: true, ...searchProps }) })), (0, jsx_runtime_1.jsx)(styles_1.OrganizationsWrapper, { "$isLoading": isLoading, className: constants_1.menuOrganizationClassnames.root, children: (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isLoading: isLoading, isCustom: isError, customState: {
                                 title: ((0, jsx_runtime_1.jsx)(styles_1.StyledTypography, { children: "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435" })),
                                 Actions: ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "light", color: "grey", onClick: onRetry, children: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0441\u043D\u043E\u0432\u0430" })),
                                 className: constants_1.menuOrganizationClassnames.errorPlaceholder,

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

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const OverflowTypography_1 = require("../../OverflowTypography");
 const personalDataSecurity_1 = require("../../personalDataSecurity");
 const Tooltip_1 = require("../../Tooltip");
+const constants_1 = require("../constants");
 const styles_1 = require("../styles");
 const styles_2 = require("./styles");
 exports.OrganizationButton = (0, react_1.forwardRef)(({ onClick, isOpen, currentOrganization, isDisabled, disabledReason, isHidePersonalData, renderPreview, }, ref) => {
@@ -13,7 +14,7 @@ exports.OrganizationButton = (0, react_1.forwardRef)(({ onClick, isOpen, current
     const hidePersonalDataClassname = (0, personalDataSecurity_1.useHidePersonalData)({
         isEnabled: isHidePersonalData,
     });
-    const renderButton = () => ((0, jsx_runtime_1.jsx)(styles_2.StyledButton, { ref: ref, variant: "text", disabled: isDisabled, onClick: onClick, endIcon: (0, jsx_runtime_1.jsx)(styles_2.StyledChevron, { isActive: isOpen, width: 24, height: 24 }), children: renderPreview ? (renderPreview(currentOrganization, {
+    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] }))] })] })) }));
     if (isDisabled && disabledReason) {

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

@@ -5,7 +5,6 @@ const Button_1 = require("../../Button");
 const Chevron_1 = require("../../Chevron");
 const styled_1 = require("../../styled/styled");
 const Typography_1 = require("../../Typography");
-const constants_1 = require("./constants");
 exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
   display: flex;
   align-items: center;
@@ -30,21 +29,17 @@ exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
   ${({ theme }) => theme.breakpoints.down('sm')} {
     justify-content: space-between;
 
+    width: 100%;
     max-width: unset;
-    height: ${constants_1.MOBILE_BUTTON_HEIGHT};
-    padding: ${({ theme }) => theme.spacing(3, 4)};
 
-    border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
     border-radius: 0;
 
     &:hover {
       background-color: initial;
-      border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
     }
 
     &:active {
       background-color: ${({ theme }) => theme.palette.primary[100]};
-      border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
     }
   }
 `;

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

@@ -4,5 +4,5 @@ export declare const PLACEHOLDER_HEIGHT = "108px";
 export declare const menuOrganizationClassnames: {
     root: string;
     errorPlaceholder: string;
-    mobileVisible: string;
+    button: string;
 };

package/node/components/MenuOrganization/constants.js

@@ -8,5 +8,5 @@ exports.PLACEHOLDER_HEIGHT = '108px';
 exports.menuOrganizationClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('menu-organization'),
     errorPlaceholder: (0, createUIKitClassname_1.createUIKitClassname)('menu-organization__error-placeholder'),
-    mobileVisible: (0, createUIKitClassname_1.createUIKitClassname)('menu-organization_visible'),
+    button: (0, createUIKitClassname_1.createUIKitClassname)('menu-organization__button'),
 };

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

@@ -25,12 +25,6 @@ export declare const StyledTypography: import("@emotion/styled/dist/declarations
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const ButtonWrapper: 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>, {}>;
 export declare const StyledPopover: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("..").WithoutEmotionSpecific<import("@mui/material").PopoverProps> & {
     title?: string | undefined;
 } & {

package/node/components/MenuOrganization/styles.js

@@ -1,16 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledPopover = exports.ButtonWrapper = exports.StyledTypography = exports.OrganizationData = exports.OrganizationsWrapper = exports.SearchWrapper = exports.ActionWrapper = void 0;
+exports.StyledPopover = exports.StyledTypography = exports.OrganizationData = exports.OrganizationsWrapper = exports.SearchWrapper = exports.ActionWrapper = void 0;
 const BottomDrawer_1 = require("../BottomDrawer");
 const constants_1 = require("../BottomDrawer/constants");
-const constants_2 = require("../DashboardLayout/constants");
 const Grid_1 = require("../Grid");
 const Popover_1 = require("../Popover");
 const LoadingPlaceholder_1 = require("../placeholders/LoadingPlaceholder");
 const Placeholder_1 = require("../placeholders/Placeholder");
 const styled_1 = require("../styled");
 const Typography_1 = require("../Typography");
-const constants_3 = require("./constants");
+const constants_2 = require("./constants");
 exports.ActionWrapper = styled_1.styled.div `
   padding: ${({ theme }) => theme.spacing(2)};
 
@@ -39,14 +38,14 @@ exports.OrganizationsWrapper = styled_1.styled.div `
 
   box-sizing: ${({ $isLoading }) => ($isLoading ? 'content-box' : 'inherit')};
   width: 300px;
-  min-height: ${({ $isLoading }) => ($isLoading ? constants_3.PLACEHOLDER_HEIGHT : '64px')};
+  min-height: ${({ $isLoading }) => ($isLoading ? constants_2.PLACEHOLDER_HEIGHT : '64px')};
   max-height: 328px;
 
-  & .${constants_3.menuOrganizationClassnames.errorPlaceholder} {
+  & .${constants_2.menuOrganizationClassnames.errorPlaceholder} {
     display: flex;
     gap: ${({ theme }) => theme.spacing(1)};
 
-    height: ${constants_3.PLACEHOLDER_HEIGHT};
+    height: ${constants_2.PLACEHOLDER_HEIGHT};
   }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
@@ -58,7 +57,7 @@ exports.OrganizationsWrapper = styled_1.styled.div `
       justify-content: unset;
     }
 
-    & .${constants_3.menuOrganizationClassnames.errorPlaceholder} {
+    & .${constants_2.menuOrganizationClassnames.errorPlaceholder} {
       gap: ${({ theme }) => theme.spacing(6)};
       justify-content: center;
 
@@ -83,34 +82,6 @@ exports.OrganizationData = (0, styled_1.styled)(Grid_1.Grid) `
 exports.StyledTypography = (0, styled_1.styled)(Typography_1.Typography) `
   color: ${({ theme }) => theme.palette.grey[600]};
 `;
-exports.ButtonWrapper = styled_1.styled.div `
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    position: absolute;
-    z-index: ${({ theme }) => theme.zIndex.appBar - 1};
-    top: ${({ $alertHeight }) => `calc(${$alertHeight}px + ${constants_2.HEADER_HEIGHT_MOBILE}) `};
-    left: 0;
-    
-    /* Необходимо для анимации компонента вместе с sidebar */
-    transform: translateX(-100vw);
-
-    display: flex;
-    flex-direction: column;
-
-    width: 100vw;
-
-    background-color: ${({ theme }) => theme.palette.background.default};
-
-    transition: ${({ theme }) => {
-    return theme.transitions.create(['transform'], {
-        duration: theme.transitions.duration.standard,
-    });
-}};
-
-    &.${constants_3.menuOrganizationClassnames.mobileVisible} {
-      transform: translateX(0);
-    }
-  }
-`;
 exports.StyledPopover = (0, styled_1.styled)(Popover_1.Popover) `
 
   ${({ theme }) => theme.breakpoints.down('sm')} {

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

@@ -61,7 +61,5 @@ export declare const useLogic: <TData extends Organization & Record<string, unkn
     };
     isShowSearchField: boolean;
     isMobile: boolean;
-    classnames: string;
-    alertHeight: number;
 };
 export {};

package/node/components/MenuOrganization/useLogic/useLogic.js

@@ -3,17 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const DashboardContext_1 = require("../../DashboardContext");
-const DashboardSidebarProvider_1 = require("../../DashboardSidebarProvider");
 const personalDataSecurity_1 = require("../../personalDataSecurity");
 const usePopover_1 = require("../../usePopover");
 const useViewportType_1 = require("../../useViewportType");
-const classNames_1 = require("../../utils/classNames");
-const constants_1 = require("../constants");
 const useLogic = ({ organizations = [], onChangeSearch, onChange, currentOrganizationGroupLabel, currentOrganization, groupBy, onClose, onOpen, isOpen: isOpenPopover, isDisabled, disabledReason, isHidePersonalData, action, isLoading, isError, onRetry, renderItem, renderPreview, }) => {
-    const { isLoading: isDashboardLoading, alertHeight } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
+    const { isLoading: isDashboardLoading } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
     const [searchValue, setSearchValue] = (0, react_1.useState)('');
     const [anchorButtonEl, setAnchorButtonEl] = (0, react_1.useState)(null);
-    const { isPinned } = (0, react_1.useContext)(DashboardSidebarProvider_1.DashboardSidebarContext);
     const { isMobile } = (0, useViewportType_1.useViewportType)();
     const { onClick, ...restActionProps } = action || {};
     const buttonRef = (0, react_1.useCallback)((node) => {
@@ -67,7 +63,6 @@ const useLogic = ({ organizations = [], onChangeSearch, onChange, currentOrganiz
     const renderPreviewWrapper = (0, react_1.useMemo)(() => renderPreview
         ? (organization, params) => renderPreview(organization, params)
         : undefined, [renderPreview]);
-    const classnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)({ [constants_1.menuOrganizationClassnames.mobileVisible]: isPinned }), [isPinned]);
     return {
         actionButtonProps: {
             onClick: handleActionClick,
@@ -112,8 +107,6 @@ const useLogic = ({ organizations = [], onChangeSearch, onChange, currentOrganiz
         },
         isShowSearchField,
         isMobile,
-        classnames,
-        alertHeight,
     };
 };
 exports.useLogic = useLogic;

package/node/components/PageHeader/Title/Title.js

@@ -9,6 +9,6 @@ const Title = ({ backButton, title, isLoading, hasDescription, hasBreadcrumbs, }
     if (!title && isLoading) {
         return (0, jsx_runtime_1.jsx)(styles_1.StyledSkeleton, { height: 20, width: 280, variant: "rounded" });
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [backButton && ((0, jsx_runtime_1.jsx)(styles_1.BackButton, { ...backButton, variant: "outlined", color: "grey", size: "medium", children: (0, jsx_runtime_1.jsx)(ArrowLOutlineMd_1.ArrowLOutlineMd, {}) })), typeof title === 'string' ? ((0, jsx_runtime_1.jsx)(styles_1.TitleWrapper, { component: "h1", variant: "h3", "$hasDescription": hasDescription, "$hasBreadcrumbs": hasBreadcrumbs, children: (0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { component: "div", variant: "inherit", children: title }) })) : ((0, jsx_runtime_1.jsx)(styles_1.TitleWrapper, { component: "div", role: "heading", variant: "h3", "aria-level": 1, "$hasDescription": hasDescription, "$hasBreadcrumbs": hasBreadcrumbs, children: title }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [backButton && ((0, jsx_runtime_1.jsx)(styles_1.BackButton, { ...backButton, variant: "outlined", color: "grey", size: "medium", children: (0, jsx_runtime_1.jsx)(ArrowLOutlineMd_1.ArrowLOutlineMd, {}) })), typeof title === 'string' ? ((0, jsx_runtime_1.jsx)(styles_1.TitleWrapper, { component: "h1", variant: "h3", "$hasDescription": hasDescription || isLoading, "$hasBreadcrumbs": hasBreadcrumbs, children: (0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { component: "div", variant: "inherit", children: title }) })) : ((0, jsx_runtime_1.jsx)(styles_1.TitleWrapper, { component: "div", role: "heading", variant: "h3", "aria-level": 1, "$hasDescription": hasDescription, "$hasBreadcrumbs": hasBreadcrumbs, children: title }))] }));
 };
 exports.Title = Title;

package/package.json

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