@astral/ui 4.29.0 → 4.31.0

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

@@ -1,120 +1,32 @@
-import { debounce } from '@astral/utils/debounce';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { useWatch } from 'react-hook-form';
-import { checkIsDeepEqual } from '../../../components/utils/checkIsDeepEqual';
-import { classNames } from '../../../components/utils/classNames';
-import { FORM_FILTERS_SEARCH_FIELD_ID } from '../../FormFiltersSearchField/constants';
-import { useForm } from '../../useForm';
-import { formFiltersClassnames } from '../constants';
-import { useFirstMountAfterLoading } from './hooks';
-export const useLogic = ({ validationSchema, values, onChange, searchField, mainFilters, secondaryFilters, submitButton, mainFiltersColumns, isLoading, }) => {
+import { useState } from 'react';
+export const useLogic = ({ form, onSubmit, validationSchema, searchField, mainFilters, secondaryFilters, submitButton, mainFiltersColumns, isLoading, }) => {
     const [isModalOpen, setIsModalOpen] = useState(false);
-    const isFirstMount = useFirstMountAfterLoading(isLoading);
     const onOpenModal = () => {
         setIsModalOpen(true);
     };
-    const headerForm = useForm({
-        validationSchema,
-        defaultValues: values,
-    });
-    const headerFormValues = useWatch({
-        control: headerForm.control,
-    });
-    // Ref для хранения debounced функции, чтобы можно было её отменить
-    const debouncedOnChangeRef = useRef(null);
-    // Ref для отслеживания внешнего reset (чтобы не вызывать onChange при внешнем reset)
-    const isExternalResetRef = useRef(false);
-    // Ref для хранения предыдущих внешних values (для сравнения)
-    const previousValuesRef = useRef(values);
-    // Отменяет предыдущий debounced вызов onChange, если он есть
-    const clearPreviousDebouncedOnChange = () => {
-        if (debouncedOnChangeRef.current) {
-            debouncedOnChangeRef.current.clear();
-        }
-    };
-    const hasSubmitButton = Boolean(submitButton);
-    useEffect(() => {
-        // Если есть submitButton, не вызываем onChange при изменении значений
-        if (hasSubmitButton || isLoading || isFirstMount) {
-            return;
-        }
-        clearPreviousDebouncedOnChange();
-        // Пропускаем onChange если это внешний reset
-        if (isExternalResetRef.current) {
-            isExternalResetRef.current = false;
-            return;
-        }
-        // Создаем новый debounced вызов
-        const debouncedOnChange = debounce(() => {
-            onChange(headerFormValues);
-        }, 300);
-        debouncedOnChangeRef.current = debouncedOnChange;
-        debouncedOnChange();
-        return () => {
-            debouncedOnChange.clear();
-        };
-    }, [headerFormValues, onChange, hasSubmitButton, isLoading]);
-    const searchName = document
-        .getElementById(FORM_FILTERS_SEARCH_FIELD_ID)
-        ?.getAttribute('name') || '';
-    // Исключаем поиск из счетчика фильтров
-    const counter = Object.values(headerFormValues).filter(Boolean).length -
-        (headerFormValues[searchName] ? 1 : 0);
-    const setFiltersValues = (newValues) => headerForm.reset(newValues);
-    // Функция отправки формы на SubmitButton. Приводит к вызову onChange без debounce.
-    const onSubmit = (submittedValues) => {
-        clearPreviousDebouncedOnChange();
-        onChange?.(submittedValues);
-    };
     // Функция отправки формы на кнопку "Применить" в модальном окне
     const onSubmitModal = (submittedValues) => {
-        setFiltersValues(submittedValues);
-        onSubmit(submittedValues);
+        form.reset(submittedValues);
     };
-    // Синхронизация внешних values с формой
-    useEffect(() => {
-        if (isFirstMount) {
-            return;
-        }
-        // Сравниваем значения, чтобы избежать лишних reset
-        const valuesChanged = !checkIsDeepEqual(previousValuesRef.current, values);
-        if (!valuesChanged) {
-            return;
-        }
-        clearPreviousDebouncedOnChange();
-        isExternalResetRef.current = true;
-        previousValuesRef.current = values;
-        setFiltersValues(values);
-    }, [values, headerForm]);
-    const allFiltersButtonClassName = useMemo(() => {
-        return classNames({
-            [formFiltersClassnames.showAllFiltersButtonOnDesktop]: Boolean(secondaryFilters),
-            [formFiltersClassnames.showAllFiltersButtonOnMobile]: Boolean(mainFilters) || Boolean(secondaryFilters),
-            [formFiltersClassnames.withSearch]: Boolean(searchField),
-            [formFiltersClassnames.withoutSearch]: !searchField,
-        });
-    }, [mainFilters, secondaryFilters, searchField]);
     const dialogProps = {
         validationSchema,
-        values,
+        form,
         mainFilters,
         secondaryFilters,
-        defaultValues: headerFormValues,
         onSubmit: onSubmitModal,
         isModalOpen,
         setIsModalOpen,
     };
     return {
-        headerForm,
+        form,
+        onSubmit,
         searchField,
         mainFilters,
+        secondaryFilters,
         submitButton,
-        counter,
-        onSubmit,
         onOpenModal,
         dialogProps,
         mainFiltersColumns,
         isLoading,
-        allFiltersButtonClassName,
     };
 };

package/hook-form/FormFiltersSearchField/FormFiltersSearchField.js

@@ -12,6 +12,6 @@ function FormFiltersSearchFieldInner({ width, ...props }, ref) {
         ...props,
         defaultValue: props.defaultValue || '',
     });
