@astral/ui 4.31.2 → 4.32.0

package/hook-form/FormFiltersSearchField/FormFiltersSearchField.js

@@ -2,16 +2,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRefWithGeneric } from '../../components/forwardRefWithGeneric';
 import { SearchField, } from '../../components/SearchField';
 import { useFormFieldProps } from '../useFormFieldProps';
-import { FORM_FILTERS_SEARCH_FIELD_ID } from './constants';
+import { FORM_FILTERS_SEARCH_FIELD_ID, formFiltersSearchFieldClassnames, } from './constants';
 import { Wrapper } from './styles';
 /**
- * Адаптер для SearchField
+ * Адаптер для SearchField для использования в FormFilters
  */
 function FormFiltersSearchFieldInner({ width, ...props }, ref) {
     const fieldProps = useFormFieldProps({
         ...props,
         defaultValue: props.defaultValue || '',
     });
-    return (_jsx(Wrapper, { "$width": width, children: _jsx(SearchField, { ...fieldProps, ref: ref, inputProps: { id: FORM_FILTERS_SEARCH_FIELD_ID }, fullWidth: true }) }));
+    const hasValue = Boolean(fieldProps.value);
+    return (_jsx(Wrapper, { "$width": width, className: hasValue ? formFiltersSearchFieldClassnames.hasValue : '', children: _jsx(SearchField, { ...fieldProps, ref: ref, inputProps: { id: FORM_FILTERS_SEARCH_FIELD_ID }, fullWidth: true }) }));
 }
 export const FormFiltersSearchField = forwardRefWithGeneric(FormFiltersSearchFieldInner);

package/hook-form/FormFiltersSearchField/constants.d.ts

@@ -1 +1,5 @@
 export declare const FORM_FILTERS_SEARCH_FIELD_ID = "form-filters-search-field";
+export declare const formFiltersSearchFieldClassnames: {
+    hasValue: string;
+};
+export declare const DEFAULT_SEARCH_FIELD_WIDTH = "240px";

package/hook-form/FormFiltersSearchField/constants.js

@@ -1 +1,6 @@
+import { createUIKitClassname } from '../../components/utils/createUIKitClassname';
 export const FORM_FILTERS_SEARCH_FIELD_ID = 'form-filters-search-field';
+export const formFiltersSearchFieldClassnames = {
+    hasValue: createUIKitClassname('form-filters-search-field__has-value'),
+};
+export const DEFAULT_SEARCH_FIELD_WIDTH = '240px';

package/hook-form/FormFiltersSearchField/styles.js

@@ -1,6 +1,65 @@
+import { formControlClasses } from '@mui/material/FormControl';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import { svgIconClassnames } from '../../components/SvgIcon';
 import { styled } from '../../components/styled';
