@astral/ui 4.31.1 → 4.32.0

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

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

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

@@ -1,6 +1,7 @@
 import { createUIKitClassname } from '../utils/createUIKitClassname';
 export { buttonClasses } from '@mui/material/Button';
 export const buttonClassnames = {
+    root: createUIKitClassname('button'),
     loading: createUIKitClassname('button_loading'),
     selected: createUIKitClassname('button_selected'),
 };

package/components/DashboardLayout/DashboardWrapper/styles.js

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

package/components/DashboardLayout/Header/styles.js

@@ -28,7 +28,7 @@ export const HeaderRoot = styled('header', {
     });
 }};
 
-  ${({ theme }) => theme.breakpoints.down('lg')} {
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
     height: ${HEADER_HEIGHT_LAPTOP};
   }
 

package/components/DashboardSidebar/styles.js

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

package/components/DataGridPaginationContainer/styles.js

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

@@ -11,13 +11,16 @@ export const Wrapper = 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/components/PageContent/styles.js

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

@@ -13,5 +13,5 @@ export const HeaderContent = ({ backButton, description, subheader, breadcrumbs,
         }
         return (_jsx(BreadcrumbsWrapper, { children: Array.isArray(breadcrumbs) ? (_jsx(Breadcrumbs, { children: breadcrumbs })) : (breadcrumbs) }));
     };
-    return (_jsxs(_Fragment, { children: [renderBreadcrumbs(), _jsx(DesktopTitleWrapper, { children: _jsx(Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), _jsx(Description, { description: description, isLoading: isLoading }), actions && (_jsx(PageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", ...actions })), filters && _jsx(PageFilters, { children: filters }), subheader && _jsx(PageSubheader, { children: subheader })] }));
+    return (_jsxs(_Fragment, { children: [renderBreadcrumbs(), _jsx(DesktopTitleWrapper, { children: _jsx(Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), _jsx(Description, { description: description, isLoading: isLoading }), actions && (_jsx(PageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", withCollapseOnLaptop: Boolean(filters), ...actions })), filters && _jsx(PageFilters, { children: filters }), subheader && _jsx(PageSubheader, { children: subheader })] }));
 };

package/components/PageHeader/HeaderContent/styles.js

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

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

@@ -7,18 +7,14 @@ import { MainActions } from './MainActions';
 import { PageActionSkeleton } from './PageActionSkeleton';
 import { SecondaryActions } from './SecondaryActions';
 import { SecondaryVisibleActions } from './SecondaryVisibleActions';
-import { ActionWrapper, FocusModeButton, SecondaryWrapper, Wrapper, } from './styles';
+import { ActionWrapper, CollapsedActionsWrapper, FocusModeButton, MainActionsWrapper, SecondaryVisibleWrapper, Wrapper, } from './styles';
 import { useLogic } from './useLogic';
 const PageActionsInner = (props, ref) => {
     const { secondary, secondaryVisible, main, className, isLoading, size = 'medium', spacing = 2, } = props;
-    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 }))] }));
+    const { disabledAction, buttonClassnames, isFocusedMode, handleClick, tooltipTitle, collapsedActions, classnames, } = useLogic(props);
     if (isLoading) {
         return (_jsx(Wrapper, { children: _jsx(PageActionSkeleton, { size: size }) }));
     }
-    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()] }) }));
+    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(MainActionsWrapper, { "$spacing": spacing, className: classnames, children: _jsx(MainActions, { isDisabled: disabledAction, actions: main, size: size, spacing: spacing }) }), _jsxs(SecondaryVisibleWrapper, { "$spacing": spacing, className: classnames, children: [secondaryVisible && (_jsx(SecondaryVisibleActions, { actions: secondaryVisible, size: size })), secondary && (_jsx(SecondaryActions, { isDisabled: disabledAction, actions: secondary, size: size }))] }), collapsedActions.length > 0 && (_jsx(CollapsedActionsWrapper, { className: classnames, children: _jsx(SecondaryActions, { isDisabled: disabledAction, actions: collapsedActions, size: size }) }))] }) }));
 };
 export const PageActions = forwardRefWithGeneric(PageActionsInner);

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