-    return (_jsx(Wrapper, { "$width": width, children: _jsx(SearchField, { ...fieldProps, ref: ref, inputProps: { id: FORM_FILTERS_SEARCH_FIELD_ID } }) }));
+    return (_jsx(Wrapper, { "$width": width, children: _jsx(SearchField, { ...fieldProps, ref: ref, inputProps: { id: FORM_FILTERS_SEARCH_FIELD_ID }, fullWidth: true }) }));
 }
 export const FormFiltersSearchField = forwardRefWithGeneric(FormFiltersSearchFieldInner);

package/node/components/Filename/Filename.js

@@ -17,5 +17,5 @@ exports.Filename = (0, react_1.forwardRef)((props, forwardedRef) => {
     const hidePersonalDataClassname = (0, personalDataSecurity_1.useHidePersonalData)({
         isEnabled: isHidePersonalData,
     });
-    return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: isOverflowed && children, disableInteractive: true, ...tooltipProps, className: (0, classNames_1.classNames)(tooltipProps?.className, hidePersonalDataClassname), children: (0, jsx_runtime_1.jsxs)(styles_1.StyledTypography, { "$align": align, variant: variant, className: (0, classNames_1.classNames)(className, hidePersonalDataClassname), ...restProps, children: [(0, jsx_runtime_1.jsx)(styles_1.FileBaseName, { ...baseNameProps }), (0, jsx_runtime_1.jsx)("span", { children: suffixWithExtension })] }) }));
+    return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: isOverflowed && children, disableInteractive: true, ...tooltipProps, className: (0, classNames_1.classNames)(tooltipProps?.className, hidePersonalDataClassname), children: (0, jsx_runtime_1.jsxs)(styles_1.StyledTypography, { "$align": align, variant: variant, className: (0, classNames_1.classNames)(className, hidePersonalDataClassname), ...restProps, children: [(0, jsx_runtime_1.jsx)(styles_1.FileBaseName, { ...baseNameProps }), (0, jsx_runtime_1.jsx)(styles_1.FileSuffix, { children: suffixWithExtension })] }) }));
 });

package/node/components/Filename/styles.d.ts

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

package/node/components/Filename/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledTypography = exports.FileBaseName = void 0;
+exports.StyledTypography = exports.FileSuffix = exports.FileBaseName = void 0;
 const styled_1 = require("../styled");
 const Typography_1 = require("../Typography");
 exports.FileBaseName = styled_1.styled.span `
@@ -9,7 +9,10 @@ exports.FileBaseName = styled_1.styled.span `
   max-width: 100%;
 
   text-overflow: ellipsis;