+import { DEFAULT_SEARCH_FIELD_WIDTH, formFiltersSearchFieldClassnames, } from './constants';
 export const Wrapper = styled.div `
-  min-width: ${({ $width }) => $width || '240px'};
+  min-width: ${({ $width }) => $width || DEFAULT_SEARCH_FIELD_WIDTH};
+
+  ${({ theme }) => theme.breakpoints.between('sm', 'laptop')} {
+    overflow: hidden;
+
+    width: ${({ $width }) => $width || DEFAULT_SEARCH_FIELD_WIDTH};
+    min-width: unset;
+
+    transition: ${({ theme }) => theme.transitions.create(['width', 'padding'], {
+    duration: theme.transitions.duration.shorter,
+    easing: theme.transitions.easing.easeInOut,
+    delay: theme.transitions.duration.shorter,
+})};
+
+    .${formControlClasses.root} {
+      display: flex;
+      flex-direction: row-reverse;
+
+      width: 100%;
+      min-width: 32px;
+    }
+
+    .${outlinedInputClasses.root} {
+      transition: ${({ theme }) => theme.transitions.create(['width', 'padding'], {
+    duration: theme.transitions.duration.shorter,
+    easing: theme.transitions.easing.easeInOut,
+    delay: theme.transitions.duration.shorter,
+})};
+    }
+
+    .${svgIconClassnames.root} {
+      transition: ${({ theme }) => theme.transitions.create(['fill'], {
+    duration: theme.transitions.duration.shorter,
+    easing: theme.transitions.easing.easeInOut,
+    delay: theme.transitions.duration.shorter,
+})};
+    }
+
+    &:not(:hover, :focus-within):not(.${formFiltersSearchFieldClassnames.hasValue}) {
+      width: 32px;
+
+      .${svgIconClassnames.root} {
+        fill: ${({ theme }) => theme.palette.grey[800]};
+      }
+
+      .${outlinedInputClasses.root} {
+        padding: ${({ theme }) => theme.microSpacing(1, 3)};
+      }
+
+      .${inputBaseClasses.input} {
+        width: 0;
+        min-width: 0;
+      }
+    }
+  }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     width: 100%;

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

@@ -3,4 +3,4 @@ export * from './hooks';
 export { MainActions, useMainActions } from './MainActions';
 export { SecondaryActions } from './SecondaryActions';
 export { SecondaryVisibleActions } from './SecondaryVisibleActions';
-export type { ActionGroupProps, MainAction, MainActionsProps, SecondaryActionProps, SecondaryVisibleActionProps, } from './types';
+export type { ActionGroupProps, MainAction, MainActionsProps, SecondaryAction, SecondaryActionProps, SecondaryVisibleAction, SecondaryVisibleActionProps, } from './types';

package/node/components/Button/Button.js

@@ -13,7 +13,7 @@ const UnwrappedButton = (props, ref) => {
     const { variant = enums_1.ButtonVariants.Contained, color = variant === enums_1.ButtonVariants.Text
         ? enums_1.ButtonColors.Grey
         : enums_1.ButtonColors.Primary, loading, disabled, children, className, selected, ...restProps } = props;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledButton, { variant: variant, ref: ref, color: color, disabled: disabled, selected: selected, ...restProps, className: (0, classNames_1.classNames)(className, {
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledButton, { variant: variant, ref: ref, color: color, disabled: disabled, selected: selected, ...restProps, className: (0, classNames_1.classNames)(className, constants_1.buttonClassnames.root, {
             [constants_1.buttonClassnames.loading]: loading,
             [constants_1.buttonClassnames.selected]: selected,
         }), "aria-disabled": loading, children: [loading && ((0, jsx_runtime_1.jsx)(styles_1.StyledLoader, { color: loadingIndicatorColor, size: "small", "$color": color, "$variant": variant, "$isDisabled": disabled })), children] }));

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

@@ -1,5 +1,6 @@
 export { buttonClasses } from '@mui/material/Button';
 export declare const buttonClassnames: {
+    root: string;
     loading: string;
     selected: string;
 };

package/node/components/Button/constants.js

@@ -5,6 +5,7 @@ const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 var Button_1 = require("@mui/material/Button");
 Object.defineProperty(exports, "buttonClasses", { enumerable: true, get: function () { return Button_1.buttonClasses; } });
 exports.buttonClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('button'),
     loading: (0, createUIKitClassname_1.createUIKitClassname)('button_loading'),
     selected: (0, createUIKitClassname_1.createUIKitClassname)('button_selected'),
 };

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

@@ -31,7 +31,7 @@ exports.DecorativeHeaderBackground = styled_1.styled.div `
     });
 }};
 
- ${({ theme }) => theme.breakpoints.down('lg')} {
+ ${({ theme }) => theme.breakpoints.down('laptop')} {
     height: ${({ $isFocusedMode }) => ($isFocusedMode ? 0 : constants_2.HEADER_HEIGHT_LAPTOP)}
   }
 

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

@@ -31,7 +31,7 @@ exports.HeaderRoot = (0, styled_1.styled)('header', {
     });
 }};
 
-  ${({ theme }) => theme.breakpoints.down('lg')} {
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
     height: ${constants_4.HEADER_HEIGHT_LAPTOP};
   }
 

package/node/components/DashboardSidebar/styles.js

@@ -142,7 +142,7 @@ exports.Footer = styled_1.styled.footer `
     display: none;
   }
 
-  ${({ theme }) => theme.breakpoints.down('lg')} {
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
     height: ${constants_1.FOOTER_LAPTOP_HEIGHT};
   }
 `;

package/node/components/DataGridPaginationContainer/styles.js

@@ -27,7 +27,7 @@ exports.PaginationWrapper = styled_1.styled.div `
   margin: 0 ${({ theme }) => theme.spacing(2)};
   padding-top: ${({ theme }) => theme.spacing(4)};
 
-  ${({ theme }) => theme.breakpoints.down('lg')} {
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
     padding-top: ${({ theme }) => theme.spacing(2)};
   }
 

package/node/components/PageAside/styles.js

@@ -14,13 +14,16 @@ exports.Wrapper = styled_1.styled.aside `
   border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
   border-left: 1px solid ${({ theme }) => theme.palette.grey[300]};
 
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    padding: ${({ theme }) => theme.spacing(4)};
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     overflow: unset;
     order: 3;
 
     width: unset;
     margin: ${({ theme }) => theme.spacing(0, 4, 4)};
