@astral/ui 4.51.0 → 4.52.1

package/components/DatePicker/useLogic/useLogic.js

@@ -4,7 +4,6 @@ import { usePopover } from '../../usePopover';
 import { useViewportType } from '../../useViewportType';
 import { DEFAULT_DATE_MASK } from '../constants';
 import { useDatePickerOptions } from '../hooks/useDatePickerOptions';
-import { useMaskedValue } from '../hooks/useMaskedValue';
 import { DEFAULT_MAX_DATE, DEFAULT_MIN_DATE } from '../MinMaxDateContext';
 export const useLogic = ({ label, value, maxDate = DEFAULT_MAX_DATE, minDate = DEFAULT_MIN_DATE, mask = DEFAULT_DATE_MASK, onOpen, onClose, onBlur, onChange, forwardedRef, }) => {
     const ref = useForwardedRef(forwardedRef);
@@ -12,21 +11,11 @@ export const useLogic = ({ label, value, maxDate = DEFAULT_MAX_DATE, minDate = D
     const { isOpen, actions } = usePopover();
     const { open, close } = actions;
     const { isMobile } = useViewportType();
-    const { maskedValue } = useMaskedValue({
-        currentValue: value,
-        mask,
-        onChangeValue: onChange,
-    });
     const isTitleShow = isMobile && typeof label === 'string';
     const handleOpen = (event) => {
         onOpen?.();
         open(event);
     };
-    const handleClose = () => {
-        onBlur?.();
-        onClose?.();
-        close();
-    };
     const handleDayPick = (date) => {
         if (isMobile) {
             setSelectedDate(date);
@@ -39,7 +28,7 @@ export const useLogic = ({ label, value, maxDate = DEFAULT_MAX_DATE, minDate = D
             onChange?.(date);
         }
     };
-    const { onAccept, inputProps: calculatedInputProps, pickerProps, } = useDatePickerOptions({
+    const { onAccept, inputProps: calculatedInputProps, pickerProps, onMaskedValueBlur, } = useDatePickerOptions({
         currentValue: value,
         maxDate,
         minDate,
@@ -47,6 +36,22 @@ export const useLogic = ({ label, value, maxDate = DEFAULT_MAX_DATE, minDate = D
         onDatePick: handleDayPick,
         onChange: handleChange,
     });
+    /** Blur: неполный ввод -Invalid Date в onChange (при isMobile onChange не шлём), потом внешний onBlur. */
+    const flushMaskedValueAndCallOnBlur = () => {
+        onMaskedValueBlur();
+        onBlur?.();
+    };
+    function handleClose() {
+        flushMaskedValueAndCallOnBlur();
+        onClose?.();
+        close();
+    }
+    const handleInputBlur = () => {
+        if (isOpen) {
+            return;
+        }
+        flushMaskedValueAndCallOnBlur();
+    };
     const handleConfirm = () => {
         onChange?.(selectedDate);
         handleClose();
@@ -58,7 +63,8 @@ export const useLogic = ({ label, value, maxDate = DEFAULT_MAX_DATE, minDate = D
         title: isTitleShow ? label : undefined,
     };
     const DatePickerInputProps = {
-        value: isMobile ? maskedValue : calculatedInputProps.value,
+        value: calculatedInputProps.value,
+        onBlur: handleInputBlur,
     };
     const confirmButtonProps = {
         onClick: handleConfirm,

package/components/DateRangePicker/useLogic/useLogic.d.ts

@@ -7,12 +7,14 @@ export declare const useLogic: ({ value, minDate, maxDate, mask, onChange, onOpe
         ref: import("react").RefObject<HTMLInputElement | null>;
         value: string;
         onAccept: (_: string, maskRef: IMask.InputMask<IMask.AnyMaskedOptions>) => void;
+        onBlur: () => void;
         onClick: (e: SyntheticEvent) => void;
     };
     endDatePickerInputProps: {
         ref: import("react").RefObject<HTMLInputElement | null>;
         value: string;
         onAccept: (_: string, maskRef: IMask.InputMask<IMask.AnyMaskedOptions>) => void;
+        onBlur: () => void;
         onClick: (e: SyntheticEvent) => void;
     };
     popoverHoveredContextProviderProps: {

package/components/DateRangePicker/useLogic/useLogic.js

@@ -2,8 +2,9 @@ import { useEffect, useRef, useState, } from 'react';
 import { DEFAULT_DATE_MASK, DEFAULT_MAX_DATE, DEFAULT_MIN_DATE, useMaskedValue, useSelectedBaseDate, } from '../../DatePicker';
 import { useForwardedRef } from '../../useForwardedRef';
 import { usePopover } from '../../usePopover';
+import { isMaskedDateSyntacticallyComplete } from '../../utils/date';
 import { useBaseRangeDates } from './hooks';
-import { getBoundaryDate, isMaskedDateSyntacticallyComplete } from './utils';
+import { getBoundaryDate } from './utils';
 export const useLogic = ({ value, minDate = DEFAULT_MIN_DATE, maxDate = DEFAULT_MAX_DATE, mask = DEFAULT_DATE_MASK, onChange, onOpen, onClose, onBlur, }, forwardedRef) => {
     const ref = useForwardedRef(forwardedRef);
     const startInputRef = useRef(null);
@@ -65,12 +66,12 @@ export const useLogic = ({ value, minDate = DEFAULT_MIN_DATE, maxDate = DEFAULT_
         }
         onChange?.({ ...value, end: endDateValue });
     };
-    const { maskedValue: startMaskedValue, onMaskedValueChange: onMaskedStartValueChange, onMaskedDateChange: onMaskedStartDateChange, } = useMaskedValue({
+    const { maskedValue: startMaskedValue, onMaskedValueChange: onMaskedStartValueChange, onMaskedValueBlur: onMaskedStartValueBlur, onMaskedDateChange: onMaskedStartDateChange, } = useMaskedValue({
         currentValue: value?.start,
         mask,
         onChangeValue: handleChangeStartDate,
     });
-    const { maskedValue: endMaskedValue, onMaskedValueChange: onMaskedEndValueChange, onMaskedDateChange: onMaskedEndDateChange, } = useMaskedValue({
+    const { maskedValue: endMaskedValue, onMaskedValueChange: onMaskedEndValueChange, onMaskedValueBlur: onMaskedEndValueBlur, onMaskedDateChange: onMaskedEndDateChange, } = useMaskedValue({
         currentValue: value?.end,
         mask,
         onChangeValue: handleChangeEndDate,
@@ -79,11 +80,32 @@ export const useLogic = ({ value, minDate = DEFAULT_MIN_DATE, maxDate = DEFAULT_
         onOpen?.();
         open(event);
     };
+    const flushActiveMaskedValueOnClose = () => {
+        if (activeInput === 'startDate') {
+            onMaskedStartValueBlur();
+        }
+        if (activeInput === 'endDate') {
+            onMaskedEndValueBlur();
+        }
+    };
     const handleClose = () => {
+        flushActiveMaskedValueOnClose();
         onBlur?.();
         onClose?.();
         close();
     };
+    const handleStartInputBlur = () => {
+        if (isOpen) {
+            return;
+        }
+        onMaskedStartValueBlur();
+    };
+    const handleEndInputBlur = () => {
+        if (isOpen) {
+            return;
+        }
+        onMaskedEndValueBlur();
+    };
     const handleClickStartInput = (e) => {
         setActiveInput('startDate');
         startInputRef.current?.focus();
@@ -138,12 +160,14 @@ export const useLogic = ({ value, minDate = DEFAULT_MIN_DATE, maxDate = DEFAULT_
             ref: startInputRef,
             value: startMaskedValue,
             onAccept: handleAcceptStart,
+            onBlur: handleStartInputBlur,
             onClick: handleClickStartInput,
         },
         endDatePickerInputProps: {
             ref: endInputRef,
             value: endMaskedValue,
             onAccept: handleAcceptEnd,
+            onBlur: handleEndInputBlur,
             onClick: handleClickEndInput,
         },
         popoverHoveredContextProviderProps: {

package/components/DateRangePicker/useLogic/utils/index.d.ts

@@ -1,2 +1 @@
 export * from './getBoundaryDate';
-export * from './isMaskedDateSyntacticallyComplete';

package/components/DateRangePicker/useLogic/utils/index.js

@@ -1,2 +1 @@
 export * from './getBoundaryDate';
-export * from './isMaskedDateSyntacticallyComplete';

package/components/MenuOrganization/OrganizationButton/OrganizationButton.js

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

package/components/MenuOrganization/constants.d.ts

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

package/components/MenuOrganization/constants.js

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

package/components/Profile/Profile.js

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

package/components/Profile/constants.d.ts

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

package/components/Profile/constants.js

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

package/components/utils/date/format/index.d.ts

@@ -1,3 +1,4 @@
 export * from './formatDate';
+export * from './isMaskedDateSyntacticallyComplete';
 export * from './maskDate';
 export * from './parseDate';

package/components/utils/date/format/index.js

@@ -1,3 +1,4 @@
 export * from './formatDate';
+export * from './isMaskedDateSyntacticallyComplete';
 export * from './maskDate';
 export * from './parseDate';

package/{node/components/DateRangePicker/useLogic/utils → components/utils/date/format}/isMaskedDateSyntacticallyComplete/isMaskedDateSyntacticallyComplete.d.ts

@@ -1,4 +1,4 @@
-import { type DateMask } from '../../../../utils/date/format';
+import { type DateMask } from '../maskDate';
 /**
  * Все ли части строки по маске заполнены цифрами полностью (без промежуточных состояний IMask).
  */

package/components/utils/date/format/parseDate/parseDate.d.ts

@@ -1,5 +1,6 @@
 import { type DateMask } from '../maskDate';
 /**
  * утилита конвертации строковой даты созданной по маске обратно в Date
+ * Строгий разбор UTC через `dayjs` + `customParseFormat`; при невалидной строке — Invalid Date
  */
 export declare const parseDate: (date: string, mask: DateMask, separator?: string) => Date;

package/components/utils/date/format/parseDate/parseDate.js

@@ -1,21 +1,50 @@
-import { buildIsoDate, } from '../../buildIsoDate';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import utc from 'dayjs/plugin/utc';
 import { DateMaskElements } from '../maskDate';
-const orderMap = {
-    [DateMaskElements.Year]: 'year',
-    [DateMaskElements.Month]: 'month',
-    [DateMaskElements.Day]: 'day',
-    [DateMaskElements.Hour]: 'hour',
-    [DateMaskElements.Minute]: 'minute',
-    [DateMaskElements.Second]: 'second',
+dayjs.extend(customParseFormat);
+dayjs.extend(utc);
+/**
+ * Токен маски UI → литерал формата `dayjs` (strict UTC).
+ * В маске час — `hh`, в дате используются сутки 0–23 как в `formatDate` (UTC), поэтому `HH`.
+ */
+const maskElementToDayjs = {
+    [DateMaskElements.Day]: 'DD',
+    [DateMaskElements.Month]: 'MM',
+    [DateMaskElements.Year]: 'YYYY',
+    [DateMaskElements.Hour]: 'HH',
+    [DateMaskElements.Minute]: 'mm',
+    [DateMaskElements.Second]: 'ss',
+};
+const buildDayjsFormat = (mask, separator) => {
+    const parts = mask.split(separator);
+    const tokens = [];
+    for (const part of parts) {
+        const t = maskElementToDayjs[part];
+        if (t == null) {
+            return null;
+        }
+        tokens.push(t);
+    }
+    return tokens.join(separator);
 };
 /**
  * утилита конвертации строковой даты созданной по маске обратно в Date
+ * Строгий разбор UTC через `dayjs` + `customParseFormat`; при невалидной строке — Invalid Date
  */
 export const parseDate = (date, mask, separator = '.') => {
     const dateArr = date.split(separator);
-    const options = { year: 1900 };
-    mask.split('.').forEach((element, index) => {
-        options[orderMap[element]] = parseInt(dateArr[index]);
-    });
-    return buildIsoDate(options);
+    const maskSplit = mask.split(separator);
+    if (dateArr.length !== maskSplit.length) {
+        return new Date(Number.NaN);
+    }
+    const format = buildDayjsFormat(mask, separator);
+    if (format == null) {
+        return new Date(Number.NaN);
+    }
+    const parsed = dayjs.utc(date, format, true);
+    if (!parsed.isValid()) {
+        return new Date(Number.NaN);
+    }
+    return parsed.toDate();
 };

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

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

package/node/components/DashboardContext/DashboardContext.js

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

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

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

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

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

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

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

package/node/components/DashboardLayout/DashboardLayout.js

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

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

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

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

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

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

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

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

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