@astral/ui 4.34.0 → 4.34.2

package/node/components/DataGridPaginationContainer/styles.js

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

package/node/components/MenuOrganization/faker.js

@@ -4,24 +4,118 @@ exports.makeLongOrganizationNameList = exports.makeOrganizationList = void 0;
 const faker_1 = require("@ui/dev/faker");
 const makeOrganizationList = (props) => {
     const { length = 16 } = props || {};
-    const generateKpp = () => {
-        return faker_1.faker.datatype.boolean()
-            ? String(faker_1.faker.number.int({
-                min: 100000000,
-                max: 999999999,
-            }))
-            : undefined;
-    };
-    return Array.from({ length }).map(() => ({
-        id: faker_1.faker.string.uuid(),
-        name: faker_1.faker.company.name(),
-        inn: String(faker_1.faker.number.int({
-            min: 100000000000,
-            max: 999999999999,
-        })),
-        kpp: generateKpp(),
-        active: faker_1.faker.datatype.boolean(),
-    }));
+    return [
+        {
+            id: '828223d7-648b-4021-b400-659b4e80296b',
+            // cSpell:disable
+            name: 'AO ШелеховЛимитед',
+            inn: '619550717901',
+            active: false,
+        },
+        {
+            id: '94519882-5ff1-4f66-9b0d-d0b6bfea80c7',
+            // cSpell:disable
+            name: 'МУП СнабТрейд',
+            inn: '842492530192',
+            active: false,
+        },
+        {
+            id: '9e48ce0b-472f-42a4-856f-dc57b44065b5',
+            // cSpell:disable
+            name: 'ИП ТулпанИнкорпорэйтед',
+            inn: '325992270803',
+            kpp: '456732438',
+            active: true,
+        },
+        {
+            id: 'c3acf619-27b7-4321-99ca-4b5ae8019b7d',
+            // cSpell:disable
+            name: 'ФГУП ТырныаузТоргСбытИнкорпорэйтед',
+            inn: '182622552754',
+            kpp: '719145463',
+            active: false,
+        },
+        {
+            id: 'c59164d5-c30a-4d7c-9b5a-1682ce5cfb07',
+            name: 'НКО Носков',
+            inn: '317246626786',
+            kpp: '483722344',
+            active: false,
+        },
+        {
+            id: 'a35d7def-5dbe-4c3f-9d8b-54deaba086c1',
+            name: 'ГУП Ангелина',
+            inn: '142270260749',
+            kpp: '811542051',
+            active: false,
+        },
+        {
+            id: '79b37721-4f0e-4c3a-8f0f-055d8250c9fa',
+            name: 'ОАО ГруппТорг',
+            inn: '686064143259',
+            active: false,
+        },
+        {
+            id: '22aa8422-ef4e-48f1-aaf1-9a29789bb54e',
+            name: 'ООО Жанна',
+            inn: '119507796528',
+            kpp: '972633982',
+            active: false,
+        },
+        {
+            id: '884114f2-287d-4246-bae7-ca818026211f',
+            name: 'ПАО Усть-ОрдынскийГрупп',
+            inn: '725534793751',
+            active: true,
+        },
+        {
+            id: '85a162f5-9c93-4016-b0b7-0e5ee60e5111',
+            name: 'ГУП Моисеев',
+            inn: '371420452084',
+            kpp: '400812565',
+            active: true,
+        },
+        {
+            id: 'cb9e9d67-c355-4742-93dd-c184756366f9',
+            name: 'ИП Дорофей',
+            inn: '382425812447',
+            active: false,
+        },
+        {
+            id: '7f274985-bdd6-4197-ba6d-1084db1ce55c',
+            name: 'ПАО Брагин',
+            inn: '287166176754',
+            active: true,
+        },
+        {
+            id: '7e22e1d2-2f09-4e65-adfb-86d354cc5270',
+            // cSpell:disable
+            name: 'ОП КулуЛимитедИнкорпорэйтедПром',
+            inn: '235350171066',
+            active: true,
+        },
+        {
+            id: '94f90867-8998-4614-a1c8-ec7822bbb2a1',
+            name: 'ТСЖ Роман',
+            inn: '372054729872',
+            kpp: '268816135',
+            active: false,
+        },
+        {
+            id: '51da8ba1-dec5-489d-ab02-824ba748181d',
+            // cSpell:disable
+            name: 'ФГУП Азарий',
+            inn: '213960194519',
+            active: false,
+        },
+        {
+            id: '830ce0f2-7398-44e2-90c8-746fa8b29322',
+            name: 'ООО Ксения',
+            inn: '338051726600',
+            kpp: '721606613',
+            active: false,
+        },
+    ].slice(0, length);
 };
 exports.makeOrganizationList = makeOrganizationList;
 const makeLongOrganizationNameList = (props) => {

package/node/components/PageContent/styles.js

@@ -64,6 +64,7 @@ exports.Content = styled_1.styled.div `
 
   ${({ theme }) => theme.breakpoints.down('laptop')} {
     padding-right: ${({ theme }) => theme.spacing(4)};
+    padding-bottom: ${({ theme }) => theme.spacing(3)};
     padding-left: ${({ theme }) => theme.spacing(4)};
   }
 

package/node/components/PageHeader/HeaderContent/FormFiltersProvider/FormFiltersProvider.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+type FormFiltersLayoutContextValue = {
+    filtersClassName?: string;
+    quickFiltersClassName?: string;
+};
+export declare const FormFiltersLayoutContext: import("react").Context<FormFiltersLayoutContextValue | undefined>;
+type FormFiltersProviderProps = FormFiltersLayoutContextValue & {
+    children: ReactNode;
+};
+/**
+ * Задаёт дополнительные классы для корня фильтров и блока быстрых фильтров
+ * (например, из разметки PageHeader).
+ */
+export declare const FormFiltersProvider: ({ children, filtersClassName, quickFiltersClassName, }: FormFiltersProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFiltersProvider = exports.FormFiltersLayoutContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.FormFiltersLayoutContext = (0, react_1.createContext)(undefined);
+/**
+ * Задаёт дополнительные классы для корня фильтров и блока быстрых фильтров
+ * (например, из разметки PageHeader).
+ */
+const FormFiltersProvider = ({ children, filtersClassName, quickFiltersClassName, }) => ((0, jsx_runtime_1.jsx)(exports.FormFiltersLayoutContext.Provider, { value: { filtersClassName, quickFiltersClassName }, children: children }));
+exports.FormFiltersProvider = FormFiltersProvider;

package/node/components/PageHeader/HeaderContent/FormFiltersProvider/index.d.ts

@@ -0,0 +1 @@
+export { FormFiltersProvider, FormFiltersLayoutContext, } from './FormFiltersProvider';

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFiltersLayoutContext = exports.FormFiltersProvider = void 0;
+var FormFiltersProvider_1 = require("./FormFiltersProvider");
+Object.defineProperty(exports, "FormFiltersProvider", { enumerable: true, get: function () { return FormFiltersProvider_1.FormFiltersProvider; } });
+Object.defineProperty(exports, "FormFiltersLayoutContext", { enumerable: true, get: function () { return FormFiltersProvider_1.FormFiltersLayoutContext; } });

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

@@ -8,6 +8,7 @@ const constants_1 = require("../constants");
 const PageActions_1 = require("../PageActions");
 const Title_1 = require("../Title");
 const Description_1 = require("./Description");
+const FormFiltersProvider_1 = require("./FormFiltersProvider");
 const styles_1 = require("./styles");
 const HeaderContent = ({ backButton, description, subheader, breadcrumbs, actions, title, filters, isLoading, }) => {
     const renderBreadcrumbs = () => {
@@ -16,6 +17,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", 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 })] }));
+    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)(FormFiltersProvider_1.FormFiltersProvider, { filtersClassName: constants_1.pageHeaderClassnames.filters, quickFiltersClassName: constants_1.pageHeaderClassnames.quickFilters, children: filters })), subheader && (0, jsx_runtime_1.jsx)(styles_1.PageSubheader, { children: subheader })] }));
 };
 exports.HeaderContent = HeaderContent;

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

@@ -1 +1,2 @@
 export * from './HeaderContent';
+export * from './FormFiltersProvider';

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

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./HeaderContent"), exports);
+__exportStar(require("./FormFiltersProvider"), exports);

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

@@ -7,10 +7,6 @@ export declare const PageSubheader: import("@emotion/styled/dist/declarations/sr
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const PageFilters: 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 DesktopTitleWrapper: 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/HeaderContent/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DesktopTitleWrapper = exports.PageFilters = exports.PageSubheader = exports.BreadcrumbsWrapper = void 0;
+exports.DesktopTitleWrapper = exports.PageSubheader = exports.BreadcrumbsWrapper = void 0;
 const styled_1 = require("../../styled");
 exports.BreadcrumbsWrapper = styled_1.styled.div `
   grid-column: 2;
@@ -14,7 +14,7 @@ exports.BreadcrumbsWrapper = styled_1.styled.div `
 `;
 exports.PageSubheader = styled_1.styled.div `
   grid-column: 1 / -1;
-  grid-row: 5;
+  grid-row: 6;
 
   padding-top: ${({ theme }) => theme.spacing(4)};
 
@@ -22,15 +22,6 @@ exports.PageSubheader = styled_1.styled.div `
     padding: ${({ theme }) => theme.spacing(0, 4, 4, 4)};
   }
 `;
-exports.PageFilters = styled_1.styled.div `
-  grid-column: 1 / -1;
-  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.js