@@ -3,3 +3,6 @@ export const focusModeButtonClassnames = {
     isShowOnDesktop: createUIKitClassname('focus-mode-button__show-desktop'),
     isShowOnLaptop: createUIKitClassname('focus-mode-button__show-laptop'),
 };
+export const actionsClassnames = {
+    withCollapseOnLaptop: createUIKitClassname('actions_collapse-on-laptop'),
+};

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

@@ -3,12 +3,22 @@ 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 SecondaryWrapper: import("../../styled").StyledComponent<{
+export declare const MainActionsWrapper: import("../../styled").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("../../styled").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("../../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 ActionWrapper: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

package/components/PageHeader/PageActions/styles.js

@@ -1,25 +1,60 @@
 import { IconButton } from '../../IconButton';
 import { styled } from '../../styled';
-import { focusModeButtonClassnames } from './constants';
+import { actionsClassnames, focusModeButtonClassnames } from './constants';
 export const Wrapper = styled.div `
   display: flex;
   grid-column: 3;
   grid-row: 1 / 4;
   gap: ${({ theme }) => theme.spacing(2)};
 
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    grid-column: 4;
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: none;
   }
 `;
-export const SecondaryWrapper = styled('div') `
+export const MainActionsWrapper = styled.div `
+  display: flex;
+  gap: ${({ theme, $spacing }) => theme.spacing($spacing)};
+
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    &.${actionsClassnames.withCollapseOnLaptop} {
+      display: none;
+    }
+  }
+`;
+export const SecondaryVisibleWrapper = styled('div') `
   display: flex;
   flex-wrap: nowrap;
   gap: ${({ theme, $spacing }) => theme.spacing($spacing)};
 
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    &.${actionsClassnames.withCollapseOnLaptop} {
+      display: none;
+    }
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     gap: ${({ theme }) => theme.spacing(2)};
   }
 `;
+export const CollapsedActionsWrapper = styled.div `
+  display: none;
+
+  margin-left: auto;
+
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    &.${actionsClassnames.withCollapseOnLaptop} {
+      display: flex;
+    }
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;
 export const ActionWrapper = styled.div `
   display: flex;
   flex-direction: row-reverse;
@@ -32,13 +67,13 @@ export const ActionWrapper = styled.div `
 export const FocusModeButton = styled(IconButton) `
   display: none;
 
-  ${({ theme }) => theme.breakpoints.down('lg')} {
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
     &.${focusModeButtonClassnames.isShowOnLaptop} {
       display: inline-flex;
     }
   }
     
-  ${({ theme }) => theme.breakpoints.up('lg')} {
+  ${({ theme }) => theme.breakpoints.up('laptop')} {
     &.${focusModeButtonClassnames.isShowOnDesktop} {
       display: inline-flex;
     }

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

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

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

@@ -1,10 +1,10 @@
-import { useContext, useMemo } from 'react';
+import { useCallback, 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, }) => {
+import { actionsClassnames, focusModeButtonClassnames } from '../constants';
+export const useLogic = ({ main, secondary, secondaryVisible, withCollapseOnLaptop = false, }) => {
     const { showFocusModeButtonOnDesktop, showFocusModeButtonOnLaptop } = useContext(NextFeatureFlagsContext);
     const { setFocusedMode, isFocusedMode } = useContext(DashboardContext);
     const { disabledAction } = useActionsState({ main, secondary });
@@ -18,11 +18,46 @@ export const useLogic = ({ main, secondary, }) => {
     const tooltipTitle = isFocusedMode
         ? 'Свернуть и вернуть шапку сервиса'
         : 'Раскрыть на весь экран';
+    // Все действия убираются в кнопку с троеточием на laptop разрешениях
+    const getCollapsedActions = 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 = useMemo(() => {
+        return classNames({
+            [actionsClassnames.withCollapseOnLaptop]: withCollapseOnLaptop,
+        });
+    }, [withCollapseOnLaptop]);
     return {
         disabledAction,
         buttonClassnames,
         isFocusedMode,
         handleClick,
         tooltipTitle,
+        collapsedActions: getCollapsedActions(),
+        classnames,
     };
 };

package/components/PageHeader/styles.js

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

@@ -13,10 +13,6 @@ 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,4 +1,4 @@
-import { FOOTER_DESKTOP_HEIGHT } from '../constants';
+import { FOOTER_DESKTOP_HEIGHT, FOOTER_LAPTOP_HEIGHT } from '../constants';
 import { styled } from '../styled';
 export const Wrapper = styled.footer `
   display: flex;
