@astral/ui 4.22.2 → 4.24.0

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 {};

package/components/MenuOrganization/useLogic/useLogic.js

@@ -1,11 +1,18 @@
 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 } = useContext(DashboardContext);
+    const { isLoading: isDashboardLoading, alertHeight } = 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) => {
         if (node) {
             setAnchorButtonEl(node);
@@ -37,6 +44,10 @@ export const useLogic = ({ organizations = [], onChangeSearch, onChange, current
         onChange(organization);
         handleClosePopover();
     };
+    const handleActionClick = (event) => {
+        onClick?.(event);
+        handleClosePopover();
+    };
     const isShowCurrentOrganization = useMemo(() => {
         return (!searchValue.length || filteredOrganization.includes(currentOrganization));
     }, [currentOrganization, filteredOrganization, searchValue.length]);
@@ -53,8 +64,13 @@ 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 {
-        action,
+        actionButtonProps: {
+            onClick: handleActionClick,
+            ...restActionProps,
+        },
+        hasAction: Boolean(action),
         isLoading,
         isError,
         onRetry,
@@ -92,5 +108,8 @@ export const useLogic = ({ organizations = [], onChangeSearch, onChange, current
             hasSearch: isShowSearchField,
         },
         isShowSearchField,
+        isMobile,
+        classnames,
+        alertHeight,
     };
 };

package/components/Popover/Popover.d.ts

@@ -6,4 +6,4 @@ export type PopoverProps = WithoutEmotionSpecific<MuiPopoverProps> & {
      */
     title?: string;
 };
-export declare const Popover: ({ children, onClose, open, title, ...restProps }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Popover: ({ children, onClose, open, title, className, ...restProps }: PopoverProps) => import("react/jsx-runtime").JSX.Element;

package/components/Popover/Popover.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { BottomDrawer } from '../BottomDrawer';
 import { useViewportType } from '../useViewportType';
 import { StyledMuiPopover } from './styles';
-export const Popover = ({ children, onClose, open, title, ...restProps }) => {
+export const Popover = ({ children, onClose, open, title, className, ...restProps }) => {
     const { isMobile } = useViewportType();
     if (isMobile) {
-        return (_jsx(BottomDrawer, { title: title, onClose: onClose, open: open, children: children }));
+        return (_jsx(BottomDrawer, { title: title, onClose: onClose, open: open, className: className, children: children }));
     }
-    return (_jsx(StyledMuiPopover, { open: open, onClose: onClose, ...restProps, children: children }));
+    return (_jsx(StyledMuiPopover, { open: open, onClose: onClose, className: className, ...restProps, children: children }));
 };

package/components/placeholders/Placeholder/Placeholder.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useMemo } from 'react';
 import { ConfigContext } from '../../ConfigProvider';
-import { DESCRIPTION_LEVEL, IMAGE_HEIGHT, IMAGE_WIDTH, TITLE_HEADER_LEVEL, } from './constants';
+import { DESCRIPTION_LEVEL, IMAGE_HEIGHT, IMAGE_WIDTH, placeholderClassnames, TITLE_HEADER_LEVEL, } from './constants';
 import { Image, setDefaultImageStyles, } from './Image';
 import { Description, Footer, InnerContainer, Title, Wrapper } from './styles';
 export const Placeholder = ({ className, title, imgSrc, imgAlt, description, Actions, size = 'small', renderImage, }) => {
@@ -10,5 +10,5 @@ export const Placeholder = ({ className, title, imgSrc, imgAlt, description, Act
     const RenderImage = useMemo(() => (renderImage && setDefaultImageStyles(renderImage)) ||
         (configRenderImage && setDefaultImageStyles(configRenderImage)) ||
         Image, [renderImage, configRenderImage]);
-    return (_jsxs(Wrapper, { "$size": size, className: className, children: [_jsxs(InnerContainer, { "$size": size, children: [imgSrc && (_jsx(RenderImage, { src: imgSrc, alt: imgAlt, width: IMAGE_WIDTH[size], height: IMAGE_HEIGHT[size], size: size })), _jsx(Title, { "$size": size, variant: TITLE_HEADER_LEVEL[size], children: title }), description && (_jsx(Description, { "$size": size, component: "div", variant: DESCRIPTION_LEVEL[size], children: description }))] }), Actions && _jsx(Footer, { children: Actions })] }));
+    return (_jsxs(Wrapper, { "$size": size, className: className, children: [_jsxs(InnerContainer, { "$size": size, children: [imgSrc && (_jsx(RenderImage, { src: imgSrc, alt: imgAlt, width: IMAGE_WIDTH[size], height: IMAGE_HEIGHT[size], size: size })), _jsx(Title, { className: placeholderClassnames.title, "$size": size, variant: TITLE_HEADER_LEVEL[size], children: title }), description && (_jsx(Description, { "$size": size, component: "div", variant: DESCRIPTION_LEVEL[size], children: description }))] }), Actions && (_jsx(Footer, { className: placeholderClassnames.footer, children: Actions }))] }));
 };

package/components/placeholders/Placeholder/constants.d.ts

@@ -15,3 +15,7 @@ export declare const TITLE_HEADER_LEVEL: {
 export declare const DESCRIPTION_LEVEL: {
     readonly [x: string]: "subtitle1" | "body1";
 };
+export declare const placeholderClassnames: {
+    footer: string;
+    title: string;
+};

package/components/placeholders/Placeholder/constants.js

@@ -1,3 +1,4 @@
+import { createUIKitClassname } from '../../utils/createUIKitClassname';
 export const SIZE = {
     Small: 'small',
     Medium: 'medium',
@@ -28,3 +29,7 @@ export const DESCRIPTION_LEVEL = {
     [SIZE.Medium]: 'body1',
     [SIZE.Large]: 'subtitle1',
 };
+export const placeholderClassnames = {
+    footer: createUIKitClassname('placeholder__footer'),
+    title: createUIKitClassname('placeholder__title'),
+};

package/components/placeholders/Placeholder/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Image';
 export * from './Placeholder';
 export * from './types';
+export { placeholderClassnames } from './constants';

package/components/placeholders/Placeholder/index.js

@@ -1,3 +1,4 @@
 export * from './Image';
 export * from './Placeholder';
 export * from './types';
+export { placeholderClassnames } from './constants';

package/components/placeholders/Placeholder/public.d.ts

@@ -1,2 +1,3 @@
+export { placeholderClassnames } from './constants';
 export * from './Placeholder';
 export * from './types';

package/components/placeholders/Placeholder/public.js

@@ -1,2 +1,3 @@
+export { placeholderClassnames } from './constants';
 export * from './Placeholder';
 export * from './types';

package/node/components/BottomDrawer/BottomDrawer.js

@@ -12,6 +12,6 @@ const BottomDrawer = ({ title, drawerHeaderHeight = constants_1.DEFAULT_HEADER_H
             onClose(event, 'escapeKeyDown');
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledDrawer, { ...props, anchor: "bottom", onClose: onClose, children: [(0, jsx_runtime_1.jsxs)(styles_1.Header, { drawerHeaderHeight: drawerHeaderHeight, children: [(0, jsx_runtime_1.jsx)(styles_1.HeaderTitle, { variant: "h6", noWrap: true, children: title }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", onClick: handleClose, size: "large", children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) })] }), (0, jsx_runtime_1.jsx)(styles_1.Body, { children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledDrawer, { ...props, anchor: "bottom", onClose: onClose, children: [(0, jsx_runtime_1.jsxs)(styles_1.Header, { drawerHeaderHeight: drawerHeaderHeight, children: [(0, jsx_runtime_1.jsx)(styles_1.HeaderTitle, { variant: "h6", noWrap: true, children: title }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", onClick: handleClose, size: "large", children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) })] }), (0, jsx_runtime_1.jsx)(styles_1.Body, { className: constants_1.bottomDrawerClassnames.content, children: children })] }));
 };
 exports.BottomDrawer = BottomDrawer;

package/node/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/node/components/BottomDrawer/constants.js

@@ -1,5 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_HEADER_HEIGHT = exports.OFFSET_TOP_SCREEN = void 0;
+exports.bottomDrawerClassnames = exports.DEFAULT_HEADER_HEIGHT = exports.OFFSET_TOP_SCREEN = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.OFFSET_TOP_SCREEN = '16px';
 exports.DEFAULT_HEADER_HEIGHT = 56;
+exports.bottomDrawerClassnames = {
+    content: (0, createUIKitClassname_1.createUIKitClassname)('bottom-drawer__content'),
+};

package/node/components/BottomDrawer/index.d.ts

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

package/node/components/BottomDrawer/index.js

@@ -14,4 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.bottomDrawerClassnames = void 0;
 __exportStar(require("./BottomDrawer"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "bottomDrawerClassnames", { enumerable: true, get: function () { return constants_1.bottomDrawerClassnames; } });

package/node/components/BottomDrawer/public.d.ts

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

package/node/components/BottomDrawer/public.js

@@ -14,4 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.bottomDrawerClassnames = void 0;
 __exportStar(require("./BottomDrawer"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "bottomDrawerClassnames", { enumerable: true, get: function () { return constants_1.bottomDrawerClassnames; } });

package/node/components/BulletList/BulletList.d.ts

@@ -1,6 +1,10 @@
 import { type PropsWithChildren } from 'react';
 export type BulletListProps = PropsWithChildren<{
     className?: string;
+    /**
+     * Флаг для скрытия точек у первых элементов списка каждой строки.
+     */
+    hideFirstBullet?: boolean;
 }>;
 /**
  * Список элементов с маркерами

package/node/components/BulletList/BulletList.js

@@ -2,12 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BulletList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classNames_1 = require("../utils/classNames");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 /**
  * Список элементов с маркерами
  */
 const BulletList = (props) => {
-    const { children, ...restProps } = props;
-    return (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { ...restProps, children: children });
+    const { children, hideFirstBullet, className } = props;
+    const classnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(className, constants_1.bulletListClassnames.root, {
+        [constants_1.bulletListClassnames.hideFirstBullet]: hideFirstBullet,
+    }), [hideFirstBullet]);
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { children: (0, jsx_runtime_1.jsx)(styles_1.List, { className: classnames, children: children }) }));
 };
 exports.BulletList = BulletList;

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

@@ -0,0 +1,4 @@
+export declare const bulletListClassnames: {
+    root: string;
+    hideFirstBullet: string;
+};

package/node/components/BulletList/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bulletListClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.bulletListClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('bullet-list'),
+    hideFirstBullet: (0, createUIKitClassname_1.createUIKitClassname)('bullet-list_hide-first-bullets'),
+};

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

@@ -1,5 +1,9 @@
 /// <reference types="react" />
-export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+export declare const List: 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;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const Wrapper: 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;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/BulletList/styles.js

@@ -1,8 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Wrapper = void 0;
+exports.Wrapper = exports.List = void 0;
 const styled_1 = require("../styled");
 const mixins_1 = require("../styled/mixins");
-exports.Wrapper = (0, styled_1.styled)('ul') `
+const constants_1 = require("./constants");
+exports.List = styled_1.styled.ul `
   ${mixins_1.listContainer};
+
+  &.${constants_1.bulletListClassnames.hideFirstBullet} {
+    margin-left: -${({ theme }) => theme.spacing(5)};
+  }
+`;
+exports.Wrapper = styled_1.styled.div `
+  overflow: hidden;
 `;

package/node/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/node/components/DashboardContext/DashboardContext.js

@@ -6,4 +6,5 @@ exports.DashboardContext = (0, react_1.createContext)({
     isFocusedMode: false,
     alertHeight: 0,
     isLoading: false,
+    hasMenuOrganizationRef: (0, react_1.createRef)(),
 });

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

@@ -7,6 +7,7 @@ const DashboardContext_1 = require("../DashboardContext");
 const DashboardContextProvider = ({ children, isFocusedMode, isLoading, }) => {
     const [alertElement, setAlertElement] = (0, react_1.useState)(null);
     const [alertHeight, setAlertHeight] = (0, react_1.useState)(0);
+    const hasMenuOrganizationRef = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
         if (!alertElement) {
             setAlertHeight(0);
@@ -21,6 +22,12 @@ const DashboardContextProvider = ({ children, isFocusedMode, isLoading, }) => {
         resizeObserver.observe(alertElement);
         return () => resizeObserver.disconnect();
     }, [alertElement]);
-    return ((0, jsx_runtime_1.jsx)(DashboardContext_1.DashboardContext.Provider, { value: { isFocusedMode, setAlertElement, alertHeight, isLoading }, children: children }));
+    return ((0, jsx_runtime_1.jsx)(DashboardContext_1.DashboardContext.Provider, { value: {
+            isFocusedMode,
+            setAlertElement,
+            alertHeight,
+            isLoading,
+            hasMenuOrganizationRef,
+        }, children: children }));
 };
 exports.DashboardContextProvider = DashboardContextProvider;

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

@@ -7,11 +7,8 @@ const CrossOutlineMd_1 = require("../../../icons/CrossOutlineMd");
 const MenuOnOutlineMd_1 = require("../../../icons/MenuOnOutlineMd");
 const QuitOutlineMd_1 = require("../../../icons/QuitOutlineMd");
 const Button_1 = require("../../Button");
-const DashboardContext_1 = require("../../DashboardContext");
-const DashboardSidebarProvider_1 = require("../../DashboardSidebarProvider");
 const Product_1 = require("../../Product");
 const Profile_1 = require("../../Profile");
-const useViewportType_1 = require("../../useViewportType");
 const getInertProps_1 = require("../../utils/getInertProps");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
@@ -21,9 +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 } = (0, useLogic_1.useLogic)(props);
-    const { isFocusedMode, isLoading } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
-    const { collapsedIn, onToggleSidebar } = (0, react_1.useContext)(DashboardSidebarProvider_1.DashboardSidebarContext);
-    const { isMobile } = (0, useViewportType_1.useViewportType)();
-    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() }) }), (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, } = (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, {}) })] })] }) }));
 });

package/node/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/node/components/DashboardLayout/Header/useLogic/useLogic.js

@@ -1,12 +1,28 @@
 "use strict";
 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 useViewportType_1 = require("../../../useViewportType");
-const useLogic = ({ profile }) => {
+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);
+    (0, react_1.useEffect)(() => {
+        hasMenuOrganizationRef.current = Boolean(menuOrganization);
+    }, [menuOrganization]);
     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);
-    return { isShowExitButton, isShowProfile };
+    return {
+        isShowExitButton,
+        isShowProfile,
+        isMobile,
+        isFocusedMode,
+        isLoading,
+        collapsedIn,
+        onToggleSidebar,
+    };
 };
 exports.useLogic = useLogic;

package/node/components/DashboardSidebar/DashboardSidebar.js

@@ -6,9 +6,7 @@ const react_1 = require("react");
 const DashboardSidebarSkeleton_1 = require("../DashboardSidebarSkeleton");
 const NavMenu_1 = require("../NavMenu");
 const PinButton_1 = require("../PinButton");
-const classNames_1 = require("../utils/classNames");
 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");
@@ -16,9 +14,9 @@ const useLogic_1 = require("./useLogic");
  * Основной sidebar приложения
  */
 exports.DashboardSidebar = (0, react_1.forwardRef)((props, ref) => {
-    const { isPinned, isMobile, collapsedIn, onTogglePin, onMouseEnter, onMouseLeave, alertHeight, className, menu, header, isLoading, } = (0, useLogic_1.useLogic)(props);
+    const { isPinned, isMobile, collapsedIn, onTogglePin, onMouseEnter, onMouseLeave, alertHeight, classnames, wrapperClassnames, menu, header, isLoading, } = (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, children: (0, jsx_runtime_1.jsx)(styles_1.SidebarRoot, { ref: ref, "$isPinned": isPinned, "$collapsedIn": collapsedIn, className: (0, classNames_1.classNames)(className, constants_1.dashboardSidebarClassnames.root), 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: 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 }) })] }) }) }));
 });

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

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

package/node/components/DashboardSidebar/constants.js

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

package/node/components/DashboardSidebar/styles.js

@@ -2,9 +2,11 @@
 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 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");
 exports.Wrapper = (0, styled_1.styled)('div', {
     shouldForwardProp: (prop) => !['$isPinned', '$alertHeight'].includes(prop),
 }) `
@@ -32,6 +34,10 @@ exports.Wrapper = (0, styled_1.styled)('div', {
         duration: theme.transitions.duration.standard,
     });
 }};
+
+    &.${constants_2.dashboardSidebarClassnames.hasMenuOrganization} {
+      top: ${({ $alertHeight }) => `calc(${$alertHeight}px + ${constants_1.HEADER_HEIGHT_MOBILE} + ${OrganizationButton_1.MOBILE_BUTTON_HEIGHT}) `};
+    }
   }
 `;
 exports.StyledPaper = (0, styled_1.styled)(Paper_1.Paper) `

package/node/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;
 };