@@ -18,6 +18,6 @@ const PageActionsInner = (props, ref) => {
     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)(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 }) }))] }) }));
+    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 }) }), (secondaryVisible || secondary) && ((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/constants.d.ts

@@ -3,5 +3,7 @@ export declare const pageHeaderClassnames: {
     pageHeaderActions: string;
     hasBackButton: string;
     hasTitle: string;
+    filters: string;
+    quickFilters: string;
 };
 export declare const PAGE_HEADER_HEIGHT_MOBILE = "48px";

package/node/components/PageHeader/constants.js

@@ -7,5 +7,7 @@ exports.pageHeaderClassnames = {
     pageHeaderActions: (0, createUIKitClassname_1.createUIKitClassname)('page-header__actions'),
     hasBackButton: (0, createUIKitClassname_1.createUIKitClassname)('page-header_has-back-button'),
     hasTitle: (0, createUIKitClassname_1.createUIKitClassname)('page-header_has-title'),
+    filters: (0, createUIKitClassname_1.createUIKitClassname)('page-header__filters'),
+    quickFilters: (0, createUIKitClassname_1.createUIKitClassname)('page-header__quick-filters'),
 };
 exports.PAGE_HEADER_HEIGHT_MOBILE = '48px';

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

@@ -2,3 +2,4 @@ export { pageHeaderClassnames } from './constants';
 export { PageActionSkeleton, PageActions, type PageActionsProps, } from './PageActions';
 export * from './PageHeader';
 export * from './types';
+export { FormFiltersLayoutContext } from './HeaderContent';

package/node/components/PageHeader/index.js

@@ -14,7 +14,7 @@ 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 });
-exports.PageActions = exports.PageActionSkeleton = exports.pageHeaderClassnames = void 0;
+exports.FormFiltersLayoutContext = exports.PageActions = exports.PageActionSkeleton = exports.pageHeaderClassnames = void 0;
 var constants_1 = require("./constants");
 Object.defineProperty(exports, "pageHeaderClassnames", { enumerable: true, get: function () { return constants_1.pageHeaderClassnames; } });
 var PageActions_1 = require("./PageActions");
