@astral/ui 4.22.2 → 4.24.0

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

@@ -8,10 +8,12 @@ const Main_1 = require("../../DashboardLayout/Main");
 const DashboardSidebarProvider_1 = require("../../DashboardSidebarProvider");
 const useTheme_1 = require("../../theme/hooks/useTheme");
 const useViewportType_1 = require("../../useViewportType");
+const classNames_1 = require("../../utils/classNames");
+const constants_1 = require("../constants");
 const useLogic = (props) => {
     const { className, menu, header, isLoading } = props;
     const { onToggleSidebar, isPinned, onTogglePin, collapsedIn, setIsPopupOpen, } = (0, react_1.useContext)(DashboardSidebarProvider_1.DashboardSidebarContext);
-    const { alertHeight, isLoading: isDashboardLoading } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
+    const { alertHeight, isLoading: isDashboardLoading, hasMenuOrganizationRef, } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
     const { isMobile } = (0, useViewportType_1.useViewportType)();
     const hoverTimerRef = (0, react_1.useRef)(null);
     const theme = (0, useTheme_1.useTheme)();
@@ -81,6 +83,10 @@ const useLogic = (props) => {
             }
         };
     }, [collapsedIn, isPinned]);
+    const wrapperClassnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)({
+        [constants_1.dashboardSidebarClassnames.hasMenuOrganization]: hasMenuOrganizationRef.current,
+    }), [hasMenuOrganizationRef.current]);
+    const classnames = (0, classNames_1.classNames)(className, constants_1.dashboardSidebarClassnames.root);
     return {
         isPinned,
         isMobile,
@@ -89,10 +95,11 @@ const useLogic = (props) => {
         onMouseEnter,
         onMouseLeave,
         alertHeight,
-        className,
         menu,
         header,
         isLoading: isLoading || isDashboardLoading,
+        classnames,
+        wrapperClassnames,
     };
 };
 exports.useLogic = useLogic;

package/node/components/MenuOrganization/MenuOrganization.js

@@ -4,7 +4,6 @@ exports.MenuOrganization = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Button_1 = require("../Button");
 const ContentState_1 = require("../ContentState");
-const Popover_1 = require("../Popover");
 const SearchField_1 = require("../SearchField");
 const constants_1 = require("./constants");
 const MenuOrganizationSkeleton_1 = require("./MenuOrganizationSkeleton");
@@ -16,14 +15,14 @@ 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 { action, isLoading, isError, onRetry, isComponentLoading, isShowOrganizationList, searchProps, popoverProps, organizationListProps, organizationButtonProps, isShowSearchField, } = (0, useLogic_1.useLogic)(props);
+    const { actionButtonProps, hasAction, isLoading, isError, onRetry, isComponentLoading, isShowOrganizationList, searchProps, popoverProps, organizationListProps, organizationButtonProps, isShowSearchField, isMobile, classnames, alertHeight, } = (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)(OrganizationButton_1.OrganizationButton, { ...organizationButtonProps }), (0, jsx_runtime_1.jsxs)(Popover_1.Popover, { ...popoverProps, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, 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)(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: {
                                 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,
-                            }, loadingContent: (0, jsx_runtime_1.jsx)(OrganizationListSkeleton_1.OrganizationListSkeleton, {}), children: isShowOrganizationList ? ((0, jsx_runtime_1.jsx)(OrganizationList_1.OrganizationList, { ...organizationListProps })) : ((0, jsx_runtime_1.jsx)(NoData_1.NoData, {})) }) }), action && ((0, jsx_runtime_1.jsx)(styles_1.ActionWrapper, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { fullWidth: true, ...action, children: action.text }) }))] })] }));
+                            }, loadingContent: (0, jsx_runtime_1.jsx)(OrganizationListSkeleton_1.OrganizationListSkeleton, {}), children: isShowOrganizationList ? ((0, jsx_runtime_1.jsx)(OrganizationList_1.OrganizationList, { ...organizationListProps })) : ((0, jsx_runtime_1.jsx)(NoData_1.NoData, {})) }) }), hasAction && ((0, jsx_runtime_1.jsx)(styles_1.ActionWrapper, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { fullWidth: true, ...actionButtonProps, size: isMobile ? 'large' : 'medium', children: actionButtonProps.text }) }))] })] }));
 };
 exports.MenuOrganization = MenuOrganization;

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

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

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MOBILE_BUTTON_HEIGHT = void 0;
+exports.MOBILE_BUTTON_HEIGHT = '68px';

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

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

