@astral/ui 4.23.0 → 4.24.1

package/components/BottomDrawer/BottomDrawer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CrossOutlineMd } from '../../icons/CrossOutlineMd';
 import { IconButton } from '../IconButton';
-import { DEFAULT_HEADER_HEIGHT } from './constants';
+import { bottomDrawerClassnames, DEFAULT_HEADER_HEIGHT } from './constants';
 import { Body, Header, HeaderTitle, StyledDrawer } from './styles';
 export const BottomDrawer = ({ title, drawerHeaderHeight = DEFAULT_HEADER_HEIGHT, children, onClose, ...props }) => {
     const handleClose = (event) => {
@@ -9,5 +9,5 @@ export const BottomDrawer = ({ title, drawerHeaderHeight = DEFAULT_HEADER_HEIGHT
             onClose(event, 'escapeKeyDown');
         }
     };
-    return (_jsxs(StyledDrawer, { ...props, anchor: "bottom", onClose: onClose, children: [_jsxs(Header, { drawerHeaderHeight: drawerHeaderHeight, children: [_jsx(HeaderTitle, { variant: "h6", noWrap: true, children: title }), _jsx(IconButton, { variant: "text", onClick: handleClose, size: "large", children: _jsx(CrossOutlineMd, {}) })] }), _jsx(Body, { children: children })] }));
+    return (_jsxs(StyledDrawer, { ...props, anchor: "bottom", onClose: onClose, children: [_jsxs(Header, { drawerHeaderHeight: drawerHeaderHeight, children: [_jsx(HeaderTitle, { variant: "h6", noWrap: true, children: title }), _jsx(IconButton, { variant: "text", onClick: handleClose, size: "large", children: _jsx(CrossOutlineMd, {}) })] }), _jsx(Body, { className: bottomDrawerClassnames.content, children: children })] }));
 };

package/components/BottomDrawer/constants.d.ts

@@ -1,2 +1,5 @@
 export declare const OFFSET_TOP_SCREEN = "16px";
 export declare const DEFAULT_HEADER_HEIGHT = 56;
+export declare const bottomDrawerClassnames: {
+    content: string;
+};

package/components/BottomDrawer/constants.js

@@ -1,2 +1,6 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
 export const OFFSET_TOP_SCREEN = '16px';
 export const DEFAULT_HEADER_HEIGHT = 56;
+export const bottomDrawerClassnames = {
+    content: createUIKitClassname('bottom-drawer__content'),
+};

package/components/BottomDrawer/index.d.ts

@@ -1 +1,2 @@
 export * from './BottomDrawer';
+export { bottomDrawerClassnames } from './constants';

package/components/BottomDrawer/index.js

@@ -1 +1,2 @@
 export * from './BottomDrawer';
+export { bottomDrawerClassnames } from './constants';

package/components/BottomDrawer/public.d.ts

@@ -1 +1,2 @@
 export * from './BottomDrawer';
+export { bottomDrawerClassnames } from './constants';

package/components/BottomDrawer/public.js

@@ -1 +1,2 @@
 export * from './BottomDrawer';
+export { bottomDrawerClassnames } from './constants';

package/components/DashboardContext/DashboardContext.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="react" />
+import { type RefObject } from 'react';
 export type DashboardContextProps = {
     isFocusedMode: boolean;
     setAlertElement?: (element: HTMLElement | null) => void;
     alertHeight: number;
     isLoading: boolean;
+    hasMenuOrganizationRef: RefObject<boolean | null>;
 };
 export declare const DashboardContext: import("react").Context<DashboardContextProps>;

package/components/DashboardContext/DashboardContext.js

@@ -1,6 +1,7 @@
-import { createContext } from 'react';
+import { createContext, createRef } from 'react';
 export const DashboardContext = createContext({
     isFocusedMode: false,
     alertHeight: 0,
     isLoading: false,
+    hasMenuOrganizationRef: createRef(),
 });

package/components/DashboardContext/DashboardContextProvider/DashboardContextProvider.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { DashboardContext, } from '../DashboardContext';
 export const DashboardContextProvider = ({ children, isFocusedMode, isLoading, }) => {
     const [alertElement, setAlertElement] = useState(null);
     const [alertHeight, setAlertHeight] = useState(0);
+    const hasMenuOrganizationRef = useRef(false);
     useEffect(() => {
         if (!alertElement) {
             setAlertHeight(0);
@@ -18,5 +19,11 @@ export const DashboardContextProvider = ({ children, isFocusedMode, isLoading, }
         resizeObserver.observe(alertElement);
         return () => resizeObserver.disconnect();
     }, [alertElement]);
-    return (_jsx(DashboardContext.Provider, { value: { isFocusedMode, setAlertElement, alertHeight, isLoading }, children: children }));
+    return (_jsx(DashboardContext.Provider, { value: {
+            isFocusedMode,
+            setAlertElement,
+            alertHeight,
+            isLoading,
+            hasMenuOrganizationRef,
+        }, children: children }));
 };

package/components/DashboardLayout/Header/Header.js

@@ -1,14 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useContext } from 'react';
+import { forwardRef } from 'react';
 import { CrossOutlineMd } from '../../../icons/CrossOutlineMd';
 import { MenuOnOutlineMd } from '../../../icons/MenuOnOutlineMd';
 import { QuitOutlineMd } from '../../../icons/QuitOutlineMd';
 import { Button } from '../../Button';
-import { DashboardContext } from '../../DashboardContext';
-import { DashboardSidebarContext } from '../../DashboardSidebarProvider';
 import { Product } from '../../Product';
 import { Profile } from '../../Profile';
-import { useViewportType } from '../../useViewportType';
 import { getInertProps } from '../../utils/getInertProps';
 import { dashboardLayoutHeaderClassnames } from './constants';
 import { ExitButton, HeaderContent, HeaderContentSection, HeaderRoot, HeaderSection, MobileSidebarTogglerWrapper, ProductSwitcherWrapper, ProfileWrapper, } from './styles';
@@ -18,9 +15,6 @@ import { useLogic } from './useLogic';
  */
 export const Header = forwardRef((props, ref) => {
     const { productSwitcher: ProductSwitcher, product, profile, menuOrganization, children, } = props;
-    const { isShowExitButton, isShowProfile } = useLogic(props);
-    const { isFocusedMode, isLoading } = useContext(DashboardContext);
-    const { collapsedIn, onToggleSidebar } = useContext(DashboardSidebarContext);
-    const { isMobile } = useViewportType();
-    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() }) }), _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, } = 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, {}) })] })] }) }));
 });

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