-    padding: ${({ theme }) => theme.spacing(4)};
 
     background-color: ${({ theme }) => theme.palette.background.default};
     border-top: 0;

package/node/components/PageContent/styles.js

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

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 })), filters && (0, jsx_runtime_1.jsx)(styles_1.PageFilters, { children: filters }), subheader && (0, jsx_runtime_1.jsx)(styles_1.PageSubheader, { children: subheader })] }));
+    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", withCollapseOnLaptop: Boolean(filters), ...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/HeaderContent/styles.js

@@ -14,7 +14,7 @@ exports.BreadcrumbsWrapper = styled_1.styled.div `
 `;
 exports.PageSubheader = styled_1.styled.div `
   grid-column: 1 / -1;
-  grid-row: 4;
+  grid-row: 5;
 
   padding-top: ${({ theme }) => theme.spacing(4)};
 
@@ -24,7 +24,12 @@ exports.PageSubheader = styled_1.styled.div `
 `;
 exports.PageFilters = styled_1.styled.div `
   grid-column: 1 / -1;
-  grid-row: 5;
+  grid-row: 4;
+
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    grid-column: 3;
+    grid-row: 1 / 4;
+  }
 `;
 exports.DesktopTitleWrapper = styled_1.styled.div `
   display: contents;

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

@@ -3,4 +3,5 @@ export declare const PageActions: <TMainActionComponent extends ElementType = El
     isLoading?: boolean | undefined;
     size?: "large" | "medium" | undefined;
     spacing?: number | undefined;
+    withCollapseOnLaptop?: boolean | undefined;
 } & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

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

@@ -14,14 +14,10 @@ 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, 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 }))] }));
+    const { disabledAction, buttonClassnames, isFocusedMode, handleClick, tooltipTitle, collapsedActions, classnames, } = (0, useLogic_1.useLogic)(props);
     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)(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()] }) }));
+    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)(styles_1.MainActionsWrapper, { "$spacing": spacing, className: classnames, children: (0, jsx_runtime_1.jsx)(MainActions_1.MainActions, { isDisabled: disabledAction, actions: main, size: size, spacing: spacing }) }), (0, jsx_runtime_1.jsxs)(styles_1.SecondaryVisibleWrapper, { "$spacing": spacing, className: classnames, 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 }))] }), collapsedActions.length > 0 && ((0, jsx_runtime_1.jsx)(styles_1.CollapsedActionsWrapper, { className: classnames, children: (0, jsx_runtime_1.jsx)(SecondaryActions_1.SecondaryActions, { isDisabled: disabledAction, actions: collapsedActions, size: size }) }))] }) }));
 };
 exports.PageActions = (0, forwardRefWithGeneric_1.forwardRefWithGeneric)(PageActionsInner);

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

@@ -2,3 +2,6 @@ export declare const focusModeButtonClassnames: {
     isShowOnDesktop: string;
     isShowOnLaptop: string;
 };
+export declare const actionsClassnames: {
+    withCollapseOnLaptop: string;
+};

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

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.focusModeButtonClassnames = void 0;
+exports.actionsClassnames = 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'),
 };
+exports.actionsClassnames = {
+    withCollapseOnLaptop: (0, createUIKitClassname_1.createUIKitClassname)('actions_collapse-on-laptop'),
+};

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