@@ -22,3 +22,5 @@ Object.defineProperty(exports, "PageActionSkeleton", { enumerable: true, get: fu
 Object.defineProperty(exports, "PageActions", { enumerable: true, get: function () { return PageActions_1.PageActions; } });
 __exportStar(require("./PageHeader"), exports);
 __exportStar(require("./types"), exports);
+var HeaderContent_1 = require("./HeaderContent");
+Object.defineProperty(exports, "FormFiltersLayoutContext", { enumerable: true, get: function () { return HeaderContent_1.FormFiltersLayoutContext; } });

package/node/components/PageHeader/styles.js

@@ -25,6 +25,27 @@ exports.Wrapper = styled_1.styled.header `
 
     background-color: ${({ theme }) => theme.palette.background.default};
   }
+
+  .${constants_1.pageHeaderClassnames.filters} {
+    grid-column: 1 / -1;
+    grid-row: 4;
+
+    ${({ theme }) => theme.breakpoints.down('laptop')} {
+      grid-column: 3;
+      grid-row: 1 / -1;
+    }
+  }
+
+  .${constants_1.pageHeaderClassnames.quickFilters} {
+    grid-column: 1 / -1;
+    grid-row: 5;
+
+    margin-top: ${({ theme }) => theme.spacing(4)};
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      display: none;
+    }
+  }
 `;
 exports.MobileTitleWrapper = styled_1.styled.div `
   display: none;

package/node/components/PageLayoutContainer/styles.js

@@ -16,6 +16,12 @@ exports.Wrapper = styled_1.styled.div `
 
   background-color: ${({ theme }) => theme.palette.common.white};
 
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    grid-row-gap: ${({ theme }) => theme.spacing(2)};
+
+    padding-top: ${({ theme }) => theme.spacing(3)};
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     scroll-behavior: smooth;
 

package/node/components/TagBadge/styles.js

@@ -14,6 +14,7 @@ const getBadgeBgColor = ({ color, theme, variant, }) => {
         warning: theme.palette.warning[800],
         error: theme.palette.error[800],
         white: theme.palette.grey[300],
+        transparent: 'transparent',
     };
     return bgColor[color];
 };
@@ -27,7 +28,7 @@ const getBadgeColor = ({ color, theme, variant, isChecked, isDisabled, }) => {
     if (color === 'white') {
         return theme.palette.grey[900];
     }
-    if (color === 'grey') {
+    if (color === 'grey' || color === 'transparent') {
         return variant === 'text'
             ? theme.palette.primary.contrastText
             : theme.palette.grey[900];

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

@@ -17,6 +17,7 @@ export declare const StyledCounter: import("@emotion/styled/dist/declarations/sr
     color: import("../../../components/Counter/types").CounterColor;
     variant?: import("../../../components/Counter/types").CounterVariants | undefined;
     content?: number | undefined;
+    withBorder?: boolean | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

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

@@ -5,4 +5,5 @@ export type AllFiltersButtonProps<TFieldValues extends Record<string, unknown>>
     hasMainFilters: boolean;
     hasSecondaryFilters: boolean;
     hasSearch: boolean;
+    hasQuickFilters: boolean;
 };

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

@@ -1,5 +1,5 @@
 import { type AllFiltersButtonProps } from '../types';
-export declare const useLogic: <TFieldValues extends Record<string, unknown>>({ form, onOpenModal, hasMainFilters, hasSecondaryFilters, hasSearch, }: AllFiltersButtonProps<TFieldValues>) => {
+export declare const useLogic: <TFieldValues extends Record<string, unknown>>({ form, onOpenModal, hasMainFilters, hasSecondaryFilters, hasSearch, hasQuickFilters, }: AllFiltersButtonProps<TFieldValues>) => {
     allFiltersButtonClassName: string;
     counter: number;
     onOpenModal: () => void;

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

@@ -3,35 +3,51 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
+const useViewportType_1 = require("../../../../components/useViewportType");
 const classNames_1 = require("../../../../components/utils/classNames");
 const constants_1 = require("../../../FormFiltersSearchField/constants");
-const constants_2 = require("../../constants");
-const useLogic = ({ form, onOpenModal, hasMainFilters, hasSecondaryFilters, hasSearch, }) => {
+const constants_2 = require("../../../FormQuickFilters/constants");
+const constants_3 = require("../../constants");
+const utils_1 = require("../../utils");
+const useLogic = ({ form, onOpenModal, hasMainFilters, hasSecondaryFilters, hasSearch, hasQuickFilters, }) => {
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
     const formValues = (0, react_hook_form_1.useWatch)({
         control: form.control,
     });
     const [searchName, setSearchName] = (0, react_1.useState)('');
+    const [quickFiltersName, setQuickFiltersName] = (0, react_1.useState)('');
     (0, react_1.useEffect)(() => {
         const searchFieldName = document
             .getElementById(constants_1.FORM_FILTERS_SEARCH_FIELD_ID)
             ?.getAttribute('name') || '';
         setSearchName(searchFieldName);
     }, [hasSearch]);
-    // Исключаем поиск из счетчика фильтров
-    const counter = Object.values(formValues || {}).filter(Boolean).length -
-        (formValues?.[searchName] ? 1 : 0);
+    (0, react_1.useEffect)(() => {
+        const quickFiltersFieldName = document
+            .getElementById(constants_2.FORM_FILTERS_QUICK_FILTERS_ID)
+            ?.getAttribute('name') || '';
+        setQuickFiltersName(quickFiltersFieldName);
+    }, [hasQuickFilters]);
+    const getCounter = () => {
+        const filledValuesCount = (0, utils_1.getFilledCount)(formValues);
+        // Исключаем поиск и quickFilters из счётчика — они видны на странице
+        // quickFilters учитывается только на мобильных устройствах
+        const searchValue = formValues?.[searchName];
+        const quickFiltersValue = !isMobile && (0, utils_1.checkIsFilledValue)(formValues?.[quickFiltersName]);
+        return (filledValuesCount - (searchValue ? 1 : 0) - (quickFiltersValue ? 1 : 0));
+    };
     const allFiltersButtonClassName = (0, react_1.useMemo)(() => {
         return (0, classNames_1.classNames)({
-            [constants_2.formFiltersClassnames.showAllFiltersButtonOnDesktop]: hasSecondaryFilters,
-            [constants_2.formFiltersClassnames.showAllFiltersButtonOnLaptop]: hasMainFilters || hasSecondaryFilters,
-            [constants_2.formFiltersClassnames.showAllFiltersButtonOnMobile]: hasMainFilters || hasSecondaryFilters,
-            [constants_2.formFiltersClassnames.withSearch]: hasSearch,
-            [constants_2.formFiltersClassnames.withoutSearch]: !hasSearch,
+            [constants_3.formFiltersClassnames.showAllFiltersButtonOnDesktop]: hasSecondaryFilters,
+            [constants_3.formFiltersClassnames.showAllFiltersButtonOnLaptop]: hasMainFilters || hasSecondaryFilters,
+            [constants_3.formFiltersClassnames.showAllFiltersButtonOnMobile]: hasMainFilters || hasSecondaryFilters,
+            [constants_3.formFiltersClassnames.withSearch]: hasSearch,
+            [constants_3.formFiltersClassnames.withoutSearch]: !hasSearch,
         });
     }, [hasMainFilters, hasSecondaryFilters, hasSearch]);
     return {
         allFiltersButtonClassName,
-        counter,
+        counter: getCounter(),
         onOpenModal,
     };
 };

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

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormFilters = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const PageHeader_1 = require("../../components/PageHeader");
 const Form_1 = require("../Form");
 const FormControlProvider_1 = require("../FormControlProvider");
 const AllFiltersButton_1 = require("./AllFiltersButton");
@@ -14,10 +16,11 @@ const useLogic_1 = require("./useLogic");
  * Компонент для отображения фильтров формы
  */
 const FormFilters = (props) => {
-    const { form, onSubmit, searchField: SearchField, mainFilters: MainFilters, submitButton: SubmitButton, secondaryFilters: SecondaryFilters, onOpenModal, dialogProps, mainFiltersColumns, isLoading, } = (0, useLogic_1.useLogic)(props);
+    const { form, onSubmit, searchField: SearchField, mainFilters: MainFilters, quickFilters: QuickFilters, submitButton: SubmitButton, secondaryFilters: SecondaryFilters, onOpenModal, dialogProps, mainFiltersColumns, isLoading, } = (0, useLogic_1.useLogic)(props);
+    const { filtersClassName, quickFiltersClassName } = (0, react_1.useContext)(PageHeader_1.FormFiltersLayoutContext) ?? {};
     if (isLoading) {
         return (0, jsx_runtime_1.jsx)(FormFiltersSkeleton_1.FormFiltersSkeleton, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(Form_1.Form, { name: "form", form: form, onSubmit: form.handleSubmit(onSubmit || (() => undefined)), children: [(0, jsx_runtime_1.jsx)(FormControlProvider_1.FormControlProvider, { size: "small", hideHelperText: true, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [SearchField && (0, jsx_runtime_1.jsx)(SearchField, { control: form.control }), (0, jsx_runtime_1.jsx)(AllFiltersButton_1.AllFiltersButton, { form: form, onOpenModal: onOpenModal, hasMainFilters: Boolean(MainFilters), hasSecondaryFilters: Boolean(SecondaryFilters), hasSearch: Boolean(SearchField) }), (0, jsx_runtime_1.jsx)(styles_1.MainFiltersWrapper, { columns: mainFiltersColumns, children: MainFilters && ((0, jsx_runtime_1.jsx)(MainFilters, { control: form.control, isModal: false })) }), SubmitButton && ((0, jsx_runtime_1.jsx)(styles_1.SubmitButtonWrapper, { children: (0, jsx_runtime_1.jsx)(SubmitButton, { size: "medium", className: constants_1.formFiltersClassnames.submitButton }) }))] }) }), (0, jsx_runtime_1.jsx)(FormFiltersDialog_1.FormFiltersDialog, { ...dialogProps })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FormControlProvider_1.FormControlProvider, { size: "small", hideHelperText: true, children: (0, jsx_runtime_1.jsx)(Form_1.Form, { name: "astral-ui-form-filters", form: form, onSubmit: form.handleSubmit(onSubmit || (() => undefined)), className: filtersClassName, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [SearchField && (0, jsx_runtime_1.jsx)(SearchField, { control: form.control }), (0, jsx_runtime_1.jsx)(AllFiltersButton_1.AllFiltersButton, { form: form, onOpenModal: onOpenModal, hasMainFilters: Boolean(MainFilters), hasSecondaryFilters: Boolean(SecondaryFilters), hasSearch: Boolean(SearchField), hasQuickFilters: Boolean(QuickFilters) }), (0, jsx_runtime_1.jsx)(styles_1.MainFiltersWrapper, { columns: mainFiltersColumns, children: MainFilters && ((0, jsx_runtime_1.jsx)(MainFilters, { control: form.control, isModal: false })) }), SubmitButton && ((0, jsx_runtime_1.jsx)(styles_1.SubmitButtonWrapper, { children: (0, jsx_runtime_1.jsx)(SubmitButton, { size: "medium", className: constants_1.formFiltersClassnames.submitButton }) }))] }) }) }), QuickFilters && ((0, jsx_runtime_1.jsx)(styles_1.QuickFiltersWrapper, { className: quickFiltersClassName, children: (0, jsx_runtime_1.jsx)(QuickFilters, { control: form.control }) })), (0, jsx_runtime_1.jsx)(FormFiltersDialog_1.FormFiltersDialog, { ...dialogProps })] }));
 };
 exports.FormFilters = FormFilters;

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

@@ -6,14 +6,14 @@ const Button_1 = require("../../../components/Button");
 const DialogContent_1 = require("../../../components/DialogContent");
 const Form_1 = require("../../Form");
 const constants_1 = require("../constants");
+const ResetButton_1 = require("./ResetButton");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 /**
  * Компонент для отображения фильтров формы
  */
 const FormFiltersDialog = (props) => {
-    const { modalForm, onCloseModal, onResetModal, onSubmitModal, mainFilters: MainFilters, secondaryFilters: SecondaryFilters, isModalOpen, isResetButtonDisabled, } = (0, useLogic_1.useLogic)(props);
-    const headerContent = ((0, jsx_runtime_1.jsx)(styles_1.MobileResetButton, { variant: "text", onClick: onResetModal, size: "large", disabled: isResetButtonDisabled, children: "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C" }));
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledDialog, { open: isModalOpen, onClose: onCloseModal, title: "\u0424\u0438\u043B\u044C\u0442\u0440\u044B", size: "md", headerContent: headerContent, children: (0, jsx_runtime_1.jsxs)(Form_1.Form, { form: modalForm, onSubmit: modalForm.handleSubmit(onSubmitModal), children: [(0, jsx_runtime_1.jsx)(DialogContent_1.DialogContent, { children: (0, jsx_runtime_1.jsxs)(styles_1.FiltersModalContent, { className: constants_1.formFiltersClassnames.modalFilters, children: [MainFilters && ((0, jsx_runtime_1.jsx)(MainFilters, { control: modalForm.control, isModal: true })), SecondaryFilters && ((0, jsx_runtime_1.jsx)(SecondaryFilters, { control: modalForm.control }))] }) }), (0, jsx_runtime_1.jsxs)(styles_1.StyledDialogContent, { children: [(0, jsx_runtime_1.jsx)(styles_1.DesktopResetButton, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", onClick: onResetModal, size: "large", disabled: isResetButtonDisabled, children: "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C" }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", onClick: onCloseModal, size: "large", children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "submit", variant: "contained", size: "large", children: "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C" })] })] }) }));
+    const { modalForm, onCloseModal, onResetModal, onSubmitModal, mainFilters: MainFilters, quickFilters: QuickFilters, secondaryFilters: SecondaryFilters, isModalOpen, } = (0, useLogic_1.useLogic)(props);
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledDialog, { open: isModalOpen, onClose: onCloseModal, title: "\u0424\u0438\u043B\u044C\u0442\u0440\u044B", size: "md", headerContent: (0, jsx_runtime_1.jsx)(ResetButton_1.ResetButton, { onResetModal: onResetModal, modalForm: modalForm, isMobile: true }), children: (0, jsx_runtime_1.jsxs)(Form_1.Form, { form: modalForm, onSubmit: modalForm.handleSubmit(onSubmitModal), children: [(0, jsx_runtime_1.jsx)(DialogContent_1.DialogContent, { children: (0, jsx_runtime_1.jsxs)(styles_1.FiltersModalContent, { className: constants_1.formFiltersClassnames.modalFilters, children: [MainFilters && ((0, jsx_runtime_1.jsx)(MainFilters, { control: modalForm.control, isModal: true })), SecondaryFilters && ((0, jsx_runtime_1.jsx)(SecondaryFilters, { control: modalForm.control })), QuickFilters && ((0, jsx_runtime_1.jsx)(styles_1.QuickFiltersWrapper, { children: (0, jsx_runtime_1.jsx)(QuickFilters, { control: modalForm.control }) }))] }) }), (0, jsx_runtime_1.jsxs)(styles_1.StyledDialogContent, { children: [(0, jsx_runtime_1.jsx)(ResetButton_1.ResetButton, { onResetModal: onResetModal, modalForm: modalForm }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", onClick: onCloseModal, size: "large", children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "submit", variant: "contained", size: "large", children: "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C" })] })] }) }));
 };
 exports.FormFiltersDialog = FormFiltersDialog;

package/node/hook-form/FormFilters/FormFiltersDialog/ResetButton/ResetButton.d.ts

@@ -0,0 +1,6 @@
+import { type UseFormReturn } from 'react-hook-form';
+export declare const ResetButton: <TFieldValues extends Record<string, unknown>>({ onResetModal, modalForm, isMobile, }: {
+    onResetModal: () => void;
+    modalForm: UseFormReturn<TFieldValues>;
+    isMobile?: boolean | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/node/hook-form/FormFilters/FormFiltersDialog/ResetButton/ResetButton.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResetButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = require("../../../../components/Button");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+const ResetButton = ({ onResetModal, modalForm, isMobile = false, }) => {
+    const { isResetButtonDisabled } = (0, useLogic_1.useLogic)({ modalForm });
+    if (isMobile) {
+        return ((0, jsx_runtime_1.jsx)(styles_1.MobileResetButtonWrapper, { variant: "text", onClick: onResetModal, size: "large", disabled: isResetButtonDisabled, children: "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C" }));
+    }
+    return ((0, jsx_runtime_1.jsx)(styles_1.DesktopResetButtonWrapper, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", onClick: onResetModal, size: "large", disabled: isResetButtonDisabled, color: "error", children: "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C" }) }));
+};
+exports.ResetButton = ResetButton;

package/node/hook-form/FormFilters/FormFiltersDialog/ResetButton/index.d.ts

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

package/node/hook-form/FormFilters/FormFiltersDialog/ResetButton/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("./ResetButton"), exports);

package/node/hook-form/FormFilters/FormFiltersDialog/ResetButton/styles.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const MobileResetButtonWrapper: 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;
+}, {}, {}>;
+export declare const DesktopResetButtonWrapper: 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>, {}>;

package/node/hook-form/FormFilters/FormFiltersDialog/ResetButton/styles.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesktopResetButtonWrapper = exports.MobileResetButtonWrapper = void 0;
+const Button_1 = require("../../../../components/Button");
+const styled_1 = require("../../../../components/styled");
+exports.MobileResetButtonWrapper = (0, styled_1.styled)(Button_1.Button) `
+  margin-left: auto;
+
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    display: none;
+  }
+`;
+exports.DesktopResetButtonWrapper = styled_1.styled.div `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

package/node/hook-form/FormFilters/FormFiltersDialog/ResetButton/useLogic/index.d.ts

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