@@ -14,6 +14,10 @@ export const Wrapper = 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: ${FOOTER_LAPTOP_HEIGHT};
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: none;
 

package/components/PagePinnableAside/styles.js

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

package/components/declaration/mui-material.d.ts

@@ -9,6 +9,10 @@ import {
 } from '../theme/types';
 
 declare module '@mui/material/styles' {
+  interface BreakpointOverrides {
+    laptop: true;
+  }
+
   export interface Theme
     extends Omit<MuiTheme, 'shadows' | 'palette' | 'shape' | 'typography'> {
     elevation: Elevation;

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

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

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

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '../../../components/Button';
 import { Filter2OutlineMd } from '../../../icons/Filter2OutlineMd';
 import { formFiltersClassnames } from '../constants';
-import { AllFiltersButtonWrapper, StyledBadge, StyledCounter } from './styles';
+import { AllFiltersButtonWrapper, StyledBadge, StyledCounter, StyledTooltip, } from './styles';
 import { useLogic } from './useLogic';
 export const AllFiltersButton = (props) => {
     const { allFiltersButtonClassName, counter, onOpenModal } = useLogic(props);
-    return (_jsx(AllFiltersButtonWrapper, { className: allFiltersButtonClassName, children: _jsx(StyledBadge, { color: "error", badgeContent: counter, variant: "dot", children: _jsx(Button, { onClick: onOpenModal, variant: "outlined", color: "grey", startIcon: _jsx(Filter2OutlineMd, {}), endIcon: counter ? _jsx(StyledCounter, { color: "error", content: counter }) : null, className: formFiltersClassnames.allFiltersButton, children: "\u0412\u0441\u0435 \u0444\u0438\u043B\u044C\u0442\u0440\u044B" }) }) }));
+    return (_jsx(AllFiltersButtonWrapper, { className: allFiltersButtonClassName, children: _jsx(StyledBadge, { color: "error", badgeContent: counter, variant: "dot", children: _jsx(StyledTooltip, { title: "\u0424\u0438\u043B\u044C\u0442\u0440\u044B", enterDelay: 400, enterNextDelay: 400, placement: "bottom-end", children: _jsx(Button, { onClick: onOpenModal, variant: "outlined", color: "grey", startIcon: _jsx(Filter2OutlineMd, {}), endIcon: counter ? _jsx(StyledCounter, { color: "error", content: counter }) : null, className: formFiltersClassnames.allFiltersButton, children: "\u0412\u0441\u0435 \u0444\u0438\u043B\u044C\u0442\u0440\u044B" }) }) }) }));
 };

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

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

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

@@ -1,7 +1,10 @@
 import { badgeClasses } from '@mui/material/Badge';
+import { tooltipClasses } from '@mui/material/Tooltip';
 import { Badge } from '../../../components/Badge';
+import { buttonClassnames } from '../../../components/Button/constants';
 import { Counter } from '../../../components/Counter';
 import { styled } from '../../../components/styled';
+import { Tooltip } from '../../../components/Tooltip';
 import { formFiltersClassnames } from '../constants';
 export const AllFiltersButtonWrapper = styled.div `
   display: none;
@@ -12,6 +15,22 @@ export const AllFiltersButtonWrapper = styled.div `
     display: flex;
   }
 
+    ${({ theme }) => theme.breakpoints.between('sm', 'laptop')} {
+    &.${formFiltersClassnames.showAllFiltersButtonOnLaptop} {
+      display: flex;
+    }
+
+    .${formFiltersClassnames.allFiltersButton} {
+      padding: ${({ theme }) => theme.microSpacing(0, 3)};
+
+      font-size: 0;
+
+      &.${buttonClassnames.root} {
+        gap: 0;
+      }
+    }
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     margin-right: 0;
     &.${formFiltersClassnames.showAllFiltersButtonOnMobile} {
@@ -38,16 +57,27 @@ export const AllFiltersButtonWrapper = styled.div `
     }
   }
 `;
+export const StyledTooltip = styled(Tooltip) `
+  & .${tooltipClasses.tooltip} {
+    ${({ theme }) => theme.breakpoints.up('laptop')} {
+      display: none;
+    }
+  }
+`;
 export const StyledBadge = styled(Badge) `
-   width: 100%; 
+   width: 100%;
+
   .${badgeClasses.dot} {
-      ${({ theme }) => theme.breakpoints.up('sm')} {
+     top: ${({ theme }) => theme.spacing(1)};
+     right: ${({ theme }) => theme.spacing(1)};
+
+      ${({ theme }) => theme.breakpoints.up('laptop')} {
         display: none;
       }
     }
 `;
 export const StyledCounter = styled(Counter) `
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
     display: none;
   }
 `;

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

@@ -20,6 +20,7 @@ export const useLogic = ({ form, onOpenModal, hasMainFilters, hasSecondaryFilter
     const allFiltersButtonClassName = useMemo(() => {
         return classNames({
             [formFiltersClassnames.showAllFiltersButtonOnDesktop]: hasSecondaryFilters,
+            [formFiltersClassnames.showAllFiltersButtonOnLaptop]: hasMainFilters || hasSecondaryFilters,
             [formFiltersClassnames.showAllFiltersButtonOnMobile]: hasMainFilters || hasSecondaryFilters,
             [formFiltersClassnames.withSearch]: hasSearch,
             [formFiltersClassnames.withoutSearch]: !hasSearch,

package/hook-form/FormFilters/FormFiltersSkeleton/styles.js

@@ -7,6 +7,13 @@ export const SkeletonWrapper = styled.div `
 
   margin-top: ${({ theme }) => theme.spacing(4)};
 
+  ${({ theme }) => theme.breakpoints.between('sm', 'laptop')} {
+    grid-template-columns: 72px 0 0 0;
+    gap: 0;
+
+    margin: ${({ theme }) => theme.spacing(0, 2, 0)};
+  }
+
   .${skeletonClasses.root} {
     height: 32px;
   }

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

@@ -3,6 +3,7 @@ export declare const formFiltersClassnames: {
     submitButton: string;
     allFiltersButton: string;
     showAllFiltersButtonOnDesktop: string;
+    showAllFiltersButtonOnLaptop: string;
     showAllFiltersButtonOnMobile: string;
     withSearch: string;
     withoutSearch: string;

package/hook-form/FormFilters/constants.js

@@ -4,6 +4,7 @@ export const formFiltersClassnames = {
     submitButton: createUIKitClassname('form-filters__submit-button'),
     allFiltersButton: createUIKitClassname('form-filters__all-filters-button'),
     showAllFiltersButtonOnDesktop: createUIKitClassname('form-filters_show-all-filters-button_desktop'),
+    showAllFiltersButtonOnLaptop: createUIKitClassname('form-filters_show-all-filters-button_laptop'),
     showAllFiltersButtonOnMobile: createUIKitClassname('form-filters_show-all-filters-button_mobile'),
     withSearch: createUIKitClassname('form-filters_with-search'),
     withoutSearch: createUIKitClassname('form-filters_without-search'),

package/hook-form/FormFilters/styles.js

@@ -13,9 +13,13 @@ export const Wrapper = styled.div `
   .${formLabelClasses.root} {
     display: none;
   }
+  
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    margin-top: 0;
+    padding-right: ${({ theme }) => theme.spacing(2)};
+  }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    margin-top: 0;
     padding: ${({ theme }) => theme.spacing(1, 4, 5, 4)};
 
     font-size: 0;
@@ -37,14 +41,14 @@ export const MainFiltersWrapper = styled.div `
 
   width: 100%;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
     display: none;
   }
 `;
 export const SubmitButtonWrapper = styled.div `
   white-space: nowrap;
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    display: contents;
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    display: none;
   }
 `;