@astral/ui 4.34.1 → 4.34.2

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;

package/hook-form/FormQuickFilters/FormQuickFilters.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Checkbox } from '../../components/Checkbox';
+import { Chip, ChipProvider } from '../../components/Chip';
+import { ListItemIcon } from '../../components/ListItemIcon';
+import { MenuItem } from '../../components/MenuItem';
+import { FormSelect } from '../FormSelect';
+import { FORM_FILTERS_QUICK_FILTERS_ID, FORM_QUICK_FILTERS_ALL_CHIP_KEY, FORM_QUICK_FILTERS_ALL_VALUE, } from './constants';
+import { MobileWrapper, Wrapper } from './styles';
+import { useLogic } from './useLogic/useLogic';
+/**
+ * Группа чипов для быстрых фильтров внутри 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 const FormQuickFilters = (props) => {
+    const { field, filterOptions, checkIsAllSelected, handleChipChange, isSelected, label, allLabel, allCounter, multiple, maxCount, name, placeholder, control, getOptionLabel, getCounterLabel, } = useLogic(props);
+    const renderMultipleOptions = () => {
+        return filterOptions.map((option) => {
+            const checked = control._formValues[name]?.includes(option.value);
+            return (_jsxs(MenuItem, { value: option.value, children: [_jsx(ListItemIcon, { children: _jsx(Checkbox, { checked: checked }) }), option.label, getCounterLabel(option)] }, option.value));
+        });
+    };
+    const renderSingleOptions = () => {
+        return filterOptions.map((option) => (_jsxs(MenuItem, { value: option.value, children: [option.label, getCounterLabel(option)] }, option.value)));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Wrapper, { children: _jsxs(ChipProvider, { mode: multiple ? 'multiple' : 'single', name: name, children: [_jsx(Chip, { label: allLabel, isSelected: checkIsAllSelected(), onChange: () => handleChipChange(FORM_QUICK_FILTERS_ALL_VALUE), counter: allCounter, size: "medium", maxCount: maxCount, value: FORM_QUICK_FILTERS_ALL_VALUE }, FORM_QUICK_FILTERS_ALL_CHIP_KEY), filterOptions.map((option) => (_jsx(Chip, { label: option.label, isSelected: isSelected(option.value), onChange: () => handleChipChange(option.value), status: option.status, counter: option.counter, size: "medium", maxCount: maxCount, value: String(option.value) }, option.value)))] }) }), _jsx(MobileWrapper, { children: _jsx(FormSelect, { control: control, name: name, inputProps: { id: FORM_FILTERS_QUICK_FILTERS_ID }, label: label, getOptionLabel: getOptionLabel, multiple: multiple, onChange: field.onChange, onBlur: field.onBlur, fullWidth: true, placeholder: placeholder, children: multiple ? renderMultipleOptions() : renderSingleOptions() }) })] }));
+};

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

@@ -0,0 +1,6 @@
+export declare const FORM_FILTERS_QUICK_FILTERS_ID = "form-filters-quick-filters";
+/** Значение поля при выборе «Все» (ничего не выбрано) */
+export declare const FORM_QUICK_FILTERS_ALL_VALUE = "";
+export declare const FORM_QUICK_FILTERS_DEFAULT_ALL_LABEL = "\u0412\u0441\u0435";
+/** Стабильный key для чипа «Все» (value поля при этом остаётся пустой строкой) */
+export declare const FORM_QUICK_FILTERS_ALL_CHIP_KEY = "form_quick_filters_all_key";

package/hook-form/FormQuickFilters/constants.js

@@ -0,0 +1,6 @@
+export const FORM_FILTERS_QUICK_FILTERS_ID = 'form-filters-quick-filters';
+/** Значение поля при выборе «Все» (ничего не выбрано) */
+export const FORM_QUICK_FILTERS_ALL_VALUE = '';
+export const FORM_QUICK_FILTERS_DEFAULT_ALL_LABEL = 'Все';
+/** Стабильный key для чипа «Все» (value поля при этом остаётся пустой строкой) */
+export const FORM_QUICK_FILTERS_ALL_CHIP_KEY = 'form_quick_filters_all_key';

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

@@ -0,0 +1,2 @@
+export { FormQuickFilters } from './FormQuickFilters';
+export type { FormQuickFiltersProps, QuickFilterOption } from './types';

package/hook-form/FormQuickFilters/index.js

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

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

@@ -0,0 +1,2 @@
+export { FormQuickFilters } from './FormQuickFilters';
+export type { FormQuickFiltersProps, QuickFilterOption } from './types';

package/hook-form/FormQuickFilters/public.js

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

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const Wrapper: 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>, {}>;
+export declare const MobileWrapper: 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/FormQuickFilters/styles.js

@@ -0,0 +1,16 @@
+import { styled } from '../../components/styled';
+export const Wrapper = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing(2)};
+  align-items: center;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;
+export const MobileWrapper = styled.div `
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    display: none;
+  }
+`;