-  white-space: nowrap;
+  white-space: preserve nowrap;
+`;
+exports.FileSuffix = styled_1.styled.span `
+  white-space: pre;
 `;
 exports.StyledTypography = (0, styled_1.styled)(Typography_1.Typography, {
     shouldForwardProp: (prop) => !['$align'].includes(prop),

package/node/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/node/components/Stepper/StepButton/StepButton.js

@@ -7,8 +7,10 @@ const constants_1 = require("../constants");
 const StepIcon_1 = require("../StepIcon");
 const styles_1 = require("./styles");
 const StepButton = (props) => {
-    const { isSelected, onClick, ...restProps } = props;
-    const stepIconRender = (0, react_1.useCallback)(({ active, completed, error, icon }) => ((0, jsx_runtime_1.jsx)(StepIcon_1.StepIcon, { icon: icon, isSelected: isSelected, active: active, completed: completed, error: error })), [isSelected]);
+    const { isSelected, onClick, icon: Icon, ...restProps } = props;
+    const stepIconRender = (0, react_1.useCallback)(({ active, completed, error }) => {
+        return ((0, jsx_runtime_1.jsx)(StepIcon_1.StepIcon, { icon: Icon, isSelected: isSelected, active: active, completed: completed, error: error }));
+    }, [isSelected, Icon]);
     return ((0, jsx_runtime_1.jsx)(styles_1.Button, { onClick: onClick, tabIndex: 1, className: constants_1.stepperClassnames.stepButton, children: (0, jsx_runtime_1.jsx)(styles_1.StyledStepLabel, { StepIconComponent: stepIconRender, ...restProps }) }));
 };
 exports.StepButton = StepButton;

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

@@ -5,6 +5,7 @@ export declare const Button: import("@emotion/styled/dist/declarations/src/types
 }, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
 export declare const StyledStepLabel: import("@emotion/styled/dist/declarations/src/types").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/node/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/node/components/Stepper/StepIcon/StepIcon.js

@@ -3,23 +3,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StepIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const constants_1 = require("../constants");
 const styles_1 = require("./styles");
 exports.StepIcon = (0, react_1.memo)((props) => {
-    const { active, completed, error, isSelected } = props;
+    const { active, completed, error, isSelected, icon: Icon } = props;
+    if (Icon) {
+        return ((0, jsx_runtime_1.jsx)(Icon, { active: active, completed: completed, error: error, isSelected: isSelected, className: constants_1.stepperClassnames.stepIcon }));
+    }
     if (completed && error && isSelected) {
-        return (0, jsx_runtime_1.jsx)(styles_1.SelectIcon, { "$isError": true });
+        return (0, jsx_runtime_1.jsx)(styles_1.SelectIcon, { "$isError": true, className: constants_1.stepperClassnames.stepIcon });
     }
     if (completed && isSelected) {
-        return (0, jsx_runtime_1.jsx)(styles_1.SelectIcon, {});
+        return (0, jsx_runtime_1.jsx)(styles_1.SelectIcon, { className: constants_1.stepperClassnames.stepIcon });
     }
     if (error) {
-        return (0, jsx_runtime_1.jsx)(styles_1.ErrorIcon, {});
+        return (0, jsx_runtime_1.jsx)(styles_1.ErrorIcon, { className: constants_1.stepperClassnames.stepIcon });
     }
     if (completed) {
-        return (0, jsx_runtime_1.jsx)(styles_1.SuccessIcon, {});
+        return (0, jsx_runtime_1.jsx)(styles_1.SuccessIcon, { className: constants_1.stepperClassnames.stepIcon });
     }
     if (active) {
-        return (0, jsx_runtime_1.jsx)(styles_1.ActiveIcon, { color: "primary" });
+        return (0, jsx_runtime_1.jsx)(styles_1.ActiveIcon, { className: constants_1.stepperClassnames.stepIcon });
     }
-    return (0, jsx_runtime_1.jsx)(styles_1.DefaultIcon, {});
+    return (0, jsx_runtime_1.jsx)(styles_1.DefaultIcon, { className: constants_1.stepperClassnames.stepIcon });
 });

package/node/components/Stepper/StepIcon/styles.js

@@ -32,4 +32,5 @@ exports.DefaultIcon = (0, styled_1.styled)(StepDefaultFillMd_1.StepDefaultFillMd
 `;
 exports.ActiveIcon = (0, styled_1.styled)(StepDefaultFillMd_1.StepDefaultFillMd) `
   ${({ theme }) => iconsSize(theme)};
+  color: ${({ theme }) => theme.palette.primary[800]};
 `;

package/node/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/node/components/Stepper/StepLabel/StepLabel.js