@@ -1,5 +1,10 @@
 import { type HeaderProps } from '../types';
-export declare const useLogic: ({ profile }: HeaderProps) => {
+export declare const useLogic: ({ profile, menuOrganization }: HeaderProps) => {
     isShowExitButton: boolean;
     isShowProfile: boolean;
+    isMobile: boolean;
+    isFocusedMode: boolean;
+    isLoading: boolean;
+    collapsedIn: boolean;
+    onToggleSidebar: (newValue?: boolean | undefined) => void;
 };

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

@@ -1,8 +1,24 @@
+import { useContext, useEffect } from 'react';
+import { DashboardContext } from '../../../DashboardContext';
+import { DashboardSidebarContext } from '../../../DashboardSidebarProvider';
 import { useViewportType } from '../../../useViewportType';
-export const useLogic = ({ profile }) => {
+export const useLogic = ({ profile, menuOrganization }) => {
+    const { isFocusedMode, isLoading, hasMenuOrganizationRef } = useContext(DashboardContext);
+    const { collapsedIn, onToggleSidebar } = useContext(DashboardSidebarContext);
+    useEffect(() => {
+        hasMenuOrganizationRef.current = Boolean(menuOrganization);
+    }, [menuOrganization]);
     const { isMobile } = useViewportType();
     const hasMenu = Boolean(profile?.menu || profile?.menuList);
     const isShowProfile = (Boolean(profile) && !isMobile) || (hasMenu && isMobile);
     const isShowExitButton = isMobile && !hasMenu && Boolean(profile?.exitButton);
-    return { isShowExitButton, isShowProfile };
+    return {
+        isShowExitButton,
+        isShowProfile,
+        isMobile,
+        isFocusedMode,
+        isLoading,
+        collapsedIn,
+        onToggleSidebar,
+    };
 };

package/components/DashboardSidebar/DashboardSidebar.js

@@ -3,9 +3,7 @@ import { forwardRef } from 'react';
 import { DashboardSidebarSkeleton } from '../DashboardSidebarSkeleton';
 import { NavMenu } from '../NavMenu';
 import { PinButton } from '../PinButton';
-import { classNames } from '../utils/classNames';
 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';
@@ -13,9 +11,9 @@ import { useLogic } from './useLogic';
  * Основной sidebar приложения
  */
 export const DashboardSidebar = forwardRef((props, ref) => {
-    const { isPinned, isMobile, collapsedIn, onTogglePin, onMouseEnter, onMouseLeave, alertHeight, className, menu, header, isLoading, } = useLogic(props);
+    const { isPinned, isMobile, collapsedIn, onTogglePin, onMouseEnter, onMouseLeave, alertHeight, classnames, wrapperClassnames, menu, header, isLoading, } = useLogic(props);
     if (isLoading) {
         return _jsx(DashboardSidebarSkeleton, {});
     }
-    return (_jsx(Wrapper, { "$isPinned": isPinned, "$alertHeight": alertHeight, children: _jsx(SidebarRoot, { ref: ref, "$isPinned": isPinned, "$collapsedIn": collapsedIn, className: classNames(className, dashboardSidebarClassnames.root), 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: 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 }) })] }) }) }));
 });

