@astral/ui 4.25.1 → 4.26.0

package/node/components/DialogTitle/DialogTitle.d.ts

@@ -1,7 +1,12 @@
 import type { DialogTitleProps as MuiDialogTitleProps } from '@mui/material/DialogTitle';
 import type { ModalProps } from '@mui/material/Modal';
+import { type ReactNode } from 'react';
 import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
 export type DialogTitleProps = WithoutEmotionSpecific<MuiDialogTitleProps> & {
     onClose?: ModalProps['onClose'];
+    /**
+     * Дополнительный контент хедера
+     */
+    headerContent?: ReactNode;
 };
-export declare const DialogTitle: ({ children, onClose, ...props }: DialogTitleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogTitle: ({ children, onClose, headerContent, ...props }: DialogTitleProps) => import("react/jsx-runtime").JSX.Element;

package/node/components/DialogTitle/DialogTitle.js

@@ -8,13 +8,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const DialogTitle_1 = __importDefault(require("@mui/material/DialogTitle"));
 const CrossOutlineMd_1 = require("../../icons/CrossOutlineMd");
 const IconButton_1 = require("../IconButton");
-const DialogTitle = ({ children, onClose, ...props }) => {
+const DialogTitle = ({ children, onClose, headerContent, ...props }) => {
     // 'escapeKeyDown'  в документашке написано что это опциональный тип, и можно стрингу любую туда закидывать, а по факту либо escapeKeyDown либо backdropClick
     const handleTitleClick = (e) => {
         if (onClose) {
             onClose(e, 'escapeKeyDown');
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(DialogTitle_1.default, { ...props, children: [children, onClose && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", onClick: handleTitleClick, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C \u043C\u043E\u0434\u0430\u043B\u044C\u043D\u043E\u0435 \u043E\u043A\u043D\u043E", children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(DialogTitle_1.default, { ...props, children: [children, headerContent, onClose && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", onClick: handleTitleClick, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C \u043C\u043E\u0434\u0430\u043B\u044C\u043D\u043E\u0435 \u043E\u043A\u043D\u043E", children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) }))] }));
 };
 exports.DialogTitle = DialogTitle;

package/node/components/PageHeader/HeaderContent/HeaderContent.d.ts

@@ -1,5 +1,5 @@
 import { type ElementType } from 'react';
 import type { PageHeaderProps } from '../types';
-type HeaderContentProps<TMainActionComponent extends ElementType, TSecondaryActionComponent extends ElementType, TBackButtonComponent extends ElementType> = Pick<PageHeaderProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>, 'breadcrumbs' | 'backButton' | 'description' | 'actions' | 'subheader' | 'title' | 'isLoading'>;
-export declare const HeaderContent: <TMainActionComponent extends ElementType, TSecondaryActionComponent extends ElementType, TBackButtonComponent extends ElementType>({ backButton, description, subheader, breadcrumbs, actions, title, isLoading, }: HeaderContentProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => import("react/jsx-runtime").JSX.Element;
+type HeaderContentProps<TMainActionComponent extends ElementType, TSecondaryActionComponent extends ElementType, TBackButtonComponent extends ElementType> = Pick<PageHeaderProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>, 'breadcrumbs' | 'backButton' | 'description' | 'actions' | 'subheader' | 'filters' | 'title' | 'isLoading'>;
+export declare const HeaderContent: <TMainActionComponent extends ElementType, TSecondaryActionComponent extends ElementType, TBackButtonComponent extends ElementType>({ backButton, description, subheader, breadcrumbs, actions, title, filters, isLoading, }: HeaderContentProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/node/components/PageHeader/HeaderContent/HeaderContent.js

@@ -9,13 +9,13 @@ const PageActions_1 = require("../PageActions");
 const Title_1 = require("../Title");
 const Description_1 = require("./Description");
 const styles_1 = require("./styles");
-const HeaderContent = ({ backButton, description, subheader, breadcrumbs, actions, title, isLoading, }) => {
+const HeaderContent = ({ backButton, description, subheader, breadcrumbs, actions, title, filters, isLoading, }) => {
     const renderBreadcrumbs = () => {
         if (!breadcrumbs) {
             return null;
         }
         return ((0, jsx_runtime_1.jsx)(styles_1.BreadcrumbsWrapper, { children: Array.isArray(breadcrumbs) ? ((0, jsx_runtime_1.jsx)(Breadcrumbs_1.Breadcrumbs, { children: breadcrumbs })) : (breadcrumbs) }));
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderBreadcrumbs(), (0, jsx_runtime_1.jsx)(styles_1.DesktopTitleWrapper, { children: (0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), (0, jsx_runtime_1.jsx)(Description_1.Description, { description: description, isLoading: isLoading }), actions && ((0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { className: (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", ...actions })), subheader && (0, jsx_runtime_1.jsx)(styles_1.PageSubheader, { children: subheader })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderBreadcrumbs(), (0, jsx_runtime_1.jsx)(styles_1.DesktopTitleWrapper, { children: (0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), (0, jsx_runtime_1.jsx)(Description_1.Description, { description: description, isLoading: isLoading }), actions && ((0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { className: (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", ...actions })), subheader && (0, jsx_runtime_1.jsx)(styles_1.PageSubheader, { children: subheader }), filters && (0, jsx_runtime_1.jsx)(styles_1.PageFilters, { children: filters })] }));
 };
 exports.HeaderContent = HeaderContent;

package/node/components/PageHeader/HeaderContent/styles.d.ts

@@ -7,6 +7,10 @@ export declare const PageSubheader: import("@emotion/styled/dist/declarations/sr
     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 PageFilters: 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 DesktopTitleWrapper: 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;

package/node/components/PageHeader/HeaderContent/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DesktopTitleWrapper = exports.PageSubheader = exports.BreadcrumbsWrapper = void 0;
+exports.DesktopTitleWrapper = exports.PageFilters = exports.PageSubheader = exports.BreadcrumbsWrapper = void 0;
 const styled_1 = require("../../styled");
 exports.BreadcrumbsWrapper = styled_1.styled.div `
   grid-column: 2;
@@ -22,6 +22,10 @@ exports.PageSubheader = styled_1.styled.div `
     padding: ${({ theme }) => theme.spacing(0, 4, 4, 4)};
   }
 `;
+exports.PageFilters = styled_1.styled.div `
+  grid-column: 1 / -1;
+  grid-row: 5;
+`;
 exports.DesktopTitleWrapper = styled_1.styled.div `
   display: contents;
 

package/node/components/PageHeader/PageHeader.js

@@ -10,8 +10,8 @@ const styles_1 = require("./styles");
 const Title_1 = require("./Title");
 const useLogic_1 = require("./useLogic");
 const PageHeader = (props) => {
-    const { title, description, subheader, breadcrumbs, actions, backButton, className, } = props;
+    const { title, description, subheader, breadcrumbs, actions, backButton, className, filters, } = props;
     const { isLoading, mobileTitleActions, isShowMobileActions, mobileClassnames, } = (0, useLogic_1.useLogic)(props);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.MobileTitleWrapper, { className: mobileClassnames, children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, children: (0, jsx_runtime_1.jsx)(HeaderContent_1.HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, isLoading: isLoading }) }), isShowMobileActions && ((0, jsx_runtime_1.jsx)(MobilePageActions_1.MobilePageActions, { className: (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.MobileTitleWrapper, { className: mobileClassnames, children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, children: (0, jsx_runtime_1.jsx)(HeaderContent_1.HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, filters: filters, isLoading: isLoading }) }), isShowMobileActions && ((0, jsx_runtime_1.jsx)(MobilePageActions_1.MobilePageActions, { className: (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
 };
 exports.PageHeader = PageHeader;

package/node/components/PageHeader/types.d.ts

@@ -15,10 +15,14 @@ export type PageHeaderProps<TMainActionComponent extends ElementType = ElementTy
     description?: ReactNode;
     /**
      * Набор компонент, отображаемый в нижней части блока
-     * @example <PageHeader subheader={<TextField placeholder="Поиск на
-     *   странице..." size="small" />} />
+     * @example <PageHeader subheader={<TextField placeholder="Поиск на странице..." size="small" />} />
      */
     subheader?: ReactNode;
+    /**
+     * Фильтры формы
+     * @example <PageHeader filters={<FormFilters values={values} onChange={handleChange} />} />
+     */
+    filters?: ReactNode;
     /**
      * Хлебные крошки
      * @example <PageHeader breadcrumbs={

package/node/components/RadioGroup/types.d.ts

@@ -1,9 +1,6 @@
 import type { ChangeEvent, CSSProperties, ReactNode, RefObject } from 'react';
 import type { FormControlProps } from '../FormControl';
 export type RadioGroupProps = {
-    /**
-     * Дочерние элементы (Radio компоненты)
-     */
     children?: ReactNode;
     /**
      * Флаг состояния ошибки

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

@@ -1,5 +1,7 @@
+/// <reference types="react" />
 export declare const StyledDialogTitle: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("..").WithoutEmotionSpecific<import("@mui/material").DialogTitleProps> & {
     onClose?: ((event: {}, reason: "backdropClick" | "escapeKeyDown") => void) | undefined;
+    headerContent?: import("react").ReactNode;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/node/components/Tree/types.d.ts

@@ -12,9 +12,6 @@ export type TreeListData = {
      * Подзаголовок элемента дерева
      */
     note?: ReactNode;
-    /**
-     * Дочерние элементы
-     */
     children?: TreeListData[];
     /**
      * Предназначены для точечной конфигурации

package/node/components/TreeLikeAutocomplete/types.d.ts

@@ -7,9 +7,6 @@ export type TreeLikeListAutocompleteData = Omit<TreeListData, 'label' | 'childre
      * Подпись или иное содержимое элемента
      */
     label: string;
-    /**
-     * Дочерние элементы
-     */
     children?: TreeLikeListAutocompleteData[];
 };
 export type TreeLikeAutocompleteTreeProps = Pick<TreeListProps, 'disabledItems' | 'renderItem'>;

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

@@ -0,0 +1,5 @@
+import type { FormFiltersProps } from './types';
+/**
+ * Компонент для отображения фильтров формы
+ */
+export declare const FormFilters: <TFieldValues extends Record<string, unknown>>(props: FormFiltersProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,24 @@
+"use strict";
+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 constants_1 = require("./constants");
+const FormFiltersDialog_1 = require("./FormFiltersDialog");
+const FormFiltersSkeleton_1 = require("./FormFiltersSkeleton");
+const styles_1 = require("./styles");
+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);
+    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)(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/FormFiltersDialog.d.ts

@@ -0,0 +1,5 @@
+import { type FormFiltersDialogProps } from './types';
+/**
+ * Компонент для отображения фильтров формы
+ */
+export declare const FormFiltersDialog: <TFieldValues extends Record<string, unknown>>(props: FormFiltersDialogProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFiltersDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = require("../../../components/Button");
+const DialogContent_1 = require("../../../components/DialogContent");
+const Form_1 = require("../../Form");
+const constants_1 = require("../constants");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+/**
+ * Компонент для отображения фильтров формы
+ */
+const FormFiltersDialog = (props) => {
+    const { modalForm, onCloseModal, onResetModal, onSubmitModal, mainFilters: MainFilters, secondaryFilters: SecondaryFilters, isModalOpen, isResetButtonDisabled, } = (0, useLogic_1.useLogic)(props);
+    const headerContent = ((0, jsx_runtime_1.jsx)(styles_1.MobileResetButton, { variant: "text", onClick: onResetModal, size: "large", disabled: isResetButtonDisabled, children: "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C" }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledDialog, { open: isModalOpen, onClose: onCloseModal, title: "\u0424\u0438\u043B\u044C\u0442\u0440\u044B", size: "md", headerContent: headerContent, children: (0, jsx_runtime_1.jsxs)(Form_1.Form, { form: modalForm, onSubmit: modalForm.handleSubmit(onSubmitModal), children: [(0, jsx_runtime_1.jsx)(DialogContent_1.DialogContent, { children: (0, jsx_runtime_1.jsxs)(styles_1.FiltersModalContent, { className: constants_1.formFiltersClassnames.modalFilters, children: [MainFilters && ((0, jsx_runtime_1.jsx)(MainFilters, { control: modalForm.control, isModal: true })), SecondaryFilters && ((0, jsx_runtime_1.jsx)(SecondaryFilters, { control: modalForm.control }))] }) }), (0, jsx_runtime_1.jsxs)(styles_1.StyledDialogContent, { children: [(0, jsx_runtime_1.jsx)(styles_1.DesktopResetButton, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", onClick: onResetModal, size: "large", disabled: isResetButtonDisabled, children: "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C" }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", onClick: onCloseModal, size: "large", children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "submit", variant: "contained", size: "large", children: "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C" })] })] }) }));
+};
+exports.FormFiltersDialog = FormFiltersDialog;

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

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

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

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

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

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export declare const FiltersModalContent: 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 MobileResetButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+    variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
+    loading?: boolean | undefined;
+    color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const DesktopResetButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    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 StyledDialog: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../..").WithoutEmotionSpecific<Omit<import("@mui/material/Dialog").DialogProps, "title" | "maxWidth">> & {
+    title?: string | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>[] | undefined;
+    disableBackdropClick?: boolean | undefined;
+    size?: import("../../../components/Dialog").DialogSize | undefined;
+    headerContent?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledDialogContent: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../../components/DialogActions").DialogActionsProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

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

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

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

@@ -0,0 +1,20 @@
+import type { FormFiltersProps } from '../types';
+export type InputsSize = 'small' | 'medium';
+export type FormFiltersDialogProps<TFieldValues extends Record<string, unknown>> = Omit<FormFiltersProps<TFieldValues>, 'onChange' | 'searchField' | 'submitButton' | 'mainFiltersColumns'> & {
+    /**
+     * Открыт ли диалог
+     */
+    isModalOpen: boolean;
+    /**
+     * Установить открытый диалог
+     */
+    setIsModalOpen: (isModalOpen: boolean) => void;
+    /**
+     * Значения по умолчанию
+     */
+    defaultValues?: TFieldValues;
+    /**
+     * Функция отправки формы на кнопку "Применить" в модальном окне
+     */
+    onSubmit: (values: TFieldValues) => void;
+};

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+/// <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>) => {
+    modalForm: import("react-hook-form").UseFormReturn<TFieldValues, any>;
+    onCloseModal: () => void;
+    onResetModal: () => void;
+    onSubmitModal: (submittedValues: TFieldValues) => void;
+    mainFilters: ((props: {
+        control: import("react-hook-form").Control<TFieldValues>;
+    } & {
+        isModal?: boolean | undefined;
+    }) => import("react").ReactNode) | undefined;
+    secondaryFilters: ((props: {
+        control: import("react-hook-form").Control<TFieldValues>;
+    }) => import("react").ReactNode) | undefined;
+    isModalOpen: boolean;
+    isResetButtonDisabled: boolean;
+};

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

@@ -0,0 +1,42 @@
+"use strict";
+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 modalForm = (0, useForm_1.useForm)({
+        validationSchema,
+        defaultValues: values,
+    });
+    const onCloseModal = () => {
+        setIsModalOpen(false);
+        modalForm.reset();
+    };
+    const onResetModal = () => {
+        modalForm.reset(defaultValues);
+    };
+    const onSubmitModal = (submittedValues) => {
+        onSubmit(submittedValues);
+        setIsModalOpen(false);
+    };
+    const isResetButtonDisabled = !modalForm.formState.isDirty;
+    (0, react_1.useEffect)(() => {
+        if (isModalOpen && defaultValues) {
+            onResetModal();
+        }
+    }, [isModalOpen]);
+    (0, react_1.useEffect)(() => {
+        modalForm.reset(values);
+    }, [values]);
+    return {
+        modalForm,
+        onCloseModal,
+        onResetModal,
+        onSubmitModal,
+        mainFilters,
+        secondaryFilters,
+        isModalOpen,
+        isResetButtonDisabled,
+    };
+};
+exports.useLogic = useLogic;

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

@@ -0,0 +1 @@
+export declare const FormFiltersSkeleton: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFiltersSkeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Skeleton_1 = require("../../../components/Skeleton");
+const styles_1 = require("./styles");
+const FormFiltersSkeleton = () => {
+    return ((0, jsx_runtime_1.jsxs)(styles_1.SkeletonWrapper, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded" }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded" }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded" }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded" })] }));
+};
+exports.FormFiltersSkeleton = FormFiltersSkeleton;

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

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

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

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

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const SkeletonWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonWrapper = void 0;
+const Skeleton_1 = require("@mui/material/Skeleton");
+const styled_1 = require("../../../components/styled");
+exports.SkeletonWrapper = styled_1.styled.div `
+  display: grid;
+  grid-template-columns: 240px 1fr 1fr 1fr;
+  gap: ${({ theme }) => theme.spacing(2)};
+
+  margin-top: ${({ theme }) => theme.spacing(4)};
+
+  .${Skeleton_1.skeletonClasses.root} {
+    height: 32px;
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    grid-template-columns: 1fr 40px 0 0;
+
+    margin-top: 0;
+    padding: ${({ theme }) => theme.spacing(1, 0, 4, 4)};
+
+    .${Skeleton_1.skeletonClasses.root} {
+      height: 40px;
+    }
+  }
+`;

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

@@ -0,0 +1,10 @@
+export declare const formFiltersClassnames: {
+    modalFilters: string;
+    pageHeaderFilters: string;
+    submitButton: string;
+    allFiltersButton: string;
+    showAllFiltersButtonOnDesktop: string;
+    showAllFiltersButtonOnMobile: string;
+    withSearch: string;
+    withoutSearch: string;
+};

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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'),
+    showAllFiltersButtonOnMobile: (0, createUIKitClassname_1.createUIKitClassname)('form-filters_show-all-filters-button_mobile'),
+    withSearch: (0, createUIKitClassname_1.createUIKitClassname)('form-filters_with-search'),
+    withoutSearch: (0, createUIKitClassname_1.createUIKitClassname)('form-filters_without-search'),
+};

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

@@ -0,0 +1,3 @@
+export { FormFilters } from './FormFilters';
+export { FormFiltersSkeleton } from './FormFiltersSkeleton';
+export type { FormFiltersProps } from './types';

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFiltersSkeleton = exports.FormFilters = void 0;
+var FormFilters_1 = require("./FormFilters");
+Object.defineProperty(exports, "FormFilters", { enumerable: true, get: function () { return FormFilters_1.FormFilters; } });
+var FormFiltersSkeleton_1 = require("./FormFiltersSkeleton");
+Object.defineProperty(exports, "FormFiltersSkeleton", { enumerable: true, get: function () { return FormFiltersSkeleton_1.FormFiltersSkeleton; } });

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

@@ -0,0 +1,3 @@
+export { FormFilters } from './FormFilters';
+export { FormFiltersSkeleton } from './FormFiltersSkeleton';
+export type { FormFiltersProps } from './types';

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFiltersSkeleton = exports.FormFilters = void 0;
+var FormFilters_1 = require("./FormFilters");
+Object.defineProperty(exports, "FormFilters", { enumerable: true, get: function () { return FormFilters_1.FormFilters; } });
+var FormFiltersSkeleton_1 = require("./FormFiltersSkeleton");
+Object.defineProperty(exports, "FormFiltersSkeleton", { enumerable: true, get: function () { return FormFiltersSkeleton_1.FormFiltersSkeleton; } });

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

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export declare const Wrapper: 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 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 MainFiltersWrapper: 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;
+} & {
+    columns?: string | 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;
+}, {}, {}>;