package/node/components/MenuOrganization/OrganizationButton/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.MOBILE_BUTTON_HEIGHT = void 0;
 __exportStar(require("./OrganizationButton"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "MOBILE_BUTTON_HEIGHT", { enumerable: true, get: function () { return constants_1.MOBILE_BUTTON_HEIGHT; } });

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

@@ -5,6 +5,7 @@ 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;
@@ -25,6 +26,27 @@ exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
 
     background-color: ${({ theme }) => theme.palette.primary[100]};
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    justify-content: space-between;
+
+    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]};
+    }
+  }
 `;
 exports.StyledChevron = (0, styled_1.styled)(Chevron_1.Chevron) `
   width: 24px;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const StyledMenuItem: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../..").WithoutEmotionSpecific<Omit<import("@mui/material").MenuItemProps, "component">> & {
+export declare const StyledMenuItem: import("@emotion/styled/dist/declarations/src/types").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/node/components/MenuOrganization/OrganizationItem/styles.js

@@ -1,14 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledButton = exports.StyledMenuItem = void 0;
+const MenuItem_1 = require("@mui/material/MenuItem");
 const Button_1 = require("../../Button");
-const MenuItem_1 = require("../../MenuItem");
+const MenuItem_2 = require("../../MenuItem");
 const styled_1 = require("../../styled");
-exports.StyledMenuItem = (0, styled_1.styled)(MenuItem_1.MenuItem) `
+exports.StyledMenuItem = (0, styled_1.styled)(MenuItem_2.MenuItem) `
   cursor: ${({ selected }) => (selected ? 'auto' : 'pointer')};
   user-select: ${({ selected }) => (selected ? 'auto' : 'unset')};
 
   padding: ${({ theme }) => theme.microSpacing(3, 6)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.microSpacing(5, 6)};
+
+    &.${MenuItem_1.menuItemClasses.selected} {
+      padding: ${({ theme }) => theme.microSpacing(3, 6)};
+    }
+  }
 `;
 exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
   justify-content: flex-start;

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

@@ -9,6 +9,12 @@ exports.Item = styled_1.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)};
+  }
 `;
 exports.Wrapper = styled_1.styled.div `
   overflow: hidden;
@@ -18,6 +24,12 @@ exports.Wrapper = styled_1.styled.div `
 
   width: 100%;
   padding: ${({ theme }) => theme.microSpacing(5, 0)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    gap: ${({ theme }) => theme.spacing(2)};
+
+    padding: 0;
+  }
 `;
 exports.OrganizationInfoWrapper = styled_1.styled.div `
   display: flex;

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

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.menuOrganizationClassnames = exports.PLACEHOLDER_HEIGHT = exports.DEFAULT_LINK_BUTTON_NAME = void 0;
+exports.menuOrganizationClassnames = exports.PLACEHOLDER_HEIGHT = exports.POPOVER_TITLE = exports.DEFAULT_LINK_BUTTON_NAME = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.DEFAULT_LINK_BUTTON_NAME = 'Перейти к данным организации';
+exports.POPOVER_TITLE = 'Выбор организации';
 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'),
 };

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

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

package/node/components/MenuOrganization/styles.js

@@ -1,20 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledTypography = exports.OrganizationData = exports.OrganizationsWrapper = exports.SearchWrapper = exports.ActionWrapper = void 0;
+exports.StyledPopover = exports.ButtonWrapper = 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_1 = require("./constants");
+const constants_3 = require("./constants");
 exports.ActionWrapper = styled_1.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)};
+  }
 `;
 exports.SearchWrapper = styled_1.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)};
+  }
 `;
 exports.OrganizationsWrapper = styled_1.styled.div `
   overflow-y: auto;
@@ -24,17 +39,39 @@ exports.OrganizationsWrapper = styled_1.styled.div `
 
   box-sizing: ${({ $isLoading }) => ($isLoading ? 'content-box' : 'inherit')};
   width: 300px;