package/components/DashboardSidebar/constants.d.ts

@@ -1,3 +1,4 @@
 export declare const dashboardSidebarClassnames: {
     root: string;
+    hasMenuOrganization: string;
 };

package/components/DashboardSidebar/constants.js

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

package/components/DashboardSidebar/styles.js

@@ -1,7 +1,9 @@
 import { HEADER_HEIGHT_MOBILE } from '../DashboardLayout/constants';
+import { MOBILE_BUTTON_HEIGHT } from '../MenuOrganization/OrganizationButton';
 import { Paper } from '../Paper';
 import { pinButtonClassnames } from '../PinButton';
 import { styled } from '../styled';
+import { dashboardSidebarClassnames } from './constants';
 export const Wrapper = styled('div', {
     shouldForwardProp: (prop) => !['$isPinned', '$alertHeight'].includes(prop),
 }) `
@@ -29,6 +31,10 @@ export const Wrapper = styled('div', {
         duration: theme.transitions.duration.standard,
     });
 }};
+
+    &.${dashboardSidebarClassnames.hasMenuOrganization} {
+      top: ${({ $alertHeight }) => `calc(${$alertHeight}px + ${HEADER_HEIGHT_MOBILE} + ${MOBILE_BUTTON_HEIGHT}) `};
+    }
   }
 `;
 export const StyledPaper = styled(Paper) `

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

@@ -8,7 +8,6 @@ export declare const useLogic: (props: DashboardSidebarProps) => {
     onMouseEnter: () => void;
     onMouseLeave: () => void;
     alertHeight: number;
-    className: string | undefined;
     menu: {
         items: [key: string, value: {
             icon: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
@@ -28,4 +27,6 @@ export declare const useLogic: (props: DashboardSidebarProps) => {
     };
     header: import("react").ReactNode;
     isLoading: boolean;
+    classnames: string;
+    wrapperClassnames: string;
 };

package/components/DashboardSidebar/useLogic/useLogic.js

@@ -1,14 +1,16 @@
-import { useContext, useEffect, useRef } from 'react';
+import { useContext, useEffect, useMemo, useRef } from 'react';
 import { DashboardContext } from '../../DashboardContext';
 import { dashboardLayoutHeaderClassnames } from '../../DashboardLayout/Header';
 import { dashboardLayoutMainClassnames } from '../../DashboardLayout/Main';
 import { DashboardSidebarContext } from '../../DashboardSidebarProvider';
 import { useTheme } from '../../theme/hooks/useTheme';
 import { useViewportType } from '../../useViewportType';
+import { classNames } from '../../utils/classNames';
+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 } = useContext(DashboardContext);
+    const { alertHeight, isLoading: isDashboardLoading, hasMenuOrganizationRef, } = useContext(DashboardContext);
     const { isMobile } = useViewportType();
     const hoverTimerRef = useRef(null);
     const theme = useTheme();
@@ -78,6 +80,10 @@ export const useLogic = (props) => {
             }
         };
     }, [collapsedIn, isPinned]);
+    const wrapperClassnames = useMemo(() => classNames({
+        [dashboardSidebarClassnames.hasMenuOrganization]: hasMenuOrganizationRef.current,
+    }), [hasMenuOrganizationRef.current]);
+    const classnames = classNames(className, dashboardSidebarClassnames.root);
     return {
         isPinned,
         isMobile,
@@ -86,9 +92,10 @@ export const useLogic = (props) => {
         onMouseEnter,
         onMouseLeave,
         alertHeight,
-        className,
         menu,
         header,
         isLoading: isLoading || isDashboardLoading,
+        classnames,
+        wrapperClassnames,
     };
 };

package/components/MenuOrganization/MenuOrganization.js

@@ -1,25 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button } from '../Button';
 import { ContentState } from '../ContentState';
-import { Popover } from '../Popover';
 import { SearchField } from '../SearchField';
-import { menuOrganizationClassnames } from './constants';
+import { menuOrganizationClassnames, POPOVER_TITLE } from './constants';
 import { MenuOrganizationSkeleton } from './MenuOrganizationSkeleton';
 import { NoData } from './NoData';
 import { OrganizationButton } from './OrganizationButton';
 import { OrganizationList } from './OrganizationList';
 import { OrganizationListSkeleton } from './OrganizationListSkeleton';
-import { ActionWrapper, OrganizationsWrapper, SearchWrapper, StyledTypography, } from './styles';
+import { ActionWrapper, ButtonWrapper, 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 { action, isLoading, isError, onRetry, isComponentLoading, isShowOrganizationList, searchProps, popoverProps, organizationListProps, organizationButtonProps, isShowSearchField, } = useLogic(props);
+    const { actionButtonProps, hasAction, isLoading, isError, onRetry, isComponentLoading, isShowOrganizationList, searchProps, popoverProps, organizationListProps, organizationButtonProps, isShowSearchField, isMobile, classnames, alertHeight, } = useLogic(props);
     if (isComponentLoading) {
         return _jsx(MenuOrganizationSkeleton, {});
     }
-    return (_jsxs(_Fragment, { children: [_jsx(OrganizationButton, { ...organizationButtonProps }), _jsxs(Popover, { ...popoverProps, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, 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(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: {
                                 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,
-                            }, loadingContent: _jsx(OrganizationListSkeleton, {}), children: isShowOrganizationList ? (_jsx(OrganizationList, { ...organizationListProps })) : (_jsx(NoData, {})) }) }), action && (_jsx(ActionWrapper, { children: _jsx(Button, { fullWidth: true, ...action, children: action.text }) }))] })] }));
+                            }, loadingContent: _jsx(OrganizationListSkeleton, {}), children: isShowOrganizationList ? (_jsx(OrganizationList, { ...organizationListProps })) : (_jsx(NoData, {})) }) }), hasAction && (_jsx(ActionWrapper, { children: _jsx(Button, { fullWidth: true, ...actionButtonProps, size: isMobile ? 'large' : 'medium', children: actionButtonProps.text }) }))] })] }));
 };

package/components/MenuOrganization/NoData/styles.js

@@ -6,4 +6,8 @@ export const Wrapper = styled.div `
   justify-content: center;
 
   height: ${PLACEHOLDER_HEIGHT};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    height: 100%;