@@ -3,12 +3,22 @@ export declare const Wrapper: import("@emotion/styled/dist/declarations/src/type
     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 SecondaryWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+export declare const MainActionsWrapper: 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;
 } & {
     $spacing: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SecondaryVisibleWrapper: 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;
+} & {
+    $spacing: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CollapsedActionsWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ActionWrapper: 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;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FocusModeButton = exports.ActionWrapper = exports.SecondaryWrapper = exports.Wrapper = void 0;
+exports.FocusModeButton = exports.ActionWrapper = exports.CollapsedActionsWrapper = exports.SecondaryVisibleWrapper = exports.MainActionsWrapper = exports.Wrapper = void 0;
 const IconButton_1 = require("../../IconButton");
 const styled_1 = require("../../styled");
 const constants_1 = require("./constants");
@@ -10,19 +10,54 @@ exports.Wrapper = styled_1.styled.div `
   grid-row: 1 / 4;
   gap: ${({ theme }) => theme.spacing(2)};
 
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    grid-column: 4;
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: none;
   }
 `;
-exports.SecondaryWrapper = (0, styled_1.styled)('div') `
+exports.MainActionsWrapper = styled_1.styled.div `
+  display: flex;
+  gap: ${({ theme, $spacing }) => theme.spacing($spacing)};
+
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    &.${constants_1.actionsClassnames.withCollapseOnLaptop} {
+      display: none;
+    }
+  }
+`;
+exports.SecondaryVisibleWrapper = (0, styled_1.styled)('div') `
   display: flex;
   flex-wrap: nowrap;
   gap: ${({ theme, $spacing }) => theme.spacing($spacing)};
 
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    &.${constants_1.actionsClassnames.withCollapseOnLaptop} {
+      display: none;
+    }
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     gap: ${({ theme }) => theme.spacing(2)};
   }
 `;
+exports.CollapsedActionsWrapper = styled_1.styled.div `
+  display: none;
+
+  margin-left: auto;
+
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    &.${constants_1.actionsClassnames.withCollapseOnLaptop} {
+      display: flex;
+    }
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;
 exports.ActionWrapper = styled_1.styled.div `
   display: flex;
   flex-direction: row-reverse;
@@ -35,13 +70,13 @@ exports.ActionWrapper = styled_1.styled.div `
 exports.FocusModeButton = (0, styled_1.styled)(IconButton_1.IconButton) `
   display: none;
 
-  ${({ theme }) => theme.breakpoints.down('lg')} {
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
     &.${constants_1.focusModeButtonClassnames.isShowOnLaptop} {
       display: inline-flex;
     }
   }
     
-  ${({ theme }) => theme.breakpoints.up('lg')} {
+  ${({ theme }) => theme.breakpoints.up('laptop')} {
     &.${constants_1.focusModeButtonClassnames.isShowOnDesktop} {
       display: inline-flex;
     }

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

@@ -11,4 +11,8 @@ export type PageActionsProps<TMainActionComponent extends ElementType = ElementT
      * Отступ между действиями
      */
     spacing?: number;
+    /**
+     * Если true, отображается кнопка с троеточием на laptop разрешениях
+     */
+    withCollapseOnLaptop?: boolean;
 };

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

@@ -1,11 +1,12 @@
 import { type ElementType } from 'react';
+import { type SecondaryAction } from '../../../ActionGroup';
 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>) => {
+export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType>({ main, secondary, secondaryVisible, withCollapseOnLaptop, }: PageActionsProps<TMainActionComponent, TSecondaryActionComponent>) => {
     disabledAction: boolean;
     buttonClassnames: string;
     isFocusedMode: boolean;
     handleClick: () => void;
     tooltipTitle: string;
+    collapsedActions: SecondaryAction<TSecondaryActionComponent>[];
+    classnames: string;
 };
-export {};

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

@@ -7,7 +7,7 @@ const NextFeatureFlagsContext_1 = require("../../../ConfigProvider/NextFeatureFl
 const DashboardContext_1 = require("../../../DashboardContext");
 const classNames_1 = require("../../../utils/classNames");
 const constants_1 = require("../constants");
-const useLogic = ({ main, secondary, }) => {
+const useLogic = ({ main, secondary, secondaryVisible, withCollapseOnLaptop = false, }) => {
     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 });
@@ -21,12 +21,47 @@ const useLogic = ({ main, secondary, }) => {
     const tooltipTitle = isFocusedMode
         ? 'Свернуть и вернуть шапку сервиса'
         : 'Раскрыть на весь экран';
+    // Все действия убираются в кнопку с троеточием на laptop разрешениях
+    const getCollapsedActions = (0, react_1.useCallback)(() => {
+        const fromMain = main?.flatMap((action) => {
+            if ('isNested' in action && action.isNested) {
+                return action.actions.map((nested) => ({
+                    text: nested.text,
+                    onClick: nested.onClick,
+                    disabled: disabledAction || ('disabled' in nested && nested.disabled),
+                }));
+            }
+            const { text, onClick, disabled } = action;
+            return [{ text, onClick, disabled: disabledAction || disabled }];
+        });
+        const fromSecondaryVisible = secondaryVisible?.map(({ name, onClick, disabled }) => ({
+            text: name,
+            onClick,
+            disabled: disabledAction || disabled,
+        }));
+        const fromSecondary = secondary?.map(({ disabled, ...rest }) => ({
+            ...rest,
+            disabled: disabledAction || disabled,
+        }));
+        return [
+            ...(fromMain || []),
+            ...(fromSecondaryVisible || []),
+            ...(fromSecondary || []),
+        ];
+    }, [main, secondary, secondaryVisible, disabledAction]);
+    const classnames = (0, react_1.useMemo)(() => {
+        return (0, classNames_1.classNames)({
+            [constants_1.actionsClassnames.withCollapseOnLaptop]: withCollapseOnLaptop,
+        });
+    }, [withCollapseOnLaptop]);
     return {
         disabledAction,
         buttonClassnames,
         isFocusedMode,
         handleClick,
         tooltipTitle,
+        collapsedActions: getCollapsedActions(),
+        classnames,
     };
 };
 exports.useLogic = useLogic;

package/node/components/PageHeader/styles.js

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

package/node/components/PageLayoutFooter/styles.js

@@ -17,6 +17,10 @@ exports.Wrapper = styled_1.styled.footer `
   border-bottom-right-radius: ${({ theme, $hasAside }) => ($hasAside ? 0 : theme.shape.medium)};
   border-bottom-left-radius: ${({ theme }) => theme.shape.medium};
 
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    min-height: ${constants_1.FOOTER_LAPTOP_HEIGHT};
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: none;
 

