@astral/ui 4.26.0 → 4.27.0

package/node/components/ConfigProvider/NextFeatureFlagsContext/NextFeatureFlagsContext.d.ts

@@ -1,5 +1,14 @@
 /// <reference types="react" />
-type FeatureFlags = {};
+type FeatureFlags = {
+    /**
+     * Флаг отображения кнопки focused mode на маленьких экранах.
+     */
+    showFocusModeButtonOnLaptop?: boolean;
+    /**
+     * Флаг отображения кнопки focused mode на больших экранах.
+     */
+    showFocusModeButtonOnDesktop?: boolean;
+};
 export type NextFeatureFlagsContextProps = FeatureFlags;
 /**
  * Контекст для хранения и передачи фича-флагов в приложении.

package/node/components/ConfigProvider/NextFeatureFlagsContext/NextFeatureFlagsContext.js

@@ -6,4 +6,7 @@ const react_1 = require("react");
  * Контекст для хранения и передачи фича-флагов в приложении.
  * Фича-флаги позволяют управлять функциональностью компонентов на уровне конфигурации.
  */
-exports.NextFeatureFlagsContext = (0, react_1.createContext)({});
+exports.NextFeatureFlagsContext = (0, react_1.createContext)({
+    showFocusModeButtonOnDesktop: false,
+    showFocusModeButtonOnLaptop: false,
+});

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

@@ -5,5 +5,6 @@ export type DashboardContextProps = {
     alertHeight: number;
     isLoading: boolean;
     hasMenuOrganizationRef: RefObject<boolean | null>;
+    setFocusedMode: (isFocusedMode: boolean) => void;
 };
 export declare const DashboardContext: import("react").Context<DashboardContextProps>;

package/node/components/DashboardContext/DashboardContext.js

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

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