+  }
 `;

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

@@ -0,0 +1 @@
+export declare const MOBILE_BUTTON_HEIGHT = "68px";

package/components/MenuOrganization/OrganizationButton/constants.js

@@ -0,0 +1 @@
+export const MOBILE_BUTTON_HEIGHT = '68px';

package/components/MenuOrganization/OrganizationButton/index.d.ts

@@ -1 +1,2 @@
 export * from './OrganizationButton';
+export { MOBILE_BUTTON_HEIGHT } from './constants';

package/components/MenuOrganization/OrganizationButton/index.js

@@ -1 +1,2 @@
 export * from './OrganizationButton';
+export { MOBILE_BUTTON_HEIGHT } from './constants';

package/components/MenuOrganization/OrganizationButton/styles.js

@@ -2,6 +2,7 @@ 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;
@@ -22,6 +23,27 @@ export const StyledButton = styled(Button) `
 
     background-color: ${({ theme }) => theme.palette.primary[100]};
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    justify-content: space-between;
+
+    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]};
+    }
+  }
 `;
 export const StyledChevron = styled(Chevron) `
   width: 24px;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const StyledMenuItem: import("../../styled").StyledComponent<import("../..").WithoutEmotionSpecific<Omit<import("@mui/material").MenuItemProps, "component">> & {
+export declare const StyledMenuItem: import("../../styled").StyledComponent<import("../..").WithoutEmotionSpecific<Omit<import("@mui/material/MenuItem").MenuItemProps, "component">> & {
     disabledReason?: string | undefined;
     note?: string | undefined;
     tooltipPlacement?: "bottom" | "left" | "right" | "top" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start" | undefined;

package/components/MenuOrganization/OrganizationItem/styles.js

@@ -1,3 +1,4 @@
+import { menuItemClasses } from '@mui/material/MenuItem';
 import { Button } from '../../Button';
 import { MenuItem } from '../../MenuItem';
 import { styled } from '../../styled';
@@ -6,6 +7,14 @@ export const StyledMenuItem = styled(MenuItem) `
   user-select: ${({ selected }) => (selected ? 'auto' : 'unset')};
 
   padding: ${({ theme }) => theme.microSpacing(3, 6)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.microSpacing(5, 6)};
+
+    &.${menuItemClasses.selected} {
+      padding: ${({ theme }) => theme.microSpacing(3, 6)};
+    }
+  }
 `;
 export const StyledButton = styled(Button) `
   justify-content: flex-start;

package/components/MenuOrganization/OrganizationListSkeleton/styles.js

@@ -6,6 +6,12 @@ export const Item = styled.div `
 
   width: 100%;
   padding: ${({ theme }) => theme.spacing(0, 2)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    gap: ${({ theme }) => theme.spacing(3)};
+
+    padding: ${({ theme }) => theme.spacing(3)};
+  }
 `;
 export const Wrapper = styled.div `
   overflow: hidden;
@@ -15,6 +21,12 @@ export const Wrapper = styled.div `
 
   width: 100%;
   padding: ${({ theme }) => theme.microSpacing(5, 0)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    gap: ${({ theme }) => theme.spacing(2)};
+
+    padding: 0;
+  }
 `;
 export const OrganizationInfoWrapper = styled.div `
   display: flex;

package/components/MenuOrganization/constants.d.ts

@@ -1,6 +1,8 @@
 export declare const DEFAULT_LINK_BUTTON_NAME = "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043A \u0434\u0430\u043D\u043D\u044B\u043C \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438";
+export declare const POPOVER_TITLE = "\u0412\u044B\u0431\u043E\u0440 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438";
 export declare const PLACEHOLDER_HEIGHT = "108px";
 export declare const menuOrganizationClassnames: {
     root: string;
     errorPlaceholder: string;
+    mobileVisible: string;
 };

package/components/MenuOrganization/constants.js

@@ -1,7 +1,9 @@
 import { createUIKitClassname } from '../utils/createUIKitClassname';
 export const DEFAULT_LINK_BUTTON_NAME = 'Перейти к данным организации';
+export const POPOVER_TITLE = 'Выбор организации';
 export const PLACEHOLDER_HEIGHT = '108px';
 export const menuOrganizationClassnames = {
     root: createUIKitClassname('menu-organization'),
     errorPlaceholder: createUIKitClassname('menu-organization__error-placeholder'),
+    mobileVisible: createUIKitClassname('menu-organization_visible'),
 };

package/components/MenuOrganization/styles.d.ts

@@ -25,3 +25,14 @@ 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;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/MenuOrganization/styles.js

@@ -1,4 +1,10 @@
+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';
+import { placeholderClassnames } from '../placeholders/Placeholder';
 import { styled } from '../styled';
 import { Typography } from '../Typography';
 import { menuOrganizationClassnames, PLACEHOLDER_HEIGHT } from './constants';
@@ -6,12 +12,21 @@ export const ActionWrapper = styled.div `
   padding: ${({ theme }) => theme.spacing(2)};
 
   border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(4)};
+  }
 `;
 export const SearchWrapper = styled.div `
   max-width: 300px;
   padding: ${({ theme }) => theme.spacing(2, 3)};
 
   border-bottom: ${({ theme }) => `1px solid ${theme.palette.grey['300']}`};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    max-width: unset;