package/node/components/PagePinnableAside/styles.js

@@ -115,7 +115,7 @@ exports.ChildrenWrapper = styled_1.styled.div `
 
   padding: ${({ theme }) => theme.spacing(4, 6)};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
     padding: ${({ theme }) => theme.spacing(4)};
   }
 `;
@@ -134,7 +134,7 @@ exports.Footer = styled_1.styled.footer `
     display: none;
   }
 
-  ${({ theme }) => theme.breakpoints.down('lg')} {
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
     height: ${constants_1.FOOTER_LAPTOP_HEIGHT};
   }
 `;

package/node/components/theme/breakpoints.d.ts

@@ -1,2 +1,11 @@
 import type { BreakpointsOptions } from '@mui/material/styles';
-export declare const defaultBreakpoints: BreakpointsOptions;
+export declare const defaultBreakpoints: BreakpointsOptions & {
+    values: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        laptop: number;
+        xl: number;
+    };
+};

package/node/components/theme/breakpoints.js

@@ -7,6 +7,7 @@ exports.defaultBreakpoints = {
         sm: 600,
         md: 900,
         lg: 1200,
+        laptop: 1370,
         xl: 1536,
     },
 };

package/node/hook-form/FormFilters/AllFiltersButton/AllFiltersButton.js

@@ -9,6 +9,6 @@ const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const AllFiltersButton = (props) => {
     const { allFiltersButtonClassName, counter, onOpenModal } = (0, useLogic_1.useLogic)(props);
-    return ((0, jsx_runtime_1.jsx)(styles_1.AllFiltersButtonWrapper, { className: allFiltersButtonClassName, children: (0, jsx_runtime_1.jsx)(styles_1.StyledBadge, { color: "error", badgeContent: counter, variant: "dot", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onOpenModal, variant: "outlined", color: "grey", startIcon: (0, jsx_runtime_1.jsx)(Filter2OutlineMd_1.Filter2OutlineMd, {}), endIcon: counter ? (0, jsx_runtime_1.jsx)(styles_1.StyledCounter, { color: "error", content: counter }) : null, className: constants_1.formFiltersClassnames.allFiltersButton, children: "\u0412\u0441\u0435 \u0444\u0438\u043B\u044C\u0442\u0440\u044B" }) }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.AllFiltersButtonWrapper, { className: allFiltersButtonClassName, children: (0, jsx_runtime_1.jsx)(styles_1.StyledBadge, { color: "error", badgeContent: counter, variant: "dot", children: (0, jsx_runtime_1.jsx)(styles_1.StyledTooltip, { title: "\u0424\u0438\u043B\u044C\u0442\u0440\u044B", enterDelay: 400, enterNextDelay: 400, placement: "bottom-end", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onOpenModal, variant: "outlined", color: "grey", startIcon: (0, jsx_runtime_1.jsx)(Filter2OutlineMd_1.Filter2OutlineMd, {}), endIcon: counter ? (0, jsx_runtime_1.jsx)(styles_1.StyledCounter, { color: "error", content: counter }) : null, className: constants_1.formFiltersClassnames.allFiltersButton, children: "\u0412\u0441\u0435 \u0444\u0438\u043B\u044C\u0442\u0440\u044B" }) }) }) }));
 };
 exports.AllFiltersButton = AllFiltersButton;

package/node/hook-form/FormFilters/AllFiltersButton/styles.d.ts

@@ -3,6 +3,9 @@ export declare const AllFiltersButtonWrapper: import("@emotion/styled/dist/decla
     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 StyledTooltip: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../../components/Tooltip").TooltipProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
 export declare const StyledBadge: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material/Badge").BadgeProps>, "color"> & {
     color: import("../../../components/Badge").BadgeColor;
     withBorder?: boolean | undefined;