-  min-height: ${({ $isLoading }) => ($isLoading ? constants_1.PLACEHOLDER_HEIGHT : '64px')};
+  min-height: ${({ $isLoading }) => ($isLoading ? constants_3.PLACEHOLDER_HEIGHT : '64px')};
   max-height: 328px;
 
-  & .${constants_1.menuOrganizationClassnames.errorPlaceholder} {
+  & .${constants_3.menuOrganizationClassnames.errorPlaceholder} {
+    display: flex;
     gap: ${({ theme }) => theme.spacing(1)};
 
-    height: ${constants_1.PLACEHOLDER_HEIGHT};
+    height: ${constants_3.PLACEHOLDER_HEIGHT};
   }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     width: 100%;
+    height: 100%;
+    max-height: unset;
+
+    & .${LoadingPlaceholder_1.loadingPlaceholderClassnames.root} {
+      justify-content: unset;
+    }
+
+    & .${constants_3.menuOrganizationClassnames.errorPlaceholder} {
+      gap: ${({ theme }) => theme.spacing(6)};
+      justify-content: center;
+
+      height: 100%;
+
+      & .${Placeholder_1.placeholderClassnames.title} {
+        margin-bottom: unset;
+      }
+
+      & .${Placeholder_1.placeholderClassnames.footer} {
+        margin-top: unset;
+      }
+    }
   }
 `;
 exports.OrganizationData = (0, styled_1.styled)(Grid_1.Grid) `