+    padding: ${({ theme }) => theme.spacing(3, 4)};
+  }
 `;
 export const OrganizationsWrapper = styled.div `
   overflow-y: auto;
@@ -25,6 +40,7 @@ export const OrganizationsWrapper = styled.div `
   max-height: 328px;
 
   & .${menuOrganizationClassnames.errorPlaceholder} {
+    display: flex;
     gap: ${({ theme }) => theme.spacing(1)};
 
     height: ${PLACEHOLDER_HEIGHT};
@@ -32,6 +48,27 @@ export const OrganizationsWrapper = styled.div `
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     width: 100%;
+    height: 100%;
+    max-height: unset;
+
+    & .${loadingPlaceholderClassnames.root} {
+      justify-content: unset;
+    }
+
+    & .${menuOrganizationClassnames.errorPlaceholder} {
+      gap: ${({ theme }) => theme.spacing(6)};
+      justify-content: center;
+
+      height: 100%;
+
+      & .${placeholderClassnames.title} {
+        margin-bottom: unset;
+      }
+
+      & .${placeholderClassnames.footer} {
+        margin-top: unset;
+      }
+    }
   }
 `;
 export const OrganizationData = styled(Grid) `
@@ -43,3 +80,48 @@ 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')} {
+    & .${bottomDrawerClassnames.content} {
+      display: flex;
+      flex-direction: column;
+
+      height: calc(100vh - ${OFFSET_TOP_SCREEN});
+
+      @supports (height: 100dvh) {
+        height: calc(100dvh - ${OFFSET_TOP_SCREEN});
+      }
+
+    }
+  }
+
+`;

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

@@ -1,10 +1,17 @@
-import { type ChangeEvent, type SyntheticEvent } from 'react';
+import { type ChangeEvent, type MouseEvent, type SyntheticEvent } from 'react';
 import { type MenuOrganizationProps, type Organization } from '../types';
 type UseLogicParams<TData extends Organization & Record<string, unknown>> = MenuOrganizationProps<TData>;
 export declare const useLogic: <TData extends Organization & Record<string, unknown>>({ organizations, onChangeSearch, onChange, currentOrganizationGroupLabel, currentOrganization, groupBy, onClose, onOpen, isOpen: isOpenPopover, isDisabled, disabledReason, isHidePersonalData, action, isLoading, isError, onRetry, renderItem, renderPreview, }: UseLogicParams<TData>) => {
-    action: ({
-        text: string;
-    } & Pick<import("../..").ButtonProps, "onClick" | "component" | "href" | "variant" | "endIcon" | "startIcon">) | undefined;
+    actionButtonProps: {
+        text?: string | undefined;
+        component?: import("react").ElementType | undefined;
+        href?: string | undefined;
+        variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
+        endIcon?: import("react").ReactNode;
+        startIcon?: import("react").ReactNode;
+        onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    };
+    hasAction: boolean;
     isLoading: boolean | undefined;
     isError: boolean | undefined;
     onRetry: () => void;
@@ -53,5 +60,8 @@ export declare const useLogic: <TData extends Organization & Record<string, unkn
         hasSearch: boolean;
     };
     isShowSearchField: boolean;
+    isMobile: boolean;
+    classnames: string;
+    alertHeight: number;
 };
 export {};