@astral/ui 4.29.0 → 4.31.0

package/components/Filename/Filename.js

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { useHidePersonalData } from '../personalDataSecurity';
 import { Tooltip } from '../Tooltip';
 import { classNames } from '../utils/classNames';
-import { FileBaseName, StyledTypography } from './styles';
+import { FileBaseName, FileSuffix, StyledTypography } from './styles';
 import { useLogic } from './useLogic';
 export const Filename = forwardRef((props, forwardedRef) => {
     const { isOverflowed, suffixWithExtension, baseNameProps } = useLogic({
@@ -14,5 +14,5 @@ export const Filename = forwardRef((props, forwardedRef) => {
     const hidePersonalDataClassname = useHidePersonalData({
         isEnabled: isHidePersonalData,
     });
-    return (_jsx(Tooltip, { title: isOverflowed && children, disableInteractive: true, ...tooltipProps, className: classNames(tooltipProps?.className, hidePersonalDataClassname), children: _jsxs(StyledTypography, { "$align": align, variant: variant, className: classNames(className, hidePersonalDataClassname), ...restProps, children: [_jsx(FileBaseName, { ...baseNameProps }), _jsx("span", { children: suffixWithExtension })] }) }));
+    return (_jsx(Tooltip, { title: isOverflowed && children, disableInteractive: true, ...tooltipProps, className: classNames(tooltipProps?.className, hidePersonalDataClassname), children: _jsxs(StyledTypography, { "$align": align, variant: variant, className: classNames(className, hidePersonalDataClassname), ...restProps, children: [_jsx(FileBaseName, { ...baseNameProps }), _jsx(FileSuffix, { children: suffixWithExtension })] }) }));
 });

package/components/Filename/styles.d.ts

@@ -3,6 +3,10 @@ export declare const FileBaseName: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const FileSuffix: import("../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledTypography: import("../styled").StyledComponent<import("../Typography/types").TypographyPropsBase & {
     color?: import("../Typography").TypographyColor | undefined;
     variant?: import("../Typography").TypographyVariant | undefined;

package/components/Filename/styles.js

@@ -6,7 +6,10 @@ export const FileBaseName = styled.span `
   max-width: 100%;
 
   text-overflow: ellipsis;
-  white-space: nowrap;
+  white-space: preserve nowrap;
+`;
+export const FileSuffix = styled.span `
+  white-space: pre;
 `;
 export const StyledTypography = styled(Typography, {
     shouldForwardProp: (prop) => !['$align'].includes(prop),

package/components/Stepper/StepButton/StepButton.d.ts

@@ -1,5 +1,7 @@
 import type { StepLabelProps as MuiStepLabelProps } from '@mui/material/StepLabel';
+import { type ReactNode } from 'react';
 import type { WithoutEmotionSpecific } from '../../types/WithoutEmotionSpecific';
+import { type StepIconProps } from '../StepIcon';
 export type StepButtonProps = {
     /**
      * Если true, текущий шаг будет отображен как активный
@@ -9,5 +11,9 @@ export type StepButtonProps = {
      * Функция, вызываемая при клике на элемент
      */
     onClick: () => void;
-} & WithoutEmotionSpecific<MuiStepLabelProps>;
+    /**
+     * Кастомный компонент иконки
+     */
+    icon?: (props: Omit<StepIconProps, 'icon'>) => ReactNode;
+} & Omit<WithoutEmotionSpecific<MuiStepLabelProps>, 'icon'>;
 export declare const StepButton: (props: StepButtonProps) => import("react/jsx-runtime").JSX.Element;

package/components/Stepper/StepButton/StepButton.js

@@ -4,7 +4,9 @@ import { stepperClassnames } from '../constants';
 import { StepIcon } from '../StepIcon';
 import { Button, StyledStepLabel } from './styles';
 export const StepButton = (props) => {
-    const { isSelected, onClick, ...restProps } = props;
-    const stepIconRender = useCallback(({ active, completed, error, icon }) => (_jsx(StepIcon, { icon: icon, isSelected: isSelected, active: active, completed: completed, error: error })), [isSelected]);
+    const { isSelected, onClick, icon: Icon, ...restProps } = props;
+    const stepIconRender = useCallback(({ active, completed, error }) => {
+        return (_jsx(StepIcon, { icon: Icon, isSelected: isSelected, active: active, completed: completed, error: error }));
+    }, [isSelected, Icon]);
     return (_jsx(Button, { onClick: onClick, tabIndex: 1, className: stepperClassnames.stepButton, children: _jsx(StyledStepLabel, { StepIconComponent: stepIconRender, ...restProps }) }));
 };

package/components/Stepper/StepButton/styles.d.ts

@@ -5,6 +5,7 @@ export declare const Button: import("../../styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
 export declare const StyledStepLabel: import("../../styled").StyledComponent<{
     isSelected?: boolean | undefined;
-} & import("../..").WithoutEmotionSpecific<import("@mui/material/StepLabel").StepLabelProps> & {
+    icon?: ((props: Omit<import("../StepIcon").StepIconProps, "icon">) => import("react").ReactNode) | undefined;
+} & Omit<import("../..").WithoutEmotionSpecific<import("@mui/material/StepLabel").StepLabelProps>, "icon"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/Stepper/StepIcon/StepIcon.d.ts

@@ -1,10 +1,14 @@
-/// <reference types="react" />
 import type { StepIconProps as MuiStepIconProps } from '@mui/material/StepIcon';
+import { type ReactNode } from 'react';
 import { type WithoutEmotionSpecific } from '../../types/WithoutEmotionSpecific';
 export type StepIconProps = {
     /**
      * Является ли шаг в состоянии select
      */
     isSelected?: boolean;
-} & WithoutEmotionSpecific<MuiStepIconProps>;
+    /**
+     * Кастомный компонент иконки
+     */
+    icon?: (props: Omit<StepIconProps, 'icon'>) => ReactNode;
+} & Omit<WithoutEmotionSpecific<MuiStepIconProps>, 'icon'>;
 export declare const StepIcon: import("react").MemoExoticComponent<(props: StepIconProps) => import("react/jsx-runtime").JSX.Element>;

package/components/Stepper/StepIcon/StepIcon.js

@@ -1,22 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
+import { stepperClassnames } from '../constants';
 import { ActiveIcon, DefaultIcon, ErrorIcon, SelectIcon, SuccessIcon, } from './styles';
 export const StepIcon = memo((props) => {
-    const { active, completed, error, isSelected } = props;
+    const { active, completed, error, isSelected, icon: Icon } = props;
+    if (Icon) {
+        return (_jsx(Icon, { active: active, completed: completed, error: error, isSelected: isSelected, className: stepperClassnames.stepIcon }));
+    }
     if (completed && error && isSelected) {
-        return _jsx(SelectIcon, { "$isError": true });
+        return _jsx(SelectIcon, { "$isError": true, className: stepperClassnames.stepIcon });
     }
     if (completed && isSelected) {
-        return _jsx(SelectIcon, {});
+        return _jsx(SelectIcon, { className: stepperClassnames.stepIcon });
     }
     if (error) {
-        return _jsx(ErrorIcon, {});
+        return _jsx(ErrorIcon, { className: stepperClassnames.stepIcon });
     }
     if (completed) {
-        return _jsx(SuccessIcon, {});
+        return _jsx(SuccessIcon, { className: stepperClassnames.stepIcon });
     }
     if (active) {
-        return _jsx(ActiveIcon, { color: "primary" });
+        return _jsx(ActiveIcon, { className: stepperClassnames.stepIcon });
     }
-    return _jsx(DefaultIcon, {});
+    return _jsx(DefaultIcon, { className: stepperClassnames.stepIcon });
 });

package/components/Stepper/StepIcon/styles.js

@@ -29,4 +29,5 @@ export const DefaultIcon = styled(StepDefaultFillMd) `
 `;
 export const ActiveIcon = styled(StepDefaultFillMd) `
   ${({ theme }) => iconsSize(theme)};
+  color: ${({ theme }) => theme.palette.primary[800]};
 `;

package/components/Stepper/StepLabel/StepLabel.d.ts

@@ -1,9 +1,15 @@
 import type { StepLabelProps as MuiStepLabelProps } from '@mui/material/StepLabel';
+import { type ReactNode } from 'react';
 import { type WithoutEmotionSpecific } from '../../types/WithoutEmotionSpecific';
+import { type StepIconProps } from '../StepIcon';
 export type StepProps = {
     /**
      * Является ли шаг в состоянии select
      */
     isSelected?: boolean;
-} & WithoutEmotionSpecific<MuiStepLabelProps>;
+    /**
+     * Кастомный компонент иконки
+     */
+    icon?: (props: Omit<StepIconProps, 'icon'>) => ReactNode;
+} & Omit<WithoutEmotionSpecific<MuiStepLabelProps>, 'icon'>;
 export declare const StepLabel: (props: StepProps) => import("react/jsx-runtime").JSX.Element;

package/components/Stepper/StepLabel/StepLabel.js

@@ -3,7 +3,7 @@ import MuiStepLabel from '@mui/material/StepLabel';
 import { useCallback } from 'react';
 import { StepIcon } from '../StepIcon';
 export const StepLabel = (props) => {
-    const { isSelected, ...restProps } = props;
-    const stepIconRender = useCallback(({ active, completed, error, icon }) => (_jsx(StepIcon, { icon: icon, isSelected: isSelected, active: active, completed: completed, error: error })), [isSelected]);
+    const { isSelected, icon: Icon, ...restProps } = props;
+    const stepIconRender = useCallback(({ active, completed, error }) => (_jsx(StepIcon, { icon: Icon, isSelected: isSelected, active: active, completed: completed, error: error })), [isSelected]);
     return _jsx(MuiStepLabel, { StepIconComponent: stepIconRender, ...restProps });
 };

package/components/Stepper/constants.d.ts

@@ -1,3 +1,4 @@
 export declare const stepperClassnames: {
     stepButton: string;
+    stepIcon: string;
 };

package/components/Stepper/constants.js

@@ -1,4 +1,5 @@
 import { createUIKitClassname } from '../utils/createUIKitClassname';
 export const stepperClassnames = {
     stepButton: createUIKitClassname('stepper_stepButton'),
+    stepIcon: createUIKitClassname('stepper_stepIcon'),
 };

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

@@ -0,0 +1,2 @@
+import { type AllFiltersButtonProps } from './types';
+export declare const AllFiltersButton: <TFieldValues extends Record<string, unknown>>(props: AllFiltersButtonProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;

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

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export declare const AllFiltersButtonWrapper: 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 StyledBadge: import("../../../components/styled").StyledComponent<Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material/Badge").BadgeProps>, "color"> & {
+    color: import("../../../components/Badge").BadgeColor;
+    withBorder?: boolean | undefined;
+    variantColor?: import("../../../components/Badge").BadgeVariantsColor | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledCounter: import("../../../components/styled").StyledComponent<Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material/Badge").BadgeProps>, "content" | "color" | "children" | "variant" | "invisible" | "anchorOrigin" | "badgeContent" | "overlap" | "withBorder"> & {
+    color: import("../../../components/Counter/types").CounterColor;
+    variant?: import("../../../components/Counter/types").CounterVariants | undefined;
+    content?: number | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

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

@@ -0,0 +1,53 @@
+import { badgeClasses } from '@mui/material/Badge';
+import { Badge } from '../../../components/Badge';
+import { Counter } from '../../../components/Counter';
+import { styled } from '../../../components/styled';
+import { formFiltersClassnames } from '../constants';
+export const AllFiltersButtonWrapper = styled.div `
+  display: none;
+
+  white-space: nowrap;
+
+  &.${formFiltersClassnames.showAllFiltersButtonOnDesktop} {
+    display: flex;
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin-right: 0;
+    &.${formFiltersClassnames.showAllFiltersButtonOnMobile} {
+      display: flex;
+    }
+
+    &.${formFiltersClassnames.withoutSearch} {
+      width: 100%;
+
+      .${formFiltersClassnames.allFiltersButton} {
+        width: 100%;
+      }
+    }
+
+    &.${formFiltersClassnames.withSearch} {
+      .${formFiltersClassnames.allFiltersButton} {
+         display: unset;
+         gap: 0;
+
+         padding: 8px;
+
+         font-size: 0;
+      }
+    }
+  }
+`;
+export const StyledBadge = styled(Badge) `
+   width: 100%; 
+  .${badgeClasses.dot} {
+      ${({ theme }) => theme.breakpoints.up('sm')} {
+        display: none;
+      }
+    }
+`;
+export const StyledCounter = styled(Counter) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

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

@@ -0,0 +1,8 @@
+import { type UseFormReturn } from 'react-hook-form';
+export type AllFiltersButtonProps<TFieldValues extends Record<string, unknown>> = {
+    form: UseFormReturn<TFieldValues>;
+    onOpenModal: () => void;
+    hasMainFilters: boolean;
+    hasSecondaryFilters: boolean;
+    hasSearch: boolean;
+};

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

@@ -0,0 +1 @@
+export {};

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

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

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

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

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

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

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

@@ -0,0 +1,33 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useWatch } from 'react-hook-form';
+import { classNames } from '../../../../components/utils/classNames';
+import { FORM_FILTERS_SEARCH_FIELD_ID } from '../../../FormFiltersSearchField/constants';
+import { formFiltersClassnames } from '../../constants';
+export const useLogic = ({ form, onOpenModal, hasMainFilters, hasSecondaryFilters, hasSearch, }) => {
+    const formValues = useWatch({
+        control: form.control,
+    });
+    const [searchName, setSearchName] = 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);
+    const allFiltersButtonClassName = useMemo(() => {
+        return classNames({
+            [formFiltersClassnames.showAllFiltersButtonOnDesktop]: hasSecondaryFilters,
+            [formFiltersClassnames.showAllFiltersButtonOnMobile]: hasMainFilters || hasSecondaryFilters,
+            [formFiltersClassnames.withSearch]: hasSearch,
+            [formFiltersClassnames.withoutSearch]: !hasSearch,
+        });
+    }, [hasMainFilters, hasSecondaryFilters, hasSearch]);
+    return {
+        allFiltersButtonClassName,
+        counter,
+        onOpenModal,
+    };
+};

package/hook-form/FormFilters/FormFilters.js

@@ -1,20 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from '../../components/Button';
-import { Filter2OutlineMd } from '../../icons/Filter2OutlineMd';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 { AllFiltersButtonWrapper, MainFiltersWrapper, StyledBadge, StyledCounter, SubmitButtonWrapper, Wrapper, } from './styles';
+import { MainFiltersWrapper, SubmitButtonWrapper, Wrapper } from './styles';
 import { useLogic } from './useLogic';
 /**
  * Компонент для отображения фильтров формы
  */
 export const FormFilters = (props) => {
-    const { headerForm, searchField: SearchField, mainFilters: MainFilters, submitButton: SubmitButton, counter, onSubmit, onOpenModal, dialogProps, mainFiltersColumns, isLoading, allFiltersButtonClassName, } = useLogic(props);
+    const { form, onSubmit, searchField: SearchField, mainFilters: MainFilters, submitButton: SubmitButton, secondaryFilters: SecondaryFilters, onOpenModal, dialogProps, mainFiltersColumns, isLoading, } = useLogic(props);
     if (isLoading) {
         return _jsx(FormFiltersSkeleton, {});
     }
-    return (_jsxs(_Fragment, { children: [_jsx(FormControlProvider, { size: "small", hideHelperText: true, children: _jsx(Form, { form: headerForm, onSubmit: headerForm.handleSubmit(onSubmit), children: _jsxs(Wrapper, { children: [SearchField && (_jsx(SearchField, { control: headerForm.control, fullWidth: true })), _jsx(AllFiltersButtonWrapper, { className: allFiltersButtonClassName, children: _jsx(StyledBadge, { color: "error", badgeContent: counter, variant: "dot", children: _jsx(Button, { onClick: onOpenModal, variant: "outlined", color: "grey", startIcon: _jsx(Filter2OutlineMd, {}), endIcon: counter ? (_jsx(StyledCounter, { color: "error", content: counter })) : null, className: formFiltersClassnames.allFiltersButton, children: "\u0412\u0441\u0435 \u0444\u0438\u043B\u044C\u0442\u0440\u044B" }) }) }), _jsx(MainFiltersWrapper, { className: formFiltersClassnames.pageHeaderFilters, columns: mainFiltersColumns, children: MainFilters && (_jsx(MainFilters, { control: headerForm.control, isModal: false })) }), SubmitButton && (_jsx(SubmitButtonWrapper, { children: _jsx(SubmitButton, { size: "medium", className: formFiltersClassnames.submitButton }) }))] }) }) }), _jsx(FormFiltersDialog, { ...dialogProps })] }));
+    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 })] }));
 };

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, values, mainFilters, secondaryFilters, isModalOpen, setIsModalOpen, defaultValues, onSubmit, }: FormFiltersDialogProps<TFieldValues>) => {
+export declare const useLogic: <TFieldValues extends Record<string, unknown>>({ validationSchema, mainFilters, secondaryFilters, isModalOpen, setIsModalOpen, onSubmit, form, }: FormFiltersDialogProps<TFieldValues>) => {
     modalForm: import("react-hook-form").UseFormReturn<TFieldValues, any>;
     onCloseModal: () => void;
     onResetModal: () => void;

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

@@ -1,16 +1,16 @@
 import { useEffect } from 'react';
 import { useForm } from '../../../useForm';
-export const useLogic = ({ validationSchema, values, mainFilters, secondaryFilters, isModalOpen, setIsModalOpen, defaultValues, onSubmit, }) => {
+export const useLogic = ({ validationSchema, mainFilters, secondaryFilters, isModalOpen, setIsModalOpen, onSubmit, form, }) => {
     const modalForm = useForm({
         validationSchema,
-        defaultValues: values,
+        defaultValues: form.getValues(),
     });
     const onCloseModal = () => {
         setIsModalOpen(false);
         modalForm.reset();
     };
     const onResetModal = () => {
-        modalForm.reset(defaultValues);
+        modalForm.reset(form.getValues());
     };
     const onSubmitModal = (submittedValues) => {
         onSubmit(submittedValues);
@@ -18,13 +18,10 @@ export const useLogic = ({ validationSchema, values, mainFilters, secondaryFilte
     };
     const isResetButtonDisabled = !modalForm.formState.isDirty;
     useEffect(() => {
-        if (isModalOpen && defaultValues) {
+        if (isModalOpen) {
             onResetModal();
         }
     }, [isModalOpen]);
-    useEffect(() => {
-        modalForm.reset(values);
-    }, [values]);
     return {
         modalForm,
         onCloseModal,

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

@@ -1,6 +1,5 @@
 export declare const formFiltersClassnames: {
     modalFilters: string;
-    pageHeaderFilters: string;
     submitButton: string;
     allFiltersButton: string;
     showAllFiltersButtonOnDesktop: string;

package/hook-form/FormFilters/constants.js

@@ -1,7 +1,6 @@
 import { createUIKitClassname } from '../../components/utils/createUIKitClassname';
 export const formFiltersClassnames = {
     modalFilters: createUIKitClassname('form-filters__modal-filters'),
-    pageHeaderFilters: createUIKitClassname('form-filters__page-header-filters'),
     submitButton: createUIKitClassname('form-filters__submit-button'),
     allFiltersButton: createUIKitClassname('form-filters__all-filters-button'),
     showAllFiltersButtonOnDesktop: createUIKitClassname('form-filters_show-all-filters-button_desktop'),

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

@@ -3,30 +3,12 @@ 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 AllFiltersButtonWrapper: 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 MainFiltersWrapper: import("../../components/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     columns?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledBadge: import("../../components/styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material/Badge").BadgeProps>, "color"> & {
-    color: import("../../components/Badge").BadgeColor;
-    withBorder?: boolean | undefined;
-    variantColor?: import("../../components/Badge").BadgeVariantsColor | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const StyledCounter: import("../../components/styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material/Badge").BadgeProps>, "content" | "color" | "children" | "variant" | "invisible" | "anchorOrigin" | "badgeContent" | "overlap" | "withBorder"> & {
-    color: import("../../components/Counter/types").CounterColor;
-    variant?: import("../../components/Counter/types").CounterVariants | undefined;
-    content?: number | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
 export declare const SubmitButtonWrapper: import("../../components/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

package/hook-form/FormFilters/styles.js

@@ -1,8 +1,5 @@
-import { badgeClasses } from '@mui/material/Badge';
 import { formLabelClasses } from '@mui/material/FormLabel';
 import { inputBaseClasses } from '@mui/material/InputBase';
-import { Badge } from '../../components/Badge';
-import { Counter } from '../../components/Counter';
 import { styled } from '../../components/styled';
 import { formFiltersClassnames } from './constants';
 export const Wrapper = styled.div `
@@ -32,41 +29,6 @@ export const Wrapper = styled.div `
     }
   }
 `;
-export const AllFiltersButtonWrapper = styled.div `
-  display: none;
-
-  white-space: nowrap;
-
-  &.${formFiltersClassnames.showAllFiltersButtonOnDesktop} {
-    display: flex;
-  }
-
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    margin-right: 0;
-    &.${formFiltersClassnames.showAllFiltersButtonOnMobile} {
-      display: flex;
-    }
-
-    &.${formFiltersClassnames.withoutSearch} {
-      width: 100%;
-
-      .${formFiltersClassnames.allFiltersButton} {
-        width: 100%;
-      }
-    }
-
-    &.${formFiltersClassnames.withSearch} {
-      .${formFiltersClassnames.allFiltersButton} {
-         display: unset;
-         gap: 0;
-
-         padding: 8px;
-
-         font-size: 0;
-      }
-    }
-  }
-`;
 export const MainFiltersWrapper = styled.div `
   display: grid;
   grid-auto-flow: column;
@@ -79,19 +41,6 @@ export const MainFiltersWrapper = styled.div `
     display: none;
   }
 `;
-export const StyledBadge = styled(Badge) `
-   width: 100%; 
-  .${badgeClasses.dot} {
-      ${({ theme }) => theme.breakpoints.up('sm')} {
-        display: none;
-      }
-    }
-`;
-export const StyledCounter = styled(Counter) `
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    display: none;
-  }
-`;
 export const SubmitButtonWrapper = styled.div `
   white-space: nowrap;
 

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

@@ -1,45 +1,36 @@
 import { type ObjectAsyncGuard, type ObjectGuard } from '@astral/validations';
 import { type ReactNode } from 'react';
-import { type Control } from 'react-hook-form';
+import { type Control, type UseFormReturn } from 'react-hook-form';
 import type { ButtonProps } from '../../components/Button';
 type InputsProps<TFieldValues extends Record<string, unknown>> = {
     control: Control<TFieldValues>;
 };
 export type FormFiltersProps<TFieldValues extends Record<string, unknown>> = {
+    form: UseFormReturn<TFieldValues>;
+    onSubmit?: (values: TFieldValues) => void;
     /**
      * Схема валидации из @astral/validations
      */
     validationSchema?: ObjectGuard<TFieldValues> | ObjectAsyncGuard<TFieldValues>;
-    /**
-     * Значения фильтров
-     */
-    values?: TFieldValues;
-    /**
-     * Callback вызываемый при изменении значений фильтров. Вызывается с debounce (300ms)
-     */
-    onChange: (values: TFieldValues) => void;
     /**
      * Поле поиска
      *
      * @example
      * ```ts
      * <FormFilters
-     *   SearchField={(props) => <FormFiltersSearchField {...props} placeholder="Поиск..." />}
+     *   SearchField={({control}) => <FormFiltersSearchField control={control} placeholder="Поиск..." />}
      * />
      * ```
      */
-    searchField?: (props: InputsProps<TFieldValues> & {
-        fullWidth?: boolean;
-    }) => ReactNode;
+    searchField?: (props: InputsProps<TFieldValues>) => ReactNode;
     /**
      * Основные фильтры
      *
      * @example
      * ```ts
      * <FormFilters
-     *   MainFilters={({ control, isModal, ...props }) =>
+     *   MainFilters={({ control, isModal }) =>
      *    <FormTextField
-     *      {...props}
      *      control={control}
      *      name="name"
      *      label="Название"
@@ -57,7 +48,7 @@ export type FormFiltersProps<TFieldValues extends Record<string, unknown>> = {
      * @example
      * ```ts
      * <FormFilters
-     *   SecondaryFilters={({ control, ...props }) => <FormTextField {...props} control={control} placeholder="Введите название" />}
+     *   SecondaryFilters={({ control }) => <FormTextField control={control} name="name" label="Название" placeholder="Введите название" />}
      * />
      * ```
      */

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

@@ -1,18 +1,17 @@
-import { type UseFormReturn } from '../../useForm';
+import { type UseFormReturn } from 'react-hook-form';
 import { type FormFiltersDialogProps } from '../FormFiltersDialog/types';
 import { type FormFiltersProps } from '../types';
 type UseLogicReturn<TFieldValues extends Record<string, unknown>> = {
-    headerForm: UseFormReturn<TFieldValues>;
+    form: UseFormReturn<TFieldValues>;
+    onSubmit?: (values: TFieldValues) => void;
     searchField: FormFiltersProps<TFieldValues>['searchField'];
     mainFilters: FormFiltersProps<TFieldValues>['mainFilters'];
     submitButton: FormFiltersProps<TFieldValues>['submitButton'];
-    counter: number;
-    onSubmit: (submittedValues: TFieldValues) => void;
+    secondaryFilters: FormFiltersProps<TFieldValues>['secondaryFilters'];
     onOpenModal: () => void;
     dialogProps: FormFiltersDialogProps<TFieldValues>;
     mainFiltersColumns?: string;
     isLoading?: boolean;
-    allFiltersButtonClassName: string;
 };
-export declare const useLogic: <TFieldValues extends Record<string, unknown>>({ validationSchema, values, onChange, searchField, mainFilters, secondaryFilters, submitButton, mainFiltersColumns, isLoading, }: FormFiltersProps<TFieldValues>) => UseLogicReturn<TFieldValues>;
+export declare const useLogic: <TFieldValues extends Record<string, unknown>>({ form, onSubmit, validationSchema, searchField, mainFilters, secondaryFilters, submitButton, mainFiltersColumns, isLoading, }: FormFiltersProps<TFieldValues>) => UseLogicReturn<TFieldValues>;
 export {};