@@ -9,8 +9,8 @@ const StepLabel_1 = __importDefault(require("@mui/material/StepLabel"));
 const react_1 = require("react");
 const StepIcon_1 = require("../StepIcon");
 const StepLabel = (props) => {
-    const { isSelected, ...restProps } = props;
-    const stepIconRender = (0, react_1.useCallback)(({ active, completed, error, icon }) => ((0, jsx_runtime_1.jsx)(StepIcon_1.StepIcon, { icon: icon, isSelected: isSelected, active: active, completed: completed, error: error })), [isSelected]);
+    const { isSelected, icon: Icon, ...restProps } = props;
+    const stepIconRender = (0, react_1.useCallback)(({ active, completed, error }) => ((0, jsx_runtime_1.jsx)(StepIcon_1.StepIcon, { icon: Icon, isSelected: isSelected, active: active, completed: completed, error: error })), [isSelected]);
     return (0, jsx_runtime_1.jsx)(StepLabel_1.default, { StepIconComponent: stepIconRender, ...restProps });
 };
 exports.StepLabel = StepLabel;

package/node/components/Stepper/constants.d.ts

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

package/node/components/Stepper/constants.js

@@ -4,4 +4,5 @@ exports.stepperClassnames = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.stepperClassnames = {
     stepButton: (0, createUIKitClassname_1.createUIKitClassname)('stepper_stepButton'),
+    stepIcon: (0, createUIKitClassname_1.createUIKitClassname)('stepper_stepIcon'),
 };

package/node/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/node/hook-form/FormFilters/AllFiltersButton/AllFiltersButton.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AllFiltersButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = require("../../../components/Button");
+const Filter2OutlineMd_1 = require("../../../icons/Filter2OutlineMd");
+const constants_1 = require("../constants");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+const AllFiltersButton = (props) => {
+    const { allFiltersButtonClassName, counter, onOpenModal } = (0, useLogic_1.useLogic)(props);
+    return ((0, jsx_runtime_1.jsx)(styles_1.AllFiltersButtonWrapper, { className: allFiltersButtonClassName, children: (0, jsx_runtime_1.jsx)(styles_1.StyledBadge, { color: "error", badgeContent: counter, variant: "dot", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onOpenModal, variant: "outlined", color: "grey", startIcon: (0, jsx_runtime_1.jsx)(Filter2OutlineMd_1.Filter2OutlineMd, {}), endIcon: counter ? (0, jsx_runtime_1.jsx)(styles_1.StyledCounter, { color: "error", content: counter }) : null, className: constants_1.formFiltersClassnames.allFiltersButton, children: "\u0412\u0441\u0435 \u0444\u0438\u043B\u044C\u0442\u0440\u044B" }) }) }));
+};
+exports.AllFiltersButton = AllFiltersButton;

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

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

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

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

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export declare const AllFiltersButtonWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledBadge: import("@emotion/styled/dist/declarations/src/types").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("@emotion/styled/dist/declarations/src/types").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/node/hook-form/FormFilters/AllFiltersButton/styles.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledCounter = exports.StyledBadge = exports.AllFiltersButtonWrapper = void 0;
+const Badge_1 = require("@mui/material/Badge");
+const Badge_2 = require("../../../components/Badge");
+const Counter_1 = require("../../../components/Counter");
+const styled_1 = require("../../../components/styled");
+const constants_1 = require("../constants");
+exports.AllFiltersButtonWrapper = styled_1.styled.div `
+  display: none;
+
+  white-space: nowrap;
+
+  &.${constants_1.formFiltersClassnames.showAllFiltersButtonOnDesktop} {
+    display: flex;
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin-right: 0;
+    &.${constants_1.formFiltersClassnames.showAllFiltersButtonOnMobile} {
+      display: flex;
+    }
+
+    &.${constants_1.formFiltersClassnames.withoutSearch} {
+      width: 100%;
+
+      .${constants_1.formFiltersClassnames.allFiltersButton} {
+        width: 100%;
+      }
+    }
+
+    &.${constants_1.formFiltersClassnames.withSearch} {
+      .${constants_1.formFiltersClassnames.allFiltersButton} {
+         display: unset;
+         gap: 0;
+
+         padding: 8px;
+
+         font-size: 0;
+      }
+    }
+  }
+`;
+exports.StyledBadge = (0, styled_1.styled)(Badge_2.Badge) `
+   width: 100%; 
+  .${Badge_1.badgeClasses.dot} {
+      ${({ theme }) => theme.breakpoints.up('sm')} {
+        display: none;
+      }
+    }
+`;
+exports.StyledCounter = (0, styled_1.styled)(Counter_1.Counter) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