@@ -7,7 +7,13 @@ 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 [isFocusedModeInternal, setFocusedMode] = (0, react_1.useState)(isFocusedMode);
     const hasMenuOrganizationRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (isFocusedMode !== isFocusedModeInternal) {
+            setFocusedMode(isFocusedMode);
+        }
+    }, [isFocusedMode]);
     (0, react_1.useEffect)(() => {
         if (!alertElement) {
             setAlertHeight(0);
@@ -23,11 +29,12 @@ const DashboardContextProvider = ({ children, isFocusedMode, isLoading, }) => {
         return () => resizeObserver.disconnect();
     }, [alertElement]);
     return ((0, jsx_runtime_1.jsx)(DashboardContext_1.DashboardContext.Provider, { value: {
-            isFocusedMode,
+            isFocusedMode: isFocusedModeInternal,
             setAlertElement,
             alertHeight,
             isLoading,
             hasMenuOrganizationRef,
+            setFocusedMode,
         }, children: children }));
 };
 exports.DashboardContextProvider = DashboardContextProvider;

package/node/components/DashboardLayout/DashboardLayout.js

@@ -4,16 +4,14 @@ exports.DashboardLayout = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const DashboardContext_1 = require("../DashboardContext");
 const DashboardSidebar_1 = require("../DashboardSidebar");
-const DashboardSidebarProvider_1 = require("../DashboardSidebarProvider");
-const constants_1 = require("./constants");
+const DashboardWrapper_1 = require("./DashboardWrapper");
 const Header_1 = require("./Header");
 const Main_1 = require("./Main");
-const styles_1 = require("./styles");
 /**
  * Общий 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)(DashboardSidebarProvider_1.DashboardSidebarProvider, { isFocusedMode: isFocusedMode, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: constants_1.dashboardLayoutClassnames.root, children: [(0, jsx_runtime_1.jsx)(styles_1.DecorativeHeaderBackground, { role: "presentation", "$isFocusedMode": isFocusedMode }), (0, jsx_runtime_1.jsx)(styles_1.LayoutContent, { "$isFocusedMode": isFocusedMode, children: children })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(DashboardContext_1.DashboardContextProvider, { isFocusedMode: isFocusedMode, isLoading: isLoading, children: (0, jsx_runtime_1.jsx)(DashboardWrapper_1.DashboardWrapper, { children: children }) }));
 };
 exports.DashboardLayout = DashboardLayout;
 exports.DashboardLayout.Header = Header_1.Header;

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

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+type Props = {
+    children: ReactNode;
+};
+export declare const DashboardWrapper: ({ children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/node/components/DashboardLayout/DashboardWrapper/DashboardWrapper.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const DashboardContext_1 = require("../../DashboardContext");
+const DashboardSidebarProvider_1 = require("../../DashboardSidebarProvider");
+const constants_1 = require("../constants");
+const styles_1 = require("./styles");
+const DashboardWrapper = ({ children }) => {
+    const { isFocusedMode } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
+    return ((0, jsx_runtime_1.jsx)(DashboardSidebarProvider_1.DashboardSidebarProvider, { isFocusedMode: isFocusedMode, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: constants_1.dashboardLayoutClassnames.root, children: [(0, jsx_runtime_1.jsx)(styles_1.DecorativeHeaderBackground, { role: "presentation", "$isFocusedMode": isFocusedMode }), (0, jsx_runtime_1.jsx)(styles_1.LayoutContent, { "$isFocusedMode": isFocusedMode, children: children })] }) }));
+};
+exports.DashboardWrapper = DashboardWrapper;

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

@@ -0,0 +1 @@
+export * from './DashboardWrapper';

package/node/components/DashboardLayout/DashboardWrapper/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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 });
+__exportStar(require("./DashboardWrapper"), exports);

package/node/components/DashboardLayout/{styles.js → DashboardWrapper/styles.js}

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutContent = exports.DecorativeHeaderBackground = exports.Wrapper = void 0;
-const constants_1 = require("../DashboardSidebar/constants");
-const styled_1 = require("../styled");
-const constants_2 = require("./constants");
+const constants_1 = require("../../DashboardSidebar/constants");
+const styled_1 = require("../../styled");
+const constants_2 = require("../constants");
 exports.Wrapper = (0, styled_1.styled)('div') `
   display: flex;
   justify-content: center;
@@ -12,9 +12,7 @@ exports.Wrapper = (0, styled_1.styled)('div') `
 
   background-color: ${({ theme }) => theme.palette.background.body};
 `;
-exports.DecorativeHeaderBackground = (0, styled_1.styled)('div', {
-    shouldForwardProp: (prop) => !['$isFocusedMode'].includes(prop),
-}) `
+exports.DecorativeHeaderBackground = styled_1.styled.div `
   position: absolute;
 
   /* Header находится над декоративным элементом */
@@ -22,7 +20,7 @@ exports.DecorativeHeaderBackground = (0, styled_1.styled)('div', {
   left: 0;
 
   width: 100%;
-  height: ${({ $isFocusedMode }) => ($isFocusedMode ? 0 : constants_2.HEADER_HEIGHT)};
+  height: ${({ $isFocusedMode }) => ($isFocusedMode ? 0 : constants_2.HEADER_HEIGHT_DESKTOP)};
 
   background-color: ${({ theme }) => theme.palette.background.default};
   border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
@@ -32,6 +30,11 @@ exports.DecorativeHeaderBackground = (0, styled_1.styled)('div', {
         duration: theme.transitions.duration.complex,
     });
 }};
+
+ ${({ theme }) => theme.breakpoints.down('lg')} {
+    height: ${({ $isFocusedMode }) => ($isFocusedMode ? 0 : constants_2.HEADER_HEIGHT_LAPTOP)}
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: none;
   }

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

@@ -21,8 +21,8 @@ exports.HeaderRoot = (0, styled_1.styled)('header', {
   justify-content: space-between;
 
   width: 100%;
-  height: ${constants_4.HEADER_HEIGHT};
-  margin-top: ${({ $isFocusedMode }) => $isFocusedMode ? `-${constants_4.HEADER_HEIGHT}` : 0};
+  height: ${constants_4.HEADER_HEIGHT_DESKTOP};
+  margin-top: ${({ $isFocusedMode }) => $isFocusedMode ? `-${constants_4.HEADER_HEIGHT_DESKTOP}` : 0};
   margin-bottom: ${({ theme }) => theme.spacing(4)};
 
   transition: ${({ theme }) => {
@@ -31,6 +31,10 @@ exports.HeaderRoot = (0, styled_1.styled)('header', {
     });
 }};
 
+  ${({ theme }) => theme.breakpoints.down('lg')} {
+    height: ${constants_4.HEADER_HEIGHT_LAPTOP};
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     grid-row: 2;
     justify-content: flex-start;

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

@@ -1,4 +1,5 @@
-export declare const HEADER_HEIGHT = "60px";
+export declare const HEADER_HEIGHT_DESKTOP = "60px";
+export declare const HEADER_HEIGHT_LAPTOP = "56px";
 export declare const HEADER_HEIGHT_MOBILE = "48px";
 export declare const dashboardLayoutClassnames: {
     root: string;

package/node/components/DashboardLayout/constants.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dashboardLayoutClassnames = exports.HEADER_HEIGHT_MOBILE = exports.HEADER_HEIGHT = void 0;
+exports.dashboardLayoutClassnames = exports.HEADER_HEIGHT_MOBILE = exports.HEADER_HEIGHT_LAPTOP = exports.HEADER_HEIGHT_DESKTOP = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
-exports.HEADER_HEIGHT = '60px';
+exports.HEADER_HEIGHT_DESKTOP = '60px';
+exports.HEADER_HEIGHT_LAPTOP = '56px';
 exports.HEADER_HEIGHT_MOBILE = '48px';
 exports.dashboardLayoutClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('dashboard-layout'),

package/node/components/DashboardLayoutSkeleton/DashboardLayoutSkeleton.js

@@ -4,8 +4,8 @@ exports.DashboardLayoutSkeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const constants_1 = require("../DashboardLayout/constants");
 const DashboardLayout_1 = require("../DashboardLayout/DashboardLayout");
+const styles_1 = require("../DashboardLayout/DashboardWrapper/styles");
 const Header_1 = require("../DashboardLayout/Header");
-const styles_1 = require("../DashboardLayout/styles");
 const DashboardSidebarSkeleton_1 = require("../DashboardSidebarSkeleton");
 const MenuOrganization_1 = require("../MenuOrganization");
 const LoadingPlaceholder_1 = require("../placeholders/LoadingPlaceholder");

package/node/components/DashboardSidebar/styles.js

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Footer = exports.SidebarContent = exports.SidebarHeader = exports.SidebarRoot = exports.StyledPaper = exports.Wrapper = void 0;
-const constants_1 = require("../DashboardLayout/constants");
-const constants_2 = require("../MenuOrganization/constants");
+const constants_1 = require("../constants");
+const constants_2 = require("../DashboardLayout/constants");
+const constants_3 = require("../MenuOrganization/constants");
 const OrganizationButton_1 = require("../MenuOrganization/OrganizationButton");
 const Paper_1 = require("../Paper");
 const PinButton_1 = require("../PinButton");
 const styled_1 = require("../styled");
-const constants_3 = require("./constants");
+const constants_4 = require("./constants");
 exports.Wrapper = (0, styled_1.styled)('div', {
     shouldForwardProp: (prop) => !['$isPinned', '$alertHeight'].includes(prop),
 }) `
@@ -21,7 +22,7 @@ exports.Wrapper = (0, styled_1.styled)('div', {
   ${({ theme }) => theme.breakpoints.down('sm')} {
     position: absolute;
     z-index: ${({ theme }) => theme.zIndex.appBar - 1};
-    top: ${({ $alertHeight }) => `calc(${$alertHeight}px + ${constants_1.HEADER_HEIGHT_MOBILE}) `};
+    top: ${({ $alertHeight }) => `calc(${$alertHeight}px + ${constants_2.HEADER_HEIGHT_MOBILE}) `};
     bottom: 0;
     transform: ${({ $isPinned }) => $isPinned ? 'translateX(0px)' : 'translateX(-100vw)'};
 
@@ -36,8 +37,8 @@ exports.Wrapper = (0, styled_1.styled)('div', {
     });
 }};
 
-    &.${constants_3.dashboardSidebarClassnames.hasMenuOrganization} {
-      top: ${({ $alertHeight }) => `calc(${$alertHeight}px + ${constants_1.HEADER_HEIGHT_MOBILE} + ${OrganizationButton_1.MOBILE_BUTTON_HEIGHT}) `};
+    &.${constants_4.dashboardSidebarClassnames.hasMenuOrganization} {
+      top: ${({ $alertHeight }) => `calc(${$alertHeight}px + ${constants_2.HEADER_HEIGHT_MOBILE} + ${OrganizationButton_1.MOBILE_BUTTON_HEIGHT}) `};
     }
   }
 `;
@@ -88,11 +89,11 @@ exports.SidebarHeader = styled_1.styled.header `
 
     border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
 
-    &:has(.${constants_2.menuOrganizationClassnames.button}) {
+    &:has(.${constants_3.menuOrganizationClassnames.button}) {
       padding: 0;
     }
 
-    & .${constants_2.menuOrganizationClassnames.button} {
+    & .${constants_3.menuOrganizationClassnames.button} {
       height: ${OrganizationButton_1.MOBILE_BUTTON_HEIGHT};
       padding: ${({ theme }) => theme.spacing(3, 4)};
     }
@@ -125,7 +126,7 @@ exports.Footer = styled_1.styled.footer `
   flex-shrink: 0;
 
   box-sizing: content-box;
-  height: 64px;
+  height: ${constants_1.FOOTER_DESKTOP_HEIGHT};
   margin-top: auto;
 
   background-color: ${({ theme }) => theme.palette.background.default};
@@ -140,4 +141,8 @@ exports.Footer = styled_1.styled.footer `
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: none;
   }
+
+  ${({ theme }) => theme.breakpoints.down('lg')} {
+    height: ${constants_1.FOOTER_LAPTOP_HEIGHT};
+  }
 `;

package/node/components/DataGridPaginationContainer/styles.js

@@ -27,6 +27,10 @@ exports.PaginationWrapper = styled_1.styled.div `
   margin: 0 ${({ theme }) => theme.spacing(2)};
   padding-top: ${({ theme }) => theme.spacing(4)};
 
+  ${({ theme }) => theme.breakpoints.down('lg')} {
+    padding-top: ${({ theme }) => theme.spacing(2)};
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     height: 56px;
     padding: ${({ theme }) => theme.spacing(3, 4)};

package/node/components/PageContent/styles.js

@@ -62,6 +62,11 @@ exports.Content = styled_1.styled.div `
 
   padding: ${({ theme, $hasAside }) => getPaddingContent(theme, $hasAside)};
 
+  ${({ theme }) => theme.breakpoints.down('lg')} {
+    padding-right: ${({ theme }) => theme.spacing(4)};
+    padding-left: ${({ theme }) => theme.spacing(4)};
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     scrollbar-gutter: unset;
 

package/node/components/PageHeader/HeaderContent/HeaderContent.js

@@ -16,6 +16,6 @@ const HeaderContent = ({ backButton, description, subheader, breadcrumbs, action
         }
         return ((0, jsx_runtime_1.jsx)(styles_1.BreadcrumbsWrapper, { children: Array.isArray(breadcrumbs) ? ((0, jsx_runtime_1.jsx)(Breadcrumbs_1.Breadcrumbs, { children: breadcrumbs })) : (breadcrumbs) }));
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderBreadcrumbs(), (0, jsx_runtime_1.jsx)(styles_1.DesktopTitleWrapper, { children: (0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), (0, jsx_runtime_1.jsx)(Description_1.Description, { description: description, isLoading: isLoading }), actions && ((0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { className: (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", ...actions })), subheader && (0, jsx_runtime_1.jsx)(styles_1.PageSubheader, { children: subheader }), filters && (0, jsx_runtime_1.jsx)(styles_1.PageFilters, { children: filters })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderBreadcrumbs(), (0, jsx_runtime_1.jsx)(styles_1.DesktopTitleWrapper, { children: (0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), (0, jsx_runtime_1.jsx)(Description_1.Description, { description: description, isLoading: isLoading }), actions && ((0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { className: (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", ...actions })), filters && (0, jsx_runtime_1.jsx)(styles_1.PageFilters, { children: filters }), subheader && (0, jsx_runtime_1.jsx)(styles_1.PageSubheader, { children: subheader })] }));
 };
 exports.HeaderContent = HeaderContent;

package/node/components/PageHeader/PageActions/PageActions.d.ts

@@ -1,25 +1,6 @@
 import { type ElementType } from 'react';
-import { type ActionGroupProps } from '../../ActionGroup';
-import { type ButtonSize } from '../../Button';
-export type PageActionsProps<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType> = ActionGroupProps<TMainActionComponent, TSecondaryActionComponent> & {
-    /**
-     * Если true, отображается skeleton
-     */
-    isLoading?: boolean;
-    size?: ButtonSize;
-    /**
-     * Отступ между действиями
-     */
-    spacing?: number;
-};
-export declare const PageActions: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType>(props: ActionGroupProps<TMainActionComponent, TSecondaryActionComponent> & {
-    /**
-     * Если true, отображается skeleton
-     */
+export declare const PageActions: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType>(props: import("../..").ActionGroupProps<TMainActionComponent, TSecondaryActionComponent> & {
     isLoading?: boolean | undefined;
     size?: "large" | "medium" | undefined;
-    /**
-     * Отступ между действиями
-     */
     spacing?: number | undefined;
 } & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

package/node/components/PageHeader/PageActions/PageActions.js

@@ -2,20 +2,26 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageActions = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ActionGroup_1 = require("../../ActionGroup");
+const FullSizeOutlineMd_1 = require("../../../icons/FullSizeOutlineMd");
+const MinimizeOutlineMd_1 = require("../../../icons/MinimizeOutlineMd");
 const forwardRefWithGeneric_1 = require("../../forwardRefWithGeneric");
+const Tooltip_1 = require("../../Tooltip");
 const MainActions_1 = require("./MainActions");
 const PageActionSkeleton_1 = require("./PageActionSkeleton");
 const SecondaryActions_1 = require("./SecondaryActions");
 const SecondaryVisibleActions_1 = require("./SecondaryVisibleActions");
 const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
 const PageActionsInner = (props, ref) => {
     const { secondary, secondaryVisible, main, className, isLoading, size = 'medium', spacing = 2, } = props;
-    const { disabledAction } = (0, ActionGroup_1.useActionsState)({ main, secondary });
+    const { disabledAction, buttonClassnames, isFocusedMode, handleClick, tooltipTitle, } = (0, useLogic_1.useLogic)({
+        main,
+        secondary,
+    });
     const renderSecondaryActions = () => ((0, jsx_runtime_1.jsxs)(styles_1.SecondaryWrapper, { "$spacing": spacing, children: [secondaryVisible && ((0, jsx_runtime_1.jsx)(SecondaryVisibleActions_1.SecondaryVisibleActions, { actions: secondaryVisible, size: size })), secondary && ((0, jsx_runtime_1.jsx)(SecondaryActions_1.SecondaryActions, { isDisabled: disabledAction, actions: secondary, size: size }))] }));
     if (isLoading) {
         return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { children: (0, jsx_runtime_1.jsx)(PageActionSkeleton_1.PageActionSkeleton, { size: size }) }));
     }
-    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, ref: ref, children: (0, jsx_runtime_1.jsxs)(styles_1.ActionWrapper, { "$spacing": spacing, children: [(0, jsx_runtime_1.jsx)(MainActions_1.MainActions, { isDisabled: disabledAction, actions: main, size: size, spacing: spacing }), renderSecondaryActions()] }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, ref: ref, children: (0, jsx_runtime_1.jsxs)(styles_1.ActionWrapper, { "$spacing": spacing, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: tooltipTitle, enterDelay: 400, enterNextDelay: 400, placement: "bottom-end", children: (0, jsx_runtime_1.jsx)(styles_1.FocusModeButton, { className: buttonClassnames, variant: "outlined", onClick: handleClick, "aria-label": tooltipTitle, color: "grey", children: isFocusedMode ? (0, jsx_runtime_1.jsx)(MinimizeOutlineMd_1.MinimizeOutlineMd, {}) : (0, jsx_runtime_1.jsx)(FullSizeOutlineMd_1.FullSizeOutlineMd, {}) }) }), (0, jsx_runtime_1.jsx)(MainActions_1.MainActions, { isDisabled: disabledAction, actions: main, size: size, spacing: spacing }), renderSecondaryActions()] }) }));
 };
 exports.PageActions = (0, forwardRefWithGeneric_1.forwardRefWithGeneric)(PageActionsInner);

package/node/components/PageHeader/PageActions/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const focusModeButtonClassnames: {
+    isShowOnDesktop: string;
+    isShowOnLaptop: string;
+};

package/node/components/PageHeader/PageActions/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.focusModeButtonClassnames = void 0;
+const createUIKitClassname_1 = require("../../utils/createUIKitClassname");
+exports.focusModeButtonClassnames = {
+    isShowOnDesktop: (0, createUIKitClassname_1.createUIKitClassname)('focus-mode-button__show-desktop'),
+    isShowOnLaptop: (0, createUIKitClassname_1.createUIKitClassname)('focus-mode-button__show-laptop'),
+};

package/node/components/PageHeader/PageActions/index.d.ts

@@ -1,5 +1,6 @@
 export * from './MainActions';
 export * from './PageActionSkeleton';
 export * from './PageActions';
+export type { PageActionsProps } from './types';
 export * from './SecondaryActions';
 export * from './SecondaryVisibleActions';

package/node/components/PageHeader/PageActions/styles.d.ts

@@ -15,3 +15,12 @@ export declare const ActionWrapper: import("@emotion/styled/dist/declarations/sr
 } & {
     $spacing: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FocusModeButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+    variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
+    loading?: boolean | undefined;
+    color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/node/components/PageHeader/PageActions/styles.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionWrapper = exports.SecondaryWrapper = exports.Wrapper = void 0;
+exports.FocusModeButton = exports.ActionWrapper = exports.SecondaryWrapper = exports.Wrapper = void 0;
+const IconButton_1 = require("../../IconButton");
 const styled_1 = require("../../styled");
+const constants_1 = require("./constants");
 exports.Wrapper = styled_1.styled.div `
   display: flex;
   grid-column: 3;
@@ -30,3 +32,18 @@ exports.ActionWrapper = styled_1.styled.div `
     gap: ${({ theme }) => theme.spacing(2)};
   }
 `;
+exports.FocusModeButton = (0, styled_1.styled)(IconButton_1.IconButton) `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('lg')} {
+    &.${constants_1.focusModeButtonClassnames.isShowOnLaptop} {
+      display: inline-flex;
+    }
+  }
+    
+  ${({ theme }) => theme.breakpoints.up('lg')} {
+    &.${constants_1.focusModeButtonClassnames.isShowOnDesktop} {
+      display: inline-flex;
+    }
+  }
+`;

package/node/components/PageHeader/PageActions/types.d.ts

@@ -0,0 +1,14 @@
+import type { ElementType } from 'react';
+import type { ActionGroupProps } from '../../ActionGroup';
+import type { ButtonSize } from '../../Button';
+export type PageActionsProps<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType> = ActionGroupProps<TMainActionComponent, TSecondaryActionComponent> & {
+    /**
+     * Если true, отображается skeleton
+     */
+    isLoading?: boolean;
+    size?: ButtonSize;
+    /**
+     * Отступ между действиями
+     */
+    spacing?: number;
+};

package/node/components/PageHeader/PageActions/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/components/PageHeader/PageActions/useLogic/index.d.ts

@@ -0,0 +1 @@
+export * from './useLogic';

package/node/components/PageHeader/PageActions/useLogic/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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 });
+__exportStar(require("./useLogic"), exports);

package/node/components/PageHeader/PageActions/useLogic/useLogic.d.ts

@@ -0,0 +1,11 @@
+import { type ElementType } from 'react';
+import type { PageActionsProps } from '../types';
+type UseLogicParams<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType> = Pick<PageActionsProps<TMainActionComponent, TSecondaryActionComponent>, 'main' | 'secondary'>;
+export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType>({ main, secondary, }: UseLogicParams<TMainActionComponent, TSecondaryActionComponent>) => {
+    disabledAction: boolean;
+    buttonClassnames: string;
+    isFocusedMode: boolean;
+    handleClick: () => void;
+    tooltipTitle: string;
+};
+export {};

package/node/components/PageHeader/PageActions/useLogic/useLogic.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const ActionGroup_1 = require("../../../ActionGroup");
+const NextFeatureFlagsContext_1 = require("../../../ConfigProvider/NextFeatureFlagsContext");
+const DashboardContext_1 = require("../../../DashboardContext");
+const classNames_1 = require("../../../utils/classNames");
+const constants_1 = require("../constants");
+const useLogic = ({ main, secondary, }) => {
+    const { showFocusModeButtonOnDesktop, showFocusModeButtonOnLaptop } = (0, react_1.useContext)(NextFeatureFlagsContext_1.NextFeatureFlagsContext);
+    const { setFocusedMode, isFocusedMode } = (0, react_1.useContext)(DashboardContext_1.DashboardContext);
+    const { disabledAction } = (0, ActionGroup_1.useActionsState)({ main, secondary });
+    const buttonClassnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)({
+        [constants_1.focusModeButtonClassnames.isShowOnDesktop]: showFocusModeButtonOnDesktop,
+        [constants_1.focusModeButtonClassnames.isShowOnLaptop]: showFocusModeButtonOnLaptop,
+    }), [showFocusModeButtonOnDesktop, showFocusModeButtonOnLaptop]);
+    const handleClick = () => {
+        setFocusedMode(!isFocusedMode);
+    };
+    const tooltipTitle = isFocusedMode
+        ? 'Свернуть и вернуть шапку сервиса'
+        : 'Раскрыть на весь экран';
+    return {
+        disabledAction,
+        buttonClassnames,
+        isFocusedMode,
+        handleClick,
+        tooltipTitle,
+    };
+};
+exports.useLogic = useLogic;

package/node/components/PageHeader/styles.js

@@ -13,6 +13,10 @@ exports.Wrapper = styled_1.styled.header `
 
   padding: ${({ theme }) => theme.spacing(0, 6)};
 
+  ${({ theme }) => theme.breakpoints.down('lg')} {
+    padding: ${({ theme }) => theme.spacing(0, 4)};
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: block;
 

package/node/components/PageLayoutContainer/styles.js

@@ -16,6 +16,10 @@ exports.Wrapper = styled_1.styled.div `
 
   background-color: ${({ theme }) => theme.palette.common.white};
 
+  ${({ theme }) => theme.breakpoints.down('lg')} {
+    grid-row-gap: 0;
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     scroll-behavior: smooth;
 

package/node/components/PageLayoutFooter/styles.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = void 0;
+const constants_1 = require("../constants");
 const styled_1 = require("../styled");
 exports.Wrapper = styled_1.styled.footer `
   display: flex;
@@ -8,7 +9,7 @@ exports.Wrapper = styled_1.styled.footer `
   align-items: center;
   justify-content: flex-end;
 
-  min-height: 64px;
+  min-height: ${constants_1.FOOTER_DESKTOP_HEIGHT};
   padding: ${({ theme }) => theme.spacing(0, 6)};
 
   background-color: ${({ theme }) => theme.palette.background.default};