@@ -46,3 +83,48 @@ 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')} {
+    & .${BottomDrawer_1.bottomDrawerClassnames.content} {
+      display: flex;
+      flex-direction: column;
+
+      height: calc(100vh - ${constants_1.OFFSET_TOP_SCREEN});
+
+      @supports (height: 100dvh) {
+        height: calc(100dvh - ${constants_1.OFFSET_TOP_SCREEN});
+      }
+
+    }
+  }
+
+`;

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

@@ -3,12 +3,19 @@ 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 } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
+    const { isLoading: isDashboardLoading, alertHeight } = (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) => {
         if (node) {
             setAnchorButtonEl(node);
@@ -40,6 +47,10 @@ const useLogic = ({ organizations = [], onChangeSearch, onChange, currentOrganiz
         onChange(organization);
         handleClosePopover();
     };
+    const handleActionClick = (event) => {
+        onClick?.(event);
+        handleClosePopover();
+    };
     const isShowCurrentOrganization = (0, react_1.useMemo)(() => {
         return (!searchValue.length || filteredOrganization.includes(currentOrganization));
     }, [currentOrganization, filteredOrganization, searchValue.length]);
@@ -56,8 +67,13 @@ 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 {
-        action,
+        actionButtonProps: {
+            onClick: handleActionClick,
+            ...restActionProps,
+        },
+        hasAction: Boolean(action),
         isLoading,
         isError,
         onRetry,
@@ -95,6 +111,9 @@ const useLogic = ({ organizations = [], onChangeSearch, onChange, currentOrganiz
             hasSearch: isShowSearchField,
         },
         isShowSearchField,
+        isMobile,
+        classnames,
+        alertHeight,
     };
 };
 exports.useLogic = useLogic;

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

@@ -5,11 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const BottomDrawer_1 = require("../BottomDrawer");
 const useViewportType_1 = require("../useViewportType");
 const styles_1 = require("./styles");
-const Popover = ({ children, onClose, open, title, ...restProps }) => {
+const Popover = ({ children, onClose, open, title, className, ...restProps }) => {
     const { isMobile } = (0, useViewportType_1.useViewportType)();
     if (isMobile) {
-        return ((0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { title: title, onClose: onClose, open: open, children: children }));
+        return ((0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { title: title, onClose: onClose, open: open, className: className, children: children }));
     }
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledMuiPopover, { open: open, onClose: onClose, ...restProps, children: children }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledMuiPopover, { open: open, onClose: onClose, className: className, ...restProps, children: children }));
 };
 exports.Popover = Popover;

package/node/components/placeholders/Placeholder/Placeholder.js

@@ -13,6 +13,6 @@ const Placeholder = ({ className, title, imgSrc, imgAlt, description, Actions, s
     const RenderImage = (0, react_1.useMemo)(() => (renderImage && (0, Image_1.setDefaultImageStyles)(renderImage)) ||
         (configRenderImage && (0, Image_1.setDefaultImageStyles)(configRenderImage)) ||
         Image_1.Image, [renderImage, configRenderImage]);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$size": size, className: className, children: [(0, jsx_runtime_1.jsxs)(styles_1.InnerContainer, { "$size": size, children: [imgSrc && ((0, jsx_runtime_1.jsx)(RenderImage, { src: imgSrc, alt: imgAlt, width: constants_1.IMAGE_WIDTH[size], height: constants_1.IMAGE_HEIGHT[size], size: size })), (0, jsx_runtime_1.jsx)(styles_1.Title, { "$size": size, variant: constants_1.TITLE_HEADER_LEVEL[size], children: title }), description && ((0, jsx_runtime_1.jsx)(styles_1.Description, { "$size": size, component: "div", variant: constants_1.DESCRIPTION_LEVEL[size], children: description }))] }), Actions && (0, jsx_runtime_1.jsx)(styles_1.Footer, { children: Actions })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$size": size, className: className, children: [(0, jsx_runtime_1.jsxs)(styles_1.InnerContainer, { "$size": size, children: [imgSrc && ((0, jsx_runtime_1.jsx)(RenderImage, { src: imgSrc, alt: imgAlt, width: constants_1.IMAGE_WIDTH[size], height: constants_1.IMAGE_HEIGHT[size], size: size })), (0, jsx_runtime_1.jsx)(styles_1.Title, { className: constants_1.placeholderClassnames.title, "$size": size, variant: constants_1.TITLE_HEADER_LEVEL[size], children: title }), description && ((0, jsx_runtime_1.jsx)(styles_1.Description, { "$size": size, component: "div", variant: constants_1.DESCRIPTION_LEVEL[size], children: description }))] }), Actions && ((0, jsx_runtime_1.jsx)(styles_1.Footer, { className: constants_1.placeholderClassnames.footer, children: Actions }))] }));
 };
 exports.Placeholder = Placeholder;

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DESCRIPTION_LEVEL = exports.TITLE_HEADER_LEVEL = exports.MAX_INNER_WIDTH = exports.IMAGE_HEIGHT = exports.IMAGE_WIDTH = exports.SIZE = void 0;
+exports.placeholderClassnames = exports.DESCRIPTION_LEVEL = exports.TITLE_HEADER_LEVEL = exports.MAX_INNER_WIDTH = exports.IMAGE_HEIGHT = exports.IMAGE_WIDTH = exports.SIZE = void 0;
+const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
 exports.SIZE = {
     Small: 'small',
     Medium: 'medium',
@@ -31,3 +32,7 @@ exports.DESCRIPTION_LEVEL = {
     [exports.SIZE.Medium]: 'body1',
     [exports.SIZE.Large]: 'subtitle1',
 };
+exports.placeholderClassnames = {
+    footer: (0, createUIKitClassname_1.createUIKitClassname)('placeholder__footer'),
+    title: (0, createUIKitClassname_1.createUIKitClassname)('placeholder__title'),
+};

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

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

package/node/components/placeholders/Placeholder/index.js

@@ -14,6 +14,9 @@ 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.placeholderClassnames = void 0;
 __exportStar(require("./Image"), exports);
 __exportStar(require("./Placeholder"), exports);
 __exportStar(require("./types"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "placeholderClassnames", { enumerable: true, get: function () { return constants_1.placeholderClassnames; } });

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

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

package/node/components/placeholders/Placeholder/public.js

@@ -14,5 +14,8 @@ 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.placeholderClassnames = void 0;
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "placeholderClassnames", { enumerable: true, get: function () { return constants_1.placeholderClassnames; } });
 __exportStar(require("./Placeholder"), exports);
 __exportStar(require("./types"), exports);

package/package.json

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