@astral/ui 4.34.1 → 4.35.0

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,31 @@ 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('laptop')} {
+      margin-top: ${({ theme }) => theme.spacing(3)};
+    }
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      display: none;
+    }
+  }
 `;
 exports.MobileTitleWrapper = styled_1.styled.div `
   display: none;

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';

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

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

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

@@ -0,0 +1,6 @@
+import { type UseFormReturn } from 'react-hook-form';
+export declare const useLogic: <TFieldValues extends Record<string, unknown>>({ modalForm, }: {
+    modalForm: UseFormReturn<TFieldValues>;
+}) => {
+    isResetButtonDisabled: boolean;
+};

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_hook_form_1 = require("react-hook-form");
+const utils_1 = require("../../../utils");
+const useLogic = ({ modalForm, }) => {
+    const formValues = (0, react_hook_form_1.useWatch)({
+        control: modalForm.control,
+    });
+    const isResetButtonDisabled = (0, utils_1.getFilledCount)(formValues) === 0;
+    return {
+        isResetButtonDisabled,
+    };
+};
+exports.useLogic = useLogic;

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

@@ -3,16 +3,7 @@ export declare const FiltersModalContent: import("@emotion/styled/dist/declarati
     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 MobileResetButton: 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 DesktopResetButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+export declare const QuickFiltersWrapper: 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/styles.js

@@ -1,26 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledDialogContent = exports.StyledDialog = exports.DesktopResetButton = exports.MobileResetButton = exports.FiltersModalContent = void 0;
+exports.StyledDialogContent = exports.StyledDialog = exports.QuickFiltersWrapper = exports.FiltersModalContent = void 0;
 const Dialog_1 = require("@mui/material/Dialog");
-const Button_1 = require("../../../components/Button");
 const Dialog_2 = require("../../../components/Dialog");
 const DialogActions_1 = require("../../../components/DialogActions");
 const styled_1 = require("../../../components/styled");
 exports.FiltersModalContent = styled_1.styled.div `
   display: grid;
 `;
-exports.MobileResetButton = (0, styled_1.styled)(Button_1.Button) `
-  margin-left: auto;
-
+exports.QuickFiltersWrapper = styled_1.styled.div `
   ${({ theme }) => theme.breakpoints.up('sm')} {
     display: none;
   }
 `;
-exports.DesktopResetButton = styled_1.styled.div `
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    display: none;
-  }
-`;
 exports.StyledDialog = (0, styled_1.styled)(Dialog_2.Dialog) `
   .${Dialog_1.dialogClasses.paper} {
     min-width: 500px;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type FormFiltersDialogProps } from '../types';
-export declare const useLogic: <TFieldValues extends Record<string, unknown>>({ validationSchema, mainFilters, secondaryFilters, isModalOpen, setIsModalOpen, onSubmit, form, }: FormFiltersDialogProps<TFieldValues>) => {
+export declare const useLogic: <TFieldValues extends Record<string, unknown>>({ validationSchema, defaultValues, mainFilters, quickFilters, secondaryFilters, isModalOpen, setIsModalOpen, onSubmit, form, }: FormFiltersDialogProps<TFieldValues>) => {
     modalForm: import("react-hook-form").UseFormReturn<TFieldValues, any>;
     onCloseModal: () => void;
     onResetModal: () => void;
@@ -10,9 +10,11 @@ export declare const useLogic: <TFieldValues extends Record<string, unknown>>({
     } & {
         isModal?: boolean | undefined;
     }) => import("react").ReactNode) | undefined;
+    quickFilters: ((props: Pick<{
+        control: import("react-hook-form").Control<TFieldValues>;
+    }, "control">) => import("react").ReactNode) | undefined;
     secondaryFilters: ((props: {
         control: import("react-hook-form").Control<TFieldValues>;
     }) => import("react").ReactNode) | undefined;
     isModalOpen: boolean;
-    isResetButtonDisabled: boolean;
 };

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const useForm_1 = require("../../../useForm");
-const useLogic = ({ validationSchema, mainFilters, secondaryFilters, isModalOpen, setIsModalOpen, onSubmit, form, }) => {
+const useLogic = ({ validationSchema, defaultValues, mainFilters, quickFilters, secondaryFilters, isModalOpen, setIsModalOpen, onSubmit, form, }) => {
     const modalForm = (0, useForm_1.useForm)({
         validationSchema,
         defaultValues: form.getValues(),
@@ -13,16 +13,15 @@ const useLogic = ({ validationSchema, mainFilters, secondaryFilters, isModalOpen
         modalForm.reset();
     };
     const onResetModal = () => {
-        modalForm.reset(form.getValues());
+        modalForm.reset(defaultValues);
     };
     const onSubmitModal = (submittedValues) => {
         onSubmit(submittedValues);
         setIsModalOpen(false);
     };
-    const isResetButtonDisabled = !modalForm.formState.isDirty;
     (0, react_1.useEffect)(() => {
         if (isModalOpen) {
-            onResetModal();
+            modalForm.reset(form.getValues());
         }
     }, [isModalOpen]);
     return {
@@ -31,9 +30,9 @@ const useLogic = ({ validationSchema, mainFilters, secondaryFilters, isModalOpen
         onResetModal,
         onSubmitModal,
         mainFilters,
+        quickFilters,
         secondaryFilters,
         isModalOpen,
-        isResetButtonDisabled,
     };
 };
 exports.useLogic = useLogic;

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

@@ -2,9 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormFiltersSkeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const PageHeader_1 = require("../../../components/PageHeader");
 const Skeleton_1 = require("../../../components/Skeleton");
 const styles_1 = require("./styles");
 const FormFiltersSkeleton = () => {
-    return ((0, jsx_runtime_1.jsxs)(styles_1.SkeletonWrapper, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded" }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded" }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded" }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded" })] }));
+    const { filtersClassName } = (0, react_1.useContext)(PageHeader_1.FormFiltersLayoutContext) ?? {};
+    return ((0, jsx_runtime_1.jsxs)(styles_1.SkeletonWrapper, { className: filtersClassName, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded" }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded" }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded" }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded" })] }));
 };
 exports.FormFiltersSkeleton = FormFiltersSkeleton;

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

@@ -13,3 +13,7 @@ export declare const SubmitButtonWrapper: import("@emotion/styled/dist/declarati
     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 QuickFiltersWrapper: 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/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubmitButtonWrapper = exports.MainFiltersWrapper = exports.Wrapper = void 0;
+exports.QuickFiltersWrapper = exports.SubmitButtonWrapper = exports.MainFiltersWrapper = exports.Wrapper = void 0;
 const FormLabel_1 = require("@mui/material/FormLabel");
 const InputBase_1 = require("@mui/material/InputBase");
 const styled_1 = require("../../components/styled");
@@ -10,13 +10,13 @@ exports.Wrapper = styled_1.styled.div `
   gap: ${({ theme }) => theme.spacing(2)};
   justify-content: space-between;
 
-  width: 100%; 
+  width: 100%;
   margin-top: ${({ theme }) => theme.spacing(4)};
 
   .${FormLabel_1.formLabelClasses.root} {
     display: none;
   }
-  
+
   ${({ theme }) => theme.breakpoints.down('laptop')} {
     margin-top: 0;
     padding-right: ${({ theme }) => theme.spacing(2)};
@@ -55,3 +55,12 @@ exports.SubmitButtonWrapper = styled_1.styled.div `
     display: none;
   }
 `;
+exports.QuickFiltersWrapper = styled_1.styled.div `
+  display: flex;
+
+  width: 100%;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;