package/node/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/node/hook-form/FormFilters/AllFiltersButton/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

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

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

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const classNames_1 = require("../../../../components/utils/classNames");
+const constants_1 = require("../../../FormFiltersSearchField/constants");
+const constants_2 = require("../../constants");
+const useLogic = ({ form, onOpenModal, hasMainFilters, hasSecondaryFilters, hasSearch, }) => {
+    const formValues = (0, react_hook_form_1.useWatch)({
+        control: form.control,
+    });
+    const [searchName, setSearchName] = (0, react_1.useState)('');
+    (0, react_1.useEffect)(() => {
+        const searchFieldName = document
+            .getElementById(constants_1.FORM_FILTERS_SEARCH_FIELD_ID)
+            ?.getAttribute('name') || '';
+        setSearchName(searchFieldName);
+    }, [hasSearch]);
+    // Исключаем поиск из счетчика фильтров
+    const counter = Object.values(formValues || {}).filter(Boolean).length -
+        (formValues?.[searchName] ? 1 : 0);
+    const allFiltersButtonClassName = (0, react_1.useMemo)(() => {
+        return (0, classNames_1.classNames)({
+            [constants_2.formFiltersClassnames.showAllFiltersButtonOnDesktop]: hasSecondaryFilters,
+            [constants_2.formFiltersClassnames.showAllFiltersButtonOnMobile]: hasMainFilters || hasSecondaryFilters,
+            [constants_2.formFiltersClassnames.withSearch]: hasSearch,
+            [constants_2.formFiltersClassnames.withoutSearch]: !hasSearch,
+        });
+    }, [hasMainFilters, hasSecondaryFilters, hasSearch]);
+    return {
+        allFiltersButtonClassName,
+        counter,
+        onOpenModal,
+    };
+};
+exports.useLogic = useLogic;

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

@@ -2,10 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormFilters = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Button_1 = require("../../components/Button");
-const Filter2OutlineMd_1 = require("../../icons/Filter2OutlineMd");
 const Form_1 = require("../Form");
 const FormControlProvider_1 = require("../FormControlProvider");
+const AllFiltersButton_1 = require("./AllFiltersButton");
 const constants_1 = require("./constants");
 const FormFiltersDialog_1 = require("./FormFiltersDialog");
 const FormFiltersSkeleton_1 = require("./FormFiltersSkeleton");
@@ -15,10 +14,10 @@ const useLogic_1 = require("./useLogic");
  * Компонент для отображения фильтров формы
  */
 const FormFilters = (props) => {
-    const { headerForm, searchField: SearchField, mainFilters: MainFilters, submitButton: SubmitButton, counter, onSubmit, onOpenModal, dialogProps, mainFiltersColumns, isLoading, allFiltersButtonClassName, } = (0, useLogic_1.useLogic)(props);
+    const { form, onSubmit, searchField: SearchField, mainFilters: MainFilters, submitButton: SubmitButton, secondaryFilters: SecondaryFilters, onOpenModal, dialogProps, mainFiltersColumns, isLoading, } = (0, useLogic_1.useLogic)(props);
     if (isLoading) {
         return (0, jsx_runtime_1.jsx)(FormFiltersSkeleton_1.FormFiltersSkeleton, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FormControlProvider_1.FormControlProvider, { size: "small", hideHelperText: true, children: (0, jsx_runtime_1.jsx)(Form_1.Form, { form: headerForm, onSubmit: headerForm.handleSubmit(onSubmit), children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [SearchField && ((0, jsx_runtime_1.jsx)(SearchField, { control: headerForm.control, fullWidth: true })), (0, jsx_runtime_1.jsx)(styles_1.AllFiltersButtonWrapper, { className: allFiltersButtonClassName, children: (0, jsx_runtime_1.jsx)(styles_1.StyledBadge, { color: "error", badgeContent: counter, variant: "dot", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onOpenModal, variant: "outlined", color: "grey", startIcon: (0, jsx_runtime_1.jsx)(Filter2OutlineMd_1.Filter2OutlineMd, {}), endIcon: counter ? ((0, jsx_runtime_1.jsx)(styles_1.StyledCounter, { color: "error", content: counter })) : null, className: constants_1.formFiltersClassnames.allFiltersButton, children: "\u0412\u0441\u0435 \u0444\u0438\u043B\u044C\u0442\u0440\u044B" }) }) }), (0, jsx_runtime_1.jsx)(styles_1.MainFiltersWrapper, { className: constants_1.formFiltersClassnames.pageHeaderFilters, columns: mainFiltersColumns, children: MainFilters && ((0, jsx_runtime_1.jsx)(MainFilters, { control: headerForm.control, isModal: false })) }), SubmitButton && ((0, jsx_runtime_1.jsx)(styles_1.SubmitButtonWrapper, { children: (0, jsx_runtime_1.jsx)(SubmitButton, { size: "medium", className: constants_1.formFiltersClassnames.submitButton }) }))] }) }) }), (0, jsx_runtime_1.jsx)(FormFiltersDialog_1.FormFiltersDialog, { ...dialogProps })] }));
+    return ((0, jsx_runtime_1.jsxs)(Form_1.Form, { name: "form", form: form, onSubmit: form.handleSubmit(onSubmit || (() => undefined)), children: [(0, jsx_runtime_1.jsx)(FormControlProvider_1.FormControlProvider, { size: "small", hideHelperText: true, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [SearchField && (0, jsx_runtime_1.jsx)(SearchField, { control: form.control }), (0, jsx_runtime_1.jsx)(AllFiltersButton_1.AllFiltersButton, { form: form, onOpenModal: onOpenModal, hasMainFilters: Boolean(MainFilters), hasSecondaryFilters: Boolean(SecondaryFilters), hasSearch: Boolean(SearchField) }), (0, jsx_runtime_1.jsx)(styles_1.MainFiltersWrapper, { columns: mainFiltersColumns, children: MainFilters && ((0, jsx_runtime_1.jsx)(MainFilters, { control: form.control, isModal: false })) }), SubmitButton && ((0, jsx_runtime_1.jsx)(styles_1.SubmitButtonWrapper, { children: (0, jsx_runtime_1.jsx)(SubmitButton, { size: "medium", className: constants_1.formFiltersClassnames.submitButton }) }))] }) }), (0, jsx_runtime_1.jsx)(FormFiltersDialog_1.FormFiltersDialog, { ...dialogProps })] }));
 };
 exports.FormFilters = FormFilters;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type FormFiltersDialogProps } from '../types';
-export declare const useLogic: <TFieldValues extends Record<string, unknown>>({ validationSchema, 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/node/hook-form/FormFilters/FormFiltersDialog/useLogic/useLogic.js

@@ -3,17 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const useForm_1 = require("../../../useForm");
-const useLogic = ({ validationSchema, values, mainFilters, secondaryFilters, isModalOpen, setIsModalOpen, defaultValues, onSubmit, }) => {
+const useLogic = ({ validationSchema, mainFilters, secondaryFilters, isModalOpen, setIsModalOpen, onSubmit, form, }) => {
     const modalForm = (0, useForm_1.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);
@@ -21,13 +21,10 @@ const useLogic = ({ validationSchema, values, mainFilters, secondaryFilters, isM
     };
     const isResetButtonDisabled = !modalForm.formState.isDirty;
     (0, react_1.useEffect)(() => {
-        if (isModalOpen && defaultValues) {
+        if (isModalOpen) {
             onResetModal();
         }
     }, [isModalOpen]);
-    (0, react_1.useEffect)(() => {
-        modalForm.reset(values);
-    }, [values]);
     return {
         modalForm,
         onCloseModal,

package/node/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/node/hook-form/FormFilters/constants.js

@@ -4,7 +4,6 @@ exports.formFiltersClassnames = void 0;
 const createUIKitClassname_1 = require("../../components/utils/createUIKitClassname");
 exports.formFiltersClassnames = {
     modalFilters: (0, createUIKitClassname_1.createUIKitClassname)('form-filters__modal-filters'),
-    pageHeaderFilters: (0, createUIKitClassname_1.createUIKitClassname)('form-filters__page-header-filters'),
     submitButton: (0, createUIKitClassname_1.createUIKitClassname)('form-filters__submit-button'),
     allFiltersButton: (0, createUIKitClassname_1.createUIKitClassname)('form-filters__all-filters-button'),
     showAllFiltersButtonOnDesktop: (0, createUIKitClassname_1.createUIKitClassname)('form-filters_show-all-filters-button_desktop'),