@astral/ui 4.26.1 → 4.27.0

package/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/components/ConfigProvider/NextFeatureFlagsContext/NextFeatureFlagsContext.js

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

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

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

package/components/DashboardContext/DashboardContextProvider/DashboardContextProvider.js

@@ -4,7 +4,13 @@ import { DashboardContext, } from '../DashboardContext';
 export const DashboardContextProvider = ({ children, isFocusedMode, isLoading, }) => {
     const [alertElement, setAlertElement] = useState(null);
     const [alertHeight, setAlertHeight] = useState(0);
+    const [isFocusedModeInternal, setFocusedMode] = useState(isFocusedMode);
     const hasMenuOrganizationRef = useRef(false);
+    useEffect(() => {
+        if (isFocusedMode !== isFocusedModeInternal) {
+            setFocusedMode(isFocusedMode);
+        }
+    }, [isFocusedMode]);
     useEffect(() => {
         if (!alertElement) {
             setAlertHeight(0);
@@ -20,10 +26,11 @@ export const DashboardContextProvider = ({ children, isFocusedMode, isLoading, }
         return () => resizeObserver.disconnect();
     }, [alertElement]);
     return (_jsx(DashboardContext.Provider, { value: {
-            isFocusedMode,
+            isFocusedMode: isFocusedModeInternal,
             setAlertElement,
             alertHeight,
             isLoading,
             hasMenuOrganizationRef,
+            setFocusedMode,
         }, children: children }));
 };

package/components/DashboardLayout/DashboardLayout.js

@@ -1,16 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { DashboardContextProvider } from '../DashboardContext';
 import { DashboardSidebar } from '../DashboardSidebar';
-import { DashboardSidebarProvider } from '../DashboardSidebarProvider';
-import { dashboardLayoutClassnames } from './constants';
+import { DashboardWrapper } from './DashboardWrapper';
 import { Header } from './Header';
 import { Main } from './Main';
-import { DecorativeHeaderBackground, LayoutContent, Wrapper } from './styles';
 /**
  * Общий Layout приложения
  */
 export const DashboardLayout = ({ children, isFocusedMode = false, isLoading = false, }) => {
-    return (_jsx(DashboardContextProvider, { isFocusedMode: isFocusedMode, isLoading: isLoading, children: _jsx(DashboardSidebarProvider, { isFocusedMode: isFocusedMode, children: _jsxs(Wrapper, { className: dashboardLayoutClassnames.root, children: [_jsx(DecorativeHeaderBackground, { role: "presentation", "$isFocusedMode": isFocusedMode }), _jsx(LayoutContent, { "$isFocusedMode": isFocusedMode, children: children })] }) }) }));
+    return (_jsx(DashboardContextProvider, { isFocusedMode: isFocusedMode, isLoading: isLoading, children: _jsx(DashboardWrapper, { children: children }) }));
 };
 DashboardLayout.Header = Header;
 DashboardLayout.Sidebar = DashboardSidebar;

package/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/components/DashboardLayout/DashboardWrapper/DashboardWrapper.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { DashboardContext } from '../../DashboardContext';
+import { DashboardSidebarProvider } from '../../DashboardSidebarProvider';
+import { dashboardLayoutClassnames } from '../constants';
+import { DecorativeHeaderBackground, LayoutContent, Wrapper } from './styles';
+export const DashboardWrapper = ({ children }) => {
+    const { isFocusedMode } = useContext(DashboardContext);
+    return (_jsx(DashboardSidebarProvider, { isFocusedMode: isFocusedMode, children: _jsxs(Wrapper, { className: dashboardLayoutClassnames.root, children: [_jsx(DecorativeHeaderBackground, { role: "presentation", "$isFocusedMode": isFocusedMode }), _jsx(LayoutContent, { "$isFocusedMode": isFocusedMode, children: children })] }) }));
+};

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

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

package/components/DashboardLayout/DashboardWrapper/index.js

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

package/components/DashboardLayout/{styles.d.ts → DashboardWrapper/styles.d.ts}

@@ -1,15 +1,15 @@
 /// <reference types="react" />
-export declare const Wrapper: import("../styled").StyledComponent<{
+export declare const Wrapper: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const DecorativeHeaderBackground: import("../styled").StyledComponent<{
+export declare const DecorativeHeaderBackground: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     $isFocusedMode: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const LayoutContent: import("../styled").StyledComponent<{
+export declare const LayoutContent: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {

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

@@ -1,6 +1,6 @@
-import { dashboardSidebarClassnames } from '../DashboardSidebar/constants';
-import { styled } from '../styled';
-import { HEADER_HEIGHT } from './constants';
+import { dashboardSidebarClassnames } from '../../DashboardSidebar/constants';
+import { styled } from '../../styled';
+import { HEADER_HEIGHT_DESKTOP, HEADER_HEIGHT_LAPTOP } from '../constants';
 export const Wrapper = styled('div') `
   display: flex;
   justify-content: center;
@@ -9,9 +9,7 @@ export const Wrapper = styled('div') `
 
   background-color: ${({ theme }) => theme.palette.background.body};
 `;
-export const DecorativeHeaderBackground = styled('div', {
-    shouldForwardProp: (prop) => !['$isFocusedMode'].includes(prop),
-}) `
+export const DecorativeHeaderBackground = styled.div `
   position: absolute;
 
   /* Header находится над декоративным элементом */
@@ -19,7 +17,7 @@ export const DecorativeHeaderBackground = styled('div', {
   left: 0;
 
   width: 100%;
-  height: ${({ $isFocusedMode }) => ($isFocusedMode ? 0 : HEADER_HEIGHT)};
+  height: ${({ $isFocusedMode }) => ($isFocusedMode ? 0 : HEADER_HEIGHT_DESKTOP)};
 
   background-color: ${({ theme }) => theme.palette.background.default};
   border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
@@ -29,6 +27,11 @@ export const DecorativeHeaderBackground = styled('div', {
         duration: theme.transitions.duration.complex,
     });
 }};
+
+ ${({ theme }) => theme.breakpoints.down('lg')} {
+    height: ${({ $isFocusedMode }) => ($isFocusedMode ? 0 : HEADER_HEIGHT_LAPTOP)}
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: none;
   }

package/components/DashboardLayout/Header/styles.js

@@ -4,7 +4,7 @@ import { IconButton } from '../../IconButton';
 import { menuOrganizationClassnames } from '../../MenuOrganization/constants';
 import { MOBILE_BUTTON_HEIGHT } from '../../MenuOrganization/OrganizationButton/constants';
 import { styled } from '../../styled';
-import { dashboardLayoutClassnames, HEADER_HEIGHT, HEADER_HEIGHT_MOBILE, } from '../constants';
+import { dashboardLayoutClassnames, HEADER_HEIGHT_DESKTOP, HEADER_HEIGHT_LAPTOP, HEADER_HEIGHT_MOBILE, } from '../constants';
 import { dashboardLayoutHeaderClassnames } from './constants';
 export const HeaderRoot = styled('header', {
     shouldForwardProp: (prop) => !['$isFocusedMode'].includes(prop),
@@ -18,8 +18,8 @@ export const HeaderRoot = styled('header', {
   justify-content: space-between;
 
   width: 100%;
-  height: ${HEADER_HEIGHT};
-  margin-top: ${({ $isFocusedMode }) => $isFocusedMode ? `-${HEADER_HEIGHT}` : 0};
+  height: ${HEADER_HEIGHT_DESKTOP};
+  margin-top: ${({ $isFocusedMode }) => $isFocusedMode ? `-${HEADER_HEIGHT_DESKTOP}` : 0};
   margin-bottom: ${({ theme }) => theme.spacing(4)};
 
   transition: ${({ theme }) => {
@@ -28,6 +28,10 @@ export const HeaderRoot = styled('header', {
     });
 }};
 
+  ${({ theme }) => theme.breakpoints.down('lg')} {
+    height: ${HEADER_HEIGHT_LAPTOP};
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     grid-row: 2;
     justify-content: flex-start;

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

@@ -1,5 +1,6 @@
 import { createUIKitClassname } from '../utils/createUIKitClassname';
-export const HEADER_HEIGHT = '60px';
+export const HEADER_HEIGHT_DESKTOP = '60px';
+export const HEADER_HEIGHT_LAPTOP = '56px';
 export const HEADER_HEIGHT_MOBILE = '48px';
 export const dashboardLayoutClassnames = {
     root: createUIKitClassname('dashboard-layout'),

package/components/DashboardLayoutSkeleton/DashboardLayoutSkeleton.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { dashboardLayoutClassnames } from '../DashboardLayout/constants';
 import { DashboardLayout } from '../DashboardLayout/DashboardLayout';
+import { DecorativeHeaderBackground, LayoutContent, Wrapper, } from '../DashboardLayout/DashboardWrapper/styles';
 import { Header } from '../DashboardLayout/Header';
-import { DecorativeHeaderBackground, LayoutContent, Wrapper, } from '../DashboardLayout/styles';
 import { DashboardSidebarSkeleton } from '../DashboardSidebarSkeleton';
 import { MenuOrganizationSkeleton } from '../MenuOrganization';
 import { LoadingPlaceholder } from '../placeholders/LoadingPlaceholder';

package/components/DashboardSidebar/styles.js

@@ -1,3 +1,4 @@
+import { FOOTER_DESKTOP_HEIGHT, FOOTER_LAPTOP_HEIGHT } from '../constants';
 import { HEADER_HEIGHT_MOBILE } from '../DashboardLayout/constants';
 import { menuOrganizationClassnames } from '../MenuOrganization/constants';
 import { MOBILE_BUTTON_HEIGHT } from '../MenuOrganization/OrganizationButton';
@@ -122,7 +123,7 @@ export const Footer = styled.footer `
   flex-shrink: 0;
 
   box-sizing: content-box;
-  height: 64px;
+  height: ${FOOTER_DESKTOP_HEIGHT};
   margin-top: auto;
 
   background-color: ${({ theme }) => theme.palette.background.default};
@@ -137,4 +138,8 @@ export const Footer = styled.footer `
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: none;
   }
+
+  ${({ theme }) => theme.breakpoints.down('lg')} {
+    height: ${FOOTER_LAPTOP_HEIGHT};
+  }
 `;

package/components/DataGridPaginationContainer/styles.js

@@ -24,6 +24,10 @@ export const PaginationWrapper = 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/components/PageContent/styles.js

@@ -59,6 +59,11 @@ export const Content = 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/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/components/PageHeader/PageActions/PageActions.js

@@ -1,18 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useActionsState } from '../../ActionGroup';
+import { FullSizeOutlineMd } from '../../../icons/FullSizeOutlineMd';
+import { MinimizeOutlineMd } from '../../../icons/MinimizeOutlineMd';
 import { forwardRefWithGeneric } from '../../forwardRefWithGeneric';
+import { Tooltip } from '../../Tooltip';
 import { MainActions } from './MainActions';
 import { PageActionSkeleton } from './PageActionSkeleton';
 import { SecondaryActions } from './SecondaryActions';
 import { SecondaryVisibleActions } from './SecondaryVisibleActions';
-import { ActionWrapper, SecondaryWrapper, Wrapper } from './styles';
+import { ActionWrapper, FocusModeButton, SecondaryWrapper, Wrapper, } from './styles';
+import { useLogic } from './useLogic';
 const PageActionsInner = (props, ref) => {
     const { secondary, secondaryVisible, main, className, isLoading, size = 'medium', spacing = 2, } = props;
-    const { disabledAction } = useActionsState({ main, secondary });
+    const { disabledAction, buttonClassnames, isFocusedMode, handleClick, tooltipTitle, } = useLogic({
+        main,
+        secondary,
+    });
     const renderSecondaryActions = () => (_jsxs(SecondaryWrapper, { "$spacing": spacing, children: [secondaryVisible && (_jsx(SecondaryVisibleActions, { actions: secondaryVisible, size: size })), secondary && (_jsx(SecondaryActions, { isDisabled: disabledAction, actions: secondary, size: size }))] }));
     if (isLoading) {
         return (_jsx(Wrapper, { children: _jsx(PageActionSkeleton, { size: size }) }));
     }
-    return (_jsx(Wrapper, { className: className, ref: ref, children: _jsxs(ActionWrapper, { "$spacing": spacing, children: [_jsx(MainActions, { isDisabled: disabledAction, actions: main, size: size, spacing: spacing }), renderSecondaryActions()] }) }));
+    return (_jsx(Wrapper, { className: className, ref: ref, children: _jsxs(ActionWrapper, { "$spacing": spacing, children: [_jsx(Tooltip, { title: tooltipTitle, enterDelay: 400, enterNextDelay: 400, placement: "bottom-end", children: _jsx(FocusModeButton, { className: buttonClassnames, variant: "outlined", onClick: handleClick, "aria-label": tooltipTitle, color: "grey", children: isFocusedMode ? _jsx(MinimizeOutlineMd, {}) : _jsx(FullSizeOutlineMd, {}) }) }), _jsx(MainActions, { isDisabled: disabledAction, actions: main, size: size, spacing: spacing }), renderSecondaryActions()] }) }));
 };
 export const PageActions = forwardRefWithGeneric(PageActionsInner);

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

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

package/components/PageHeader/PageActions/constants.js

@@ -0,0 +1,5 @@
+import { createUIKitClassname } from '../../utils/createUIKitClassname';
+export const focusModeButtonClassnames = {
+    isShowOnDesktop: createUIKitClassname('focus-mode-button__show-desktop'),
+    isShowOnLaptop: createUIKitClassname('focus-mode-button__show-laptop'),
+};

package/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/components/PageHeader/PageActions/styles.d.ts

@@ -15,3 +15,12 @@ export declare const ActionWrapper: import("../../styled").StyledComponent<{
 } & {
     $spacing: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FocusModeButton: import("../../styled").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/components/PageHeader/PageActions/styles.js

@@ -1,4 +1,6 @@
+import { IconButton } from '../../IconButton';
 import { styled } from '../../styled';
+import { focusModeButtonClassnames } from './constants';
 export const Wrapper = styled.div `
   display: flex;
   grid-column: 3;
@@ -27,3 +29,18 @@ export const ActionWrapper = styled.div `
     gap: ${({ theme }) => theme.spacing(2)};
   }
 `;
+export const FocusModeButton = styled(IconButton) `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('lg')} {
+    &.${focusModeButtonClassnames.isShowOnLaptop} {
+      display: inline-flex;
+    }
+  }
+    
+  ${({ theme }) => theme.breakpoints.up('lg')} {
+    &.${focusModeButtonClassnames.isShowOnDesktop} {
+      display: inline-flex;
+    }
+  }
+`;

package/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/components/PageHeader/PageActions/types.js

@@ -0,0 +1 @@
+export {};

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

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

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

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

package/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/components/PageHeader/PageActions/useLogic/useLogic.js

@@ -0,0 +1,28 @@
+import { useContext, useMemo } from 'react';
+import { useActionsState } from '../../../ActionGroup';
+import { NextFeatureFlagsContext } from '../../../ConfigProvider/NextFeatureFlagsContext';
+import { DashboardContext } from '../../../DashboardContext';
+import { classNames } from '../../../utils/classNames';
+import { focusModeButtonClassnames } from '../constants';
+export const useLogic = ({ main, secondary, }) => {
+    const { showFocusModeButtonOnDesktop, showFocusModeButtonOnLaptop } = useContext(NextFeatureFlagsContext);
+    const { setFocusedMode, isFocusedMode } = useContext(DashboardContext);
+    const { disabledAction } = useActionsState({ main, secondary });
+    const buttonClassnames = useMemo(() => classNames({
+        [focusModeButtonClassnames.isShowOnDesktop]: showFocusModeButtonOnDesktop,
+        [focusModeButtonClassnames.isShowOnLaptop]: showFocusModeButtonOnLaptop,
+    }), [showFocusModeButtonOnDesktop, showFocusModeButtonOnLaptop]);
+    const handleClick = () => {
+        setFocusedMode(!isFocusedMode);
+    };
+    const tooltipTitle = isFocusedMode
+        ? 'Свернуть и вернуть шапку сервиса'
+        : 'Раскрыть на весь экран';
+    return {
+        disabledAction,
+        buttonClassnames,
+        isFocusedMode,
+        handleClick,
+        tooltipTitle,
+    };
+};

package/components/PageHeader/styles.js

@@ -10,6 +10,10 @@ export const Wrapper = 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/components/PageLayoutContainer/styles.js

@@ -13,6 +13,10 @@ export const Wrapper = 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/components/PageLayoutFooter/styles.js

@@ -1,3 +1,4 @@
+import { FOOTER_DESKTOP_HEIGHT } from '../constants';
 import { styled } from '../styled';
 export const Wrapper = styled.footer `
   display: flex;
@@ -5,7 +6,7 @@ export const Wrapper = styled.footer `
   align-items: center;
   justify-content: flex-end;
 
-  min-height: 64px;
+  min-height: ${FOOTER_DESKTOP_HEIGHT};
   padding: ${({ theme }) => theme.spacing(0, 6)};
 
   background-color: ${({ theme }) => theme.palette.background.default};

package/components/PagePinnableAside/styles.js

@@ -1,3 +1,4 @@
+import { FOOTER_DESKTOP_HEIGHT, FOOTER_LAPTOP_HEIGHT } from '../constants';
 import { PAGE_ASIDE_WIDTH } from '../PageAside';
 import { css, styled } from '../styled';
 import { pinnableAsideClassnames } from './constants';
@@ -120,7 +121,7 @@ export const Footer = styled.footer `
   flex-shrink: 0;
 
   box-sizing: content-box;
-  height: 64px;
+  height: ${FOOTER_DESKTOP_HEIGHT};
   margin-top: auto;
 
   background-color: ${({ theme }) => theme.palette.background.default};
@@ -129,4 +130,8 @@ export const Footer = styled.footer `
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: none;
   }
+
+  ${({ theme }) => theme.breakpoints.down('lg')} {
+    height: ${FOOTER_LAPTOP_HEIGHT};
+  }
 `;

package/components/constants/footer.d.ts

@@ -0,0 +1,2 @@
+export declare const FOOTER_DESKTOP_HEIGHT = "64px";
+export declare const FOOTER_LAPTOP_HEIGHT = "56px";

package/components/constants/footer.js

@@ -0,0 +1,2 @@
+export const FOOTER_DESKTOP_HEIGHT = '64px';
+export const FOOTER_LAPTOP_HEIGHT = '56px';

package/components/constants/index.d.ts

@@ -1,2 +1,3 @@
 export * from './date';
 export * from './scrollbar';
+export * from './footer';

package/components/constants/index.js

@@ -1,2 +1,3 @@
 export * from './date';
 export * from './scrollbar';
+export * from './footer';

package/components/useFeatureFlags/useFeatureFlags.d.ts

@@ -17,5 +17,8 @@ type UseFeatureFlagsParams<TFlag extends keyof NextFeatureFlagsContextProps> = {
  * @param componentName - Название компонента, для которого нужно получить флаги.
  * @param localFlags - Локальные флаги, переданные через пропсы.
  */
-export declare const useFeatureFlags: <TFlag extends never>({ localFlags, }: UseFeatureFlagsParams<TFlag>) => {};
+export declare const useFeatureFlags: <TFlag extends keyof {
+    showFocusModeButtonOnLaptop?: boolean | undefined;
+    showFocusModeButtonOnDesktop?: boolean | undefined;
+}>({ localFlags, }: UseFeatureFlagsParams<TFlag>) => {};
 export {};

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,
 });