@astral/ui 4.25.1 → 4.26.1

package/components/BottomDrawer/BottomDrawer.d.ts

@@ -1,5 +1,5 @@
 import type { DrawerProps as MuiDrawerProps } from '@mui/material/Drawer';
-import { type ReactElement } from 'react';
+import { type ReactElement, type ReactNode } from 'react';
 import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
 export type BottomDrawerProps = {
     /**
@@ -11,5 +11,9 @@ export type BottomDrawerProps = {
      * * @default 56
      */
     drawerHeaderHeight?: number;
+    /**
+     * Дополнительный контент хедера
+     */
+    headerContent?: ReactNode;
 } & WithoutEmotionSpecific<Omit<MuiDrawerProps, 'anchor' | 'variant' | 'title'>>;
-export declare const BottomDrawer: ({ title, drawerHeaderHeight, children, onClose, ...props }: BottomDrawerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BottomDrawer: ({ title, drawerHeaderHeight, children, onClose, headerContent, ...props }: BottomDrawerProps) => import("react/jsx-runtime").JSX.Element;

package/components/BottomDrawer/BottomDrawer.js

@@ -3,11 +3,11 @@ import { CrossOutlineMd } from '../../icons/CrossOutlineMd';
 import { IconButton } from '../IconButton';
 import { bottomDrawerClassnames, DEFAULT_HEADER_HEIGHT } from './constants';
 import { Body, Header, HeaderTitle, StyledDrawer } from './styles';
-export const BottomDrawer = ({ title, drawerHeaderHeight = DEFAULT_HEADER_HEIGHT, children, onClose, ...props }) => {
+export const BottomDrawer = ({ title, drawerHeaderHeight = DEFAULT_HEADER_HEIGHT, children, onClose, headerContent, ...props }) => {
     const handleClose = (event) => {
         if (onClose) {
             onClose(event, 'escapeKeyDown');
         }
     };
-    return (_jsxs(StyledDrawer, { ...props, anchor: "bottom", onClose: onClose, children: [_jsxs(Header, { drawerHeaderHeight: drawerHeaderHeight, children: [_jsx(HeaderTitle, { variant: "h6", noWrap: true, children: title }), _jsx(IconButton, { variant: "text", onClick: handleClose, size: "large", children: _jsx(CrossOutlineMd, {}) })] }), _jsx(Body, { className: bottomDrawerClassnames.content, children: children })] }));
+    return (_jsxs(StyledDrawer, { ...props, anchor: "bottom", onClose: onClose, children: [_jsxs(Header, { drawerHeaderHeight: drawerHeaderHeight, children: [_jsx(HeaderTitle, { variant: "h6", noWrap: true, children: title }), headerContent, _jsx(IconButton, { variant: "text", onClick: handleClose, size: "large", children: _jsx(CrossOutlineMd, {}) })] }), _jsx(Body, { className: bottomDrawerClassnames.content, children: children })] }));
 };

package/components/DashboardSidebarPopover/styles.d.ts

@@ -15,6 +15,7 @@ export declare const Title: import("../styled").StyledComponent<import("../Typog
 export declare const StyledBottomDrawer: import("../styled").StyledComponent<{
     title?: string | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>[] | undefined;
     drawerHeaderHeight?: number | undefined;
+    headerContent?: import("react").ReactNode;
 } & import("..").WithoutEmotionSpecific<Omit<import("@mui/material").DrawerProps, "title" | "anchor" | "variant">> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/Dialog/Dialog.d.ts

@@ -1,5 +1,5 @@
 import type { DialogProps as MuiDialogProps } from '@mui/material/Dialog';
-import { type ReactElement } from 'react';
+import { type ReactElement, type ReactNode } from 'react';
 import type { WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
 export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type DialogProps = WithoutEmotionSpecific<Omit<MuiDialogProps, 'title' | 'maxWidth'>> & {
@@ -16,5 +16,9 @@ export type DialogProps = WithoutEmotionSpecific<Omit<MuiDialogProps, 'title' |
      * @default md
      */
     size?: DialogSize;
+    /**
+     * Дополнительный контент хедера
+     */
+    headerContent?: ReactNode;
 };
-export declare const Dialog: ({ children, title, disableBackdropClick, onClose, size, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Dialog: ({ children, title, disableBackdropClick, onClose, size, headerContent, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;

package/components/Dialog/Dialog.js

@@ -3,7 +3,7 @@ import { BottomDrawer } from '../BottomDrawer';
 import { DialogTitle } from '../DialogTitle';
 import { useViewportType } from '../useViewportType';
 import { StyledDialog } from './styles';
-export const Dialog = ({ children, title, disableBackdropClick, onClose, size = 'md', ...props }) => {
+export const Dialog = ({ children, title, disableBackdropClick, onClose, size = 'md', headerContent, ...props }) => {
     const handleClose = onClose &&
         ((event, reason) => {
             if (disableBackdropClick && reason === 'backdropClick') {
@@ -13,7 +13,7 @@ export const Dialog = ({ children, title, disableBackdropClick, onClose, size =
         });
     const { isMobile } = useViewportType();
     if (isMobile) {
-        return (_jsx(BottomDrawer, { onClose: handleClose, title: title, ...props, children: children }));
+        return (_jsx(BottomDrawer, { onClose: handleClose, title: title, headerContent: headerContent, ...props, children: children }));
     }
-    return (_jsxs(StyledDialog, { "$size": size, onClose: handleClose, ...props, children: [title && _jsx(DialogTitle, { onClose: onClose, children: title }), children] }));
+    return (_jsxs(StyledDialog, { "$size": size, onClose: handleClose, ...props, children: [title && (_jsx(DialogTitle, { onClose: onClose, headerContent: headerContent, children: title })), children] }));
 };

package/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/components/DialogTitle/DialogTitle.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import MuiDialogTitle from '@mui/material/DialogTitle';
 import { CrossOutlineMd } from '../../icons/CrossOutlineMd';
 import { IconButton } from '../IconButton';
-export const DialogTitle = ({ children, onClose, ...props }) => {
+export const DialogTitle = ({ children, onClose, headerContent, ...props }) => {
     // 'escapeKeyDown'  в документашке написано что это опциональный тип, и можно стрингу любую туда закидывать, а по факту либо escapeKeyDown либо backdropClick
     const handleTitleClick = (e) => {
         if (onClose) {
             onClose(e, 'escapeKeyDown');
         }
     };
-    return (_jsxs(MuiDialogTitle, { ...props, children: [children, onClose && (_jsx(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: _jsx(CrossOutlineMd, {}) }))] }));
+    return (_jsxs(MuiDialogTitle, { ...props, children: [children, headerContent, onClose && (_jsx(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: _jsx(CrossOutlineMd, {}) }))] }));
 };

package/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/components/PageHeader/HeaderContent/HeaderContent.js

@@ -5,13 +5,13 @@ import { pageHeaderClassnames } from '../constants';
 import { PageActions } from '../PageActions';
 import { Title } from '../Title';
 import { Description } from './Description';
-import { BreadcrumbsWrapper, DesktopTitleWrapper, PageSubheader, } from './styles';
-export const HeaderContent = ({ backButton, description, subheader, breadcrumbs, actions, title, isLoading, }) => {
+import { BreadcrumbsWrapper, DesktopTitleWrapper, PageFilters, PageSubheader, } from './styles';
+export const HeaderContent = ({ backButton, description, subheader, breadcrumbs, actions, title, filters, isLoading, }) => {
     const renderBreadcrumbs = () => {
         if (!breadcrumbs) {
             return null;
         }
         return (_jsx(BreadcrumbsWrapper, { children: Array.isArray(breadcrumbs) ? (_jsx(Breadcrumbs, { children: breadcrumbs })) : (breadcrumbs) }));
     };
-    return (_jsxs(_Fragment, { children: [renderBreadcrumbs(), _jsx(DesktopTitleWrapper, { children: _jsx(Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), _jsx(Description, { description: description, isLoading: isLoading }), actions && (_jsx(PageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", ...actions })), subheader && _jsx(PageSubheader, { children: subheader })] }));
+    return (_jsxs(_Fragment, { children: [renderBreadcrumbs(), _jsx(DesktopTitleWrapper, { children: _jsx(Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), _jsx(Description, { description: description, isLoading: isLoading }), actions && (_jsx(PageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", ...actions })), filters && _jsx(PageFilters, { children: filters }), subheader && _jsx(PageSubheader, { children: subheader })] }));
 };

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

@@ -7,6 +7,10 @@ export declare const PageSubheader: 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<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PageFilters: 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<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const DesktopTitleWrapper: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

package/components/PageHeader/HeaderContent/styles.js

@@ -19,6 +19,10 @@ export const PageSubheader = styled.div `
     padding: ${({ theme }) => theme.spacing(0, 4, 4, 4)};
   }
 `;
+export const PageFilters = styled.div `
+  grid-column: 1 / -1;
+  grid-row: 5;
+`;
 export const DesktopTitleWrapper = styled.div `
   display: contents;
 

package/components/PageHeader/PageHeader.js

@@ -7,7 +7,7 @@ import { MobileTitleWrapper, Wrapper } from './styles';
 import { Title } from './Title';
 import { useLogic } from './useLogic';
 export 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, } = useLogic(props);
-    return (_jsxs(_Fragment, { children: [_jsxs(MobileTitleWrapper, { className: mobileClassnames, children: [_jsx(Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), _jsx(Wrapper, { className: className, children: _jsx(HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, isLoading: isLoading }) }), isShowMobileActions && (_jsx(MobilePageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(MobileTitleWrapper, { className: mobileClassnames, children: [_jsx(Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), _jsx(Wrapper, { className: className, children: _jsx(HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, filters: filters, isLoading: isLoading }) }), isShowMobileActions && (_jsx(MobilePageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
 };

package/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/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/components/SideDialogTitle/styles.d.ts

@@ -1,5 +1,7 @@
+/// <reference types="react" />
 export declare const StyledDialogTitle: import("../styled").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/components/Tree/types.d.ts

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

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

@@ -0,0 +1,20 @@
+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 { Form } from '../Form';
+import { FormControlProvider } from '../FormControlProvider';
+import { formFiltersClassnames } from './constants';
+import { FormFiltersDialog } from './FormFiltersDialog';
+import { FormFiltersSkeleton } from './FormFiltersSkeleton';
+import { AllFiltersButtonWrapper, MainFiltersWrapper, StyledBadge, StyledCounter, 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);
+    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 })] }));
+};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import { useForm } from '../../../useForm';
+export const useLogic = ({ validationSchema, values, mainFilters, secondaryFilters, isModalOpen, setIsModalOpen, defaultValues, onSubmit, }) => {
+    const modalForm = 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;
+    useEffect(() => {
+        if (isModalOpen && defaultValues) {
+            onResetModal();
+        }
+    }, [isModalOpen]);
+    useEffect(() => {
+        modalForm.reset(values);
+    }, [values]);
+    return {
+        modalForm,
+        onCloseModal,
+        onResetModal,
+        onSubmitModal,
+        mainFilters,
+        secondaryFilters,
+        isModalOpen,
+        isResetButtonDisabled,
+    };
+};

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { skeletonClasses } from '@mui/material/Skeleton';
+import { styled } from '../../../components/styled';
+export const SkeletonWrapper = styled.div `
+  display: grid;
+  grid-template-columns: 240px 1fr 1fr 1fr;
+  gap: ${({ theme }) => theme.spacing(2)};
+
+  margin-top: ${({ theme }) => theme.spacing(4)};
+
+  .${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)};
+
+    .${skeletonClasses.root} {
+      height: 40px;
+    }
+  }
+`;

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

@@ -0,0 +1,11 @@
+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'),
+    showAllFiltersButtonOnMobile: createUIKitClassname('form-filters_show-all-filters-button_mobile'),
+    withSearch: createUIKitClassname('form-filters_with-search'),
+    withoutSearch: createUIKitClassname('form-filters_without-search'),
+};

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

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

package/hook-form/FormFilters/index.js

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

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

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

package/hook-form/FormFilters/public.js

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

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

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+export declare const Wrapper: import("../../components/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const 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;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;