@astral/ui 4.34.0 → 4.34.2

package/components/PageHeader/styles.js

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

package/components/PageLayoutContainer/styles.js

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

@@ -11,6 +11,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];
 };
@@ -24,7 +25,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/hook-form/FormFilters/AllFiltersButton/styles.d.ts

@@ -17,6 +17,7 @@ export declare const StyledCounter: import("../../../components/styled").StyledC
     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/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/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/hook-form/FormFilters/AllFiltersButton/useLogic/useLogic.js

@@ -1,22 +1,38 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useWatch } from 'react-hook-form';
+import { useViewportType } from '../../../../components/useViewportType';
 import { classNames } from '../../../../components/utils/classNames';
 import { FORM_FILTERS_SEARCH_FIELD_ID } from '../../../FormFiltersSearchField/constants';
+import { FORM_FILTERS_QUICK_FILTERS_ID } from '../../../FormQuickFilters/constants';
 import { formFiltersClassnames } from '../../constants';
-export const useLogic = ({ form, onOpenModal, hasMainFilters, hasSecondaryFilters, hasSearch, }) => {
+import { checkIsFilledValue, getFilledCount } from '../../utils';
+export const useLogic = ({ form, onOpenModal, hasMainFilters, hasSecondaryFilters, hasSearch, hasQuickFilters, }) => {
+    const { isMobile } = useViewportType();
     const formValues = useWatch({
         control: form.control,
     });
     const [searchName, setSearchName] = useState('');
+    const [quickFiltersName, setQuickFiltersName] = useState('');
     useEffect(() => {
         const searchFieldName = document
             .getElementById(FORM_FILTERS_SEARCH_FIELD_ID)
             ?.getAttribute('name') || '';
         setSearchName(searchFieldName);
     }, [hasSearch]);
-    // Исключаем поиск из счетчика фильтров
-    const counter = Object.values(formValues || {}).filter(Boolean).length -
-        (formValues?.[searchName] ? 1 : 0);
+    useEffect(() => {
+        const quickFiltersFieldName = document
+            .getElementById(FORM_FILTERS_QUICK_FILTERS_ID)
+            ?.getAttribute('name') || '';
+        setQuickFiltersName(quickFiltersFieldName);
+    }, [hasQuickFilters]);
+    const getCounter = () => {
+        const filledValuesCount = getFilledCount(formValues);
+        // Исключаем поиск и quickFilters из счётчика — они видны на странице
+        // quickFilters учитывается только на мобильных устройствах
+        const searchValue = formValues?.[searchName];
+        const quickFiltersValue = !isMobile && checkIsFilledValue(formValues?.[quickFiltersName]);
+        return (filledValuesCount - (searchValue ? 1 : 0) - (quickFiltersValue ? 1 : 0));
+    };
     const allFiltersButtonClassName = useMemo(() => {
         return classNames({
             [formFiltersClassnames.showAllFiltersButtonOnDesktop]: hasSecondaryFilters,
@@ -28,7 +44,7 @@ export const useLogic = ({ form, onOpenModal, hasMainFilters, hasSecondaryFilter
     }, [hasMainFilters, hasSecondaryFilters, hasSearch]);
     return {
         allFiltersButtonClassName,
-        counter,
+        counter: getCounter(),
         onOpenModal,
     };
 };

package/hook-form/FormFilters/FormFilters.js

@@ -1,19 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { FormFiltersLayoutContext } from '../../components/PageHeader';
 import { Form } from '../Form';
 import { FormControlProvider } from '../FormControlProvider';
 import { AllFiltersButton } from './AllFiltersButton';
 import { formFiltersClassnames } from './constants';
 import { FormFiltersDialog } from './FormFiltersDialog';
 import { FormFiltersSkeleton } from './FormFiltersSkeleton';
-import { MainFiltersWrapper, SubmitButtonWrapper, Wrapper } from './styles';
+import { MainFiltersWrapper, QuickFiltersWrapper, SubmitButtonWrapper, Wrapper, } from './styles';
 import { useLogic } from './useLogic';
 /**
  * Компонент для отображения фильтров формы
  */
 export const FormFilters = (props) => {
-    const { form, onSubmit, searchField: SearchField, mainFilters: MainFilters, submitButton: SubmitButton, secondaryFilters: SecondaryFilters, onOpenModal, dialogProps, mainFiltersColumns, isLoading, } = useLogic(props);
+    const { form, onSubmit, searchField: SearchField, mainFilters: MainFilters, quickFilters: QuickFilters, submitButton: SubmitButton, secondaryFilters: SecondaryFilters, onOpenModal, dialogProps, mainFiltersColumns, isLoading, } = useLogic(props);
+    const { filtersClassName, quickFiltersClassName } = useContext(FormFiltersLayoutContext) ?? {};
     if (isLoading) {
         return _jsx(FormFiltersSkeleton, {});
     }
-    return (_jsxs(Form, { name: "form", form: form, onSubmit: form.handleSubmit(onSubmit || (() => undefined)), children: [_jsx(FormControlProvider, { size: "small", hideHelperText: true, children: _jsxs(Wrapper, { children: [SearchField && _jsx(SearchField, { control: form.control }), _jsx(AllFiltersButton, { form: form, onOpenModal: onOpenModal, hasMainFilters: Boolean(MainFilters), hasSecondaryFilters: Boolean(SecondaryFilters), hasSearch: Boolean(SearchField) }), _jsx(MainFiltersWrapper, { columns: mainFiltersColumns, children: MainFilters && (_jsx(MainFilters, { control: form.control, isModal: false })) }), SubmitButton && (_jsx(SubmitButtonWrapper, { children: _jsx(SubmitButton, { size: "medium", className: formFiltersClassnames.submitButton }) }))] }) }), _jsx(FormFiltersDialog, { ...dialogProps })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(FormControlProvider, { size: "small", hideHelperText: true, children: _jsx(Form, { name: "astral-ui-form-filters", form: form, onSubmit: form.handleSubmit(onSubmit || (() => undefined)), className: filtersClassName, children: _jsxs(Wrapper, { children: [SearchField && _jsx(SearchField, { control: form.control }), _jsx(AllFiltersButton, { form: form, onOpenModal: onOpenModal, hasMainFilters: Boolean(MainFilters), hasSecondaryFilters: Boolean(SecondaryFilters), hasSearch: Boolean(SearchField), hasQuickFilters: Boolean(QuickFilters) }), _jsx(MainFiltersWrapper, { columns: mainFiltersColumns, children: MainFilters && (_jsx(MainFilters, { control: form.control, isModal: false })) }), SubmitButton && (_jsx(SubmitButtonWrapper, { children: _jsx(SubmitButton, { size: "medium", className: formFiltersClassnames.submitButton }) }))] }) }) }), QuickFilters && (_jsx(QuickFiltersWrapper, { className: quickFiltersClassName, children: _jsx(QuickFilters, { control: form.control }) })), _jsx(FormFiltersDialog, { ...dialogProps })] }));
 };

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

@@ -3,13 +3,13 @@ import { Button } from '../../../components/Button';
 import { DialogContent } from '../../../components/DialogContent';
 import { Form } from '../../Form';
 import { formFiltersClassnames } from '../constants';
-import { DesktopResetButton, FiltersModalContent, MobileResetButton, StyledDialog, StyledDialogContent, } from './styles';
+import { ResetButton } from './ResetButton';
+import { FiltersModalContent, QuickFiltersWrapper, StyledDialog, StyledDialogContent, } from './styles';
 import { useLogic } from './useLogic';
 /**
  * Компонент для отображения фильтров формы
  */
 export const FormFiltersDialog = (props) => {
-    const { modalForm, onCloseModal, onResetModal, onSubmitModal, mainFilters: MainFilters, secondaryFilters: SecondaryFilters, isModalOpen, isResetButtonDisabled, } = useLogic(props);
-    const headerContent = (_jsx(MobileResetButton, { variant: "text", onClick: onResetModal, size: "large", disabled: isResetButtonDisabled, children: "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C" }));
-    return (_jsx(StyledDialog, { open: isModalOpen, onClose: onCloseModal, title: "\u0424\u0438\u043B\u044C\u0442\u0440\u044B", size: "md", headerContent: headerContent, children: _jsxs(Form, { form: modalForm, onSubmit: modalForm.handleSubmit(onSubmitModal), children: [_jsx(DialogContent, { children: _jsxs(FiltersModalContent, { className: formFiltersClassnames.modalFilters, children: [MainFilters && (_jsx(MainFilters, { control: modalForm.control, isModal: true })), SecondaryFilters && (_jsx(SecondaryFilters, { control: modalForm.control }))] }) }), _jsxs(StyledDialogContent, { children: [_jsx(DesktopResetButton, { children: _jsx(Button, { variant: "text", onClick: onResetModal, size: "large", disabled: isResetButtonDisabled, children: "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C" }) }), _jsx(Button, { variant: "text", onClick: onCloseModal, size: "large", children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), _jsx(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, } = useLogic(props);
+    return (_jsx(StyledDialog, { open: isModalOpen, onClose: onCloseModal, title: "\u0424\u0438\u043B\u044C\u0442\u0440\u044B", size: "md", headerContent: _jsx(ResetButton, { onResetModal: onResetModal, modalForm: modalForm, isMobile: true }), children: _jsxs(Form, { form: modalForm, onSubmit: modalForm.handleSubmit(onSubmitModal), children: [_jsx(DialogContent, { children: _jsxs(FiltersModalContent, { className: formFiltersClassnames.modalFilters, children: [MainFilters && (_jsx(MainFilters, { control: modalForm.control, isModal: true })), SecondaryFilters && (_jsx(SecondaryFilters, { control: modalForm.control })), QuickFilters && (_jsx(QuickFiltersWrapper, { children: _jsx(QuickFilters, { control: modalForm.control }) }))] }) }), _jsxs(StyledDialogContent, { children: [_jsx(ResetButton, { onResetModal: onResetModal, modalForm: modalForm }), _jsx(Button, { variant: "text", onClick: onCloseModal, size: "large", children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), _jsx(Button, { type: "submit", variant: "contained", size: "large", children: "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C" })] })] }) }));
 };

package/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/hook-form/FormFilters/FormFiltersDialog/ResetButton/ResetButton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '../../../../components/Button';
+import { DesktopResetButtonWrapper, MobileResetButtonWrapper } from './styles';
+import { useLogic } from './useLogic';
+export const ResetButton = ({ onResetModal, modalForm, isMobile = false, }) => {
+    const { isResetButtonDisabled } = useLogic({ modalForm });
+    if (isMobile) {
+        return (_jsx(MobileResetButtonWrapper, { variant: "text", onClick: onResetModal, size: "large", disabled: isResetButtonDisabled, children: "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C" }));
+    }
+    return (_jsx(DesktopResetButtonWrapper, { children: _jsx(Button, { variant: "text", onClick: onResetModal, size: "large", disabled: isResetButtonDisabled, color: "error", children: "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C" }) }));
+};

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

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

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

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

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const MobileResetButtonWrapper: import("../../../../components/styled").StyledComponent<Omit<import("../../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+    variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
+    loading?: boolean | undefined;
+    color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const DesktopResetButtonWrapper: import("../../../../components/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>, {}>;

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

@@ -0,0 +1,14 @@
+import { Button } from '../../../../components/Button';
+import { styled } from '../../../../components/styled';
+export const MobileResetButtonWrapper = styled(Button) `
+  margin-left: auto;
+
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    display: none;
+  }
+`;
+export const DesktopResetButtonWrapper = styled.div `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

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

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

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

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

package/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/hook-form/FormFilters/FormFiltersDialog/ResetButton/useLogic/useLogic.js

@@ -0,0 +1,11 @@
+import { useWatch } from 'react-hook-form';
+import { getFilledCount } from '../../../utils';
+export const useLogic = ({ modalForm, }) => {
+    const formValues = useWatch({
+        control: modalForm.control,
+    });
+    const isResetButtonDisabled = getFilledCount(formValues) === 0;
+    return {
+        isResetButtonDisabled,
+    };
+};

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

@@ -3,16 +3,7 @@ export declare const FiltersModalContent: import("../../../components/styled").S
     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("../../../components/styled").StyledComponent<Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
-    variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
-    loading?: boolean | undefined;
-    color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
-    component?: import("react").ElementType | undefined;
-    selected?: boolean | undefined;
-} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const DesktopResetButton: import("../../../components/styled").StyledComponent<{
+export declare const QuickFiltersWrapper: import("../../../components/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>, {}>;

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

@@ -1,23 +1,15 @@
 import { dialogClasses } from '@mui/material/Dialog';
-import { Button } from '../../../components/Button';
 import { Dialog } from '../../../components/Dialog';
 import { DialogActions } from '../../../components/DialogActions';
 import { styled } from '../../../components/styled';
 export const FiltersModalContent = styled.div `
   display: grid;
 `;
-export const MobileResetButton = styled(Button) `
-  margin-left: auto;
-
+export const QuickFiltersWrapper = styled.div `
   ${({ theme }) => theme.breakpoints.up('sm')} {
     display: none;
   }
 `;
-export const DesktopResetButton = styled.div `
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    display: none;
-  }
-`;
 export const StyledDialog = styled(Dialog) `
   .${dialogClasses.paper} {
     min-width: 500px;

package/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/hook-form/FormFilters/FormFiltersDialog/useLogic/useLogic.js

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useForm } from '../../../useForm';
-export const useLogic = ({ validationSchema, mainFilters, secondaryFilters, isModalOpen, setIsModalOpen, onSubmit, form, }) => {
+export const useLogic = ({ validationSchema, defaultValues, mainFilters, quickFilters, secondaryFilters, isModalOpen, setIsModalOpen, onSubmit, form, }) => {
     const modalForm = useForm({
         validationSchema,
         defaultValues: form.getValues(),
@@ -10,16 +10,15 @@ export const useLogic = ({ validationSchema, mainFilters, secondaryFilters, isMo
         modalForm.reset();
     };
     const onResetModal = () => {
-        modalForm.reset(form.getValues());
+        modalForm.reset(defaultValues);
     };
     const onSubmitModal = (submittedValues) => {
         onSubmit(submittedValues);
         setIsModalOpen(false);
     };
-    const isResetButtonDisabled = !modalForm.formState.isDirty;
     useEffect(() => {
         if (isModalOpen) {
-            onResetModal();
+            modalForm.reset(form.getValues());
         }
     }, [isModalOpen]);
     return {
@@ -28,8 +27,8 @@ export const useLogic = ({ validationSchema, mainFilters, secondaryFilters, isMo
         onResetModal,
         onSubmitModal,
         mainFilters,
+        quickFilters,
         secondaryFilters,
         isModalOpen,
-        isResetButtonDisabled,
     };
 };

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

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { FormFiltersLayoutContext } from '../../../components/PageHeader';
 import { Skeleton } from '../../../components/Skeleton';
 import { SkeletonWrapper } from './styles';
 export const FormFiltersSkeleton = () => {
-    return (_jsxs(SkeletonWrapper, { children: [_jsx(Skeleton, { variant: "rounded" }), _jsx(Skeleton, { variant: "rounded" }), _jsx(Skeleton, { variant: "rounded" }), _jsx(Skeleton, { variant: "rounded" })] }));
+    const { filtersClassName } = useContext(FormFiltersLayoutContext) ?? {};
+    return (_jsxs(SkeletonWrapper, { className: filtersClassName, children: [_jsx(Skeleton, { variant: "rounded" }), _jsx(Skeleton, { variant: "rounded" }), _jsx(Skeleton, { variant: "rounded" }), _jsx(Skeleton, { variant: "rounded" })] }));
 };

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

@@ -13,3 +13,7 @@ export declare const SubmitButtonWrapper: import("../../components/styled").Styl
     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("../../components/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>, {}>;

package/hook-form/FormFilters/styles.js

@@ -7,13 +7,13 @@ export const Wrapper = styled.div `
   gap: ${({ theme }) => theme.spacing(2)};
   justify-content: space-between;
 
-  width: 100%; 
+  width: 100%;
   margin-top: ${({ theme }) => theme.spacing(4)};
 
   .${formLabelClasses.root} {
     display: none;
   }
-  
+
   ${({ theme }) => theme.breakpoints.down('laptop')} {
     margin-top: 0;
     padding-right: ${({ theme }) => theme.spacing(2)};
@@ -52,3 +52,12 @@ export const SubmitButtonWrapper = styled.div `
     display: none;
   }
 `;
+export const QuickFiltersWrapper = styled.div `
+  display: flex;
+
+  width: 100%;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

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

@@ -18,18 +18,38 @@ export type FormFiltersProps<TFieldValues extends Record<string, unknown>> = {
      * @example
      * ```ts
      * <FormFilters
-     *   SearchField={({control}) => <FormFiltersSearchField control={control} placeholder="Поиск..." />}
+     *   searchField={({control}) => <FormFiltersSearchField control={control} placeholder="Поиск..." />}
      * />
      * ```
      */
     searchField?: (props: InputsProps<TFieldValues>) => ReactNode;
+    /**
+     * Быстрые фильтры — группа чипов.
+     * На больших экранах отображаются строкой чипов под mainFilters,
+     * на маленьких разрешениях — последним элементом внутри модалки (как Select).
+     *
+     * @example
+     * ```ts
+     * <FormFilters
+     *   quickFilters={({ control }) => (
+     *     <FormQuickFilters
+     *       control={control}
+     *       name="status"
+     *       label="Статус"
+     *       options={[{ label: 'Активные', value: 'active' }]}
+     *     />
+     *   )}
+     * />
+     * ```
+     */
+    quickFilters?: (props: Pick<InputsProps<TFieldValues>, 'control'>) => ReactNode;
     /**
      * Основные фильтры
      *
      * @example
      * ```ts
      * <FormFilters
-     *   MainFilters={({ control, isModal }) =>
+     *   mainFilters={({ control, isModal }) =>
      *    <FormTextField
      *      control={control}
      *      name="name"
@@ -48,7 +68,7 @@ export type FormFiltersProps<TFieldValues extends Record<string, unknown>> = {
      * @example
      * ```ts
      * <FormFilters
-     *   SecondaryFilters={({ control }) => <FormTextField control={control} name="name" label="Название" placeholder="Введите название" />}
+     *   secondaryFilters={({ control }) => <FormTextField control={control} name="name" label="Название" placeholder="Введите название" />}
      * />
      * ```
      */
@@ -59,7 +79,7 @@ export type FormFiltersProps<TFieldValues extends Record<string, unknown>> = {
      * @example
      * ```ts
      * <FormFilters
-     *   SubmitButton={(props) => <Button {...props} loading={isLoading}>Применить</Button>}
+     *   submitButton={(props) => <Button {...props} loading={isLoading}>Применить</Button>}
      * />
      * ```
      */

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

@@ -6,6 +6,7 @@ type UseLogicReturn<TFieldValues extends Record<string, unknown>> = {
     onSubmit?: (values: TFieldValues) => void;
     searchField: FormFiltersProps<TFieldValues>['searchField'];
     mainFilters: FormFiltersProps<TFieldValues>['mainFilters'];
+    quickFilters: FormFiltersProps<TFieldValues>['quickFilters'];
     submitButton: FormFiltersProps<TFieldValues>['submitButton'];
     secondaryFilters: FormFiltersProps<TFieldValues>['secondaryFilters'];
     onOpenModal: () => void;
@@ -13,5 +14,5 @@ type UseLogicReturn<TFieldValues extends Record<string, unknown>> = {
     mainFiltersColumns?: string;
     isLoading?: boolean;
 };
-export declare const useLogic: <TFieldValues extends Record<string, unknown>>({ form, onSubmit, validationSchema, searchField, mainFilters, secondaryFilters, submitButton, mainFiltersColumns, isLoading, }: FormFiltersProps<TFieldValues>) => UseLogicReturn<TFieldValues>;
+export declare const useLogic: <TFieldValues extends Record<string, unknown>>({ form, onSubmit, validationSchema, searchField, mainFilters, quickFilters, secondaryFilters, submitButton, mainFiltersColumns, isLoading, }: FormFiltersProps<TFieldValues>) => UseLogicReturn<TFieldValues>;
 export {};

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

@@ -1,6 +1,14 @@
-import { useState } from 'react';
-export const useLogic = ({ form, onSubmit, validationSchema, searchField, mainFilters, secondaryFilters, submitButton, mainFiltersColumns, isLoading, }) => {
+import { useEffect, useState } from 'react';
+import { useFirstMountAfterLoading } from './hooks';
+export const useLogic = ({ form, onSubmit, validationSchema, searchField, mainFilters, quickFilters, secondaryFilters, submitButton, mainFiltersColumns, isLoading, }) => {
     const [isModalOpen, setIsModalOpen] = useState(false);
+    const [defaultValues, setDefaultValues] = useState({});
+    const isFirstMountAfterLoading = useFirstMountAfterLoading(isLoading);
+    useEffect(() => {
+        if (isFirstMountAfterLoading) {
+            setDefaultValues(form.getValues());
+        }
+    }, [form]);
     const onOpenModal = () => {
         setIsModalOpen(true);
     };
@@ -12,16 +20,19 @@ export const useLogic = ({ form, onSubmit, validationSchema, searchField, mainFi
         validationSchema,
         form,
         mainFilters,
+        quickFilters,
         secondaryFilters,
         onSubmit: onSubmitModal,
         isModalOpen,
         setIsModalOpen,
+        defaultValues,
     };
     return {
         form,
         onSubmit,
         searchField,
         mainFilters,
+        quickFilters,
         secondaryFilters,
         submitButton,
         onOpenModal,

package/hook-form/FormFilters/utils/checkIsFilledValue/checkIsFilledValue.d.ts

@@ -0,0 +1 @@
+export declare function checkIsFilledValue(value: unknown): boolean;

package/hook-form/FormFilters/utils/checkIsFilledValue/checkIsFilledValue.js

@@ -0,0 +1,18 @@
+export function checkIsFilledValue(value) {
+    if (value === null || value === undefined) {
+        return false;
+    }
+    if (typeof value === 'string') {
+        return value.trim() !== '';
+    }
+    if (Array.isArray(value)) {
+        return Boolean(value?.length);
+    }
+    if (typeof value === 'object') {
+        return Object.values(value).some((v) => checkIsFilledValue(v));
+    }
+    if (typeof value === 'number') {
+        return Number.isFinite(value);
+    }
+    return Boolean(value);
+}

package/hook-form/FormFilters/utils/checkIsFilledValue/index.d.ts

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

package/hook-form/FormFilters/utils/checkIsFilledValue/index.js

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

package/hook-form/FormFilters/utils/getFilledCount/getFilledCount.d.ts

@@ -0,0 +1 @@
+export declare const getFilledCount: (formValues: Record<string, unknown>) => number;

package/hook-form/FormFilters/utils/getFilledCount/getFilledCount.js

@@ -0,0 +1,4 @@
+import { checkIsFilledValue } from '../checkIsFilledValue/checkIsFilledValue';
+export const getFilledCount = (formValues) => {
+    return Object.values(formValues || {}).filter(checkIsFilledValue).length;
+};

package/hook-form/FormFilters/utils/getFilledCount/index.d.ts

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

package/hook-form/FormFilters/utils/getFilledCount/index.js

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

package/hook-form/FormFilters/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { checkIsFilledValue } from './checkIsFilledValue';
+export { getFilledCount } from './getFilledCount';

package/hook-form/FormFilters/utils/index.js

@@ -0,0 +1,2 @@
+export { checkIsFilledValue } from './checkIsFilledValue';
+export { getFilledCount } from './getFilledCount';

package/hook-form/FormQuickFilters/FormQuickFilters.d.ts

@@ -0,0 +1,26 @@
+import type { FormQuickFiltersProps } from './types';
+/**
+ * Группа чипов для быстрых фильтров внутри FormFilters (слот quickFilters).
+ *
+ *   Поведение чипов задаётся параметром `multiple` через `ChipProvider mode`:
+ *   - false (default) — `single` (radio)
+ *   - true — `multiple` (checkbox)
+ *
+ * - На мобильных устройствах отображается как Select
+ *
+ * @example
+ * <FormFilters
+ *   quickFilters={({ control }) => (
+ *     <FormQuickFilters
+ *       control={control}
+ *       name="status"
+ *       label="Статус"
+ *       options={[
+ *         { label: 'Активные', value: 'active' },
+ *         { label: 'Архив', value: 'archived' },
+ *       ]}
+ *     />
+ *   )}
+ * />
+ */
+export declare const FormQuickFilters: <TFieldValues extends object>(props: FormQuickFiltersProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;