@astral/ui 4.25.1 → 4.26.0

package/hook-form/FormFilters/styles.js

@@ -0,0 +1,94 @@
+import { badgeClasses } from '@mui/material/Badge';
+import { formLabelClasses } from '@mui/material/FormLabel';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { Badge } from '../../components/Badge';
+import { Counter } from '../../components/Counter';
+import { styled } from '../../components/styled';
+import { formFiltersClassnames } from './constants';
+export const Wrapper = styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  justify-content: space-between;
+
+  width: 100%; 
+  margin-top: ${({ theme }) => theme.spacing(4)};
+
+  .${formLabelClasses.root} {
+    display: none;
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin-top: 0;
+    padding: ${({ theme }) => theme.spacing(1, 4, 5, 4)};
+
+    font-size: 0;
+
+    .${inputBaseClasses.input} {
+      padding: ${({ theme }) => theme.spacing(2, 3)};
+    }
+
+    .${formFiltersClassnames.submitButton} {
+      display: none;
+    }
+  }
+`;
+export const AllFiltersButtonWrapper = styled.div `
+  display: none;
+
+  white-space: nowrap;
+
+  &.${formFiltersClassnames.showAllFiltersButtonOnDesktop} {
+    display: flex;
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin-right: 0;
+    &.${formFiltersClassnames.showAllFiltersButtonOnMobile} {
+      display: flex;
+    }
+
+    &.${formFiltersClassnames.withoutSearch} {
+      width: 100%;
+
+      .${formFiltersClassnames.allFiltersButton} {
+        width: 100%;
+      }
+    }
+
+    &.${formFiltersClassnames.withSearch} {
+      .${formFiltersClassnames.allFiltersButton} {
+         display: unset;
+         gap: 0;
+
+         padding: 8px;
+
+         font-size: 0;
+      }
+    }
+  }
+`;
+export const MainFiltersWrapper = styled.div `
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: ${({ columns }) => columns || 'repeat(auto-fit, min(200px, 1fr))'};
+  column-gap: ${({ theme }) => theme.spacing(2)};
+
+  width: 100%;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;
+export const StyledBadge = styled(Badge) `
+   width: 100%; 
+  .${badgeClasses.dot} {
+      ${({ theme }) => theme.breakpoints.up('sm')} {
+        display: none;
+      }
+    }
+`;
+export const StyledCounter = styled(Counter) `
+   ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

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

@@ -0,0 +1,92 @@
+import { type ObjectAsyncGuard, type ObjectGuard } from '@astral/validations';
+import { type ReactNode } from 'react';
+import { type Control } from 'react-hook-form';
+import type { ButtonProps } from '../../components/Button';
+type InputsProps<TFieldValues extends Record<string, unknown>> = {
+    control: Control<TFieldValues>;
+};
+export type FormFiltersProps<TFieldValues extends Record<string, unknown>> = {
+    /**
+     * Схема валидации из @astral/validations
+     */
+    validationSchema?: ObjectGuard<TFieldValues> | ObjectAsyncGuard<TFieldValues>;
+    /**
+     * Значения фильтров
+     */
+    values?: TFieldValues;
+    /**
+     * Callback вызываемый при изменении значений фильтров. Вызывается с debounce (300ms)
+     */
+    onChange: (values: TFieldValues) => void;
+    /**
+     * Поле поиска
+     *
+     * @example
+     * ```ts
+     * <FormFilters
+     *   SearchField={(props) => <FormFiltersSearchField {...props} placeholder="Поиск..." />}
+     * />
+     * ```
+     */
+    searchField?: (props: InputsProps<TFieldValues> & {
+        fullWidth?: boolean;
+    }) => ReactNode;
+    /**
+     * Основные фильтры
+     *
+     * @example
+     * ```ts
+     * <FormFilters
+     *   MainFilters={({ control, isModal, ...props }) =>
+     *    <FormTextField
+     *      {...props}
+     *      control={control}
+     *      name="name"
+     *      label="Название"
+     *      placeholder={isModal ? 'Введите название' : 'Название'}
+     *    />
+     * />
+     * ```
+     */
+    mainFilters?: (props: InputsProps<TFieldValues> & {
+        isModal?: boolean;
+    }) => ReactNode;
+    /**
+     * Фильтры, отображаемые в модальном окне "Все фильтры"
+     *
+     * @example
+     * ```ts
+     * <FormFilters
+     *   SecondaryFilters={({ control, ...props }) => <FormTextField {...props} control={control} placeholder="Введите название" />}
+     * />
+     * ```
+     */
+    secondaryFilters?: (props: InputsProps<TFieldValues>) => ReactNode;
+    /**
+     * Кнопка отправки формы
+     *
+     * @example
+     * ```ts
+     * <FormFilters
+     *   SubmitButton={(props) => <Button {...props} loading={isLoading}>Применить</Button>}
+     * />
+     * ```
+     */
+    submitButton?: (props: ButtonProps) => ReactNode;
+    /**
+     * Определение ширины колонок для основных фильтров.
+     * Поддерживает CSS grid-template-columns синтаксис:
+     * - minmax(min, max): например, "minmax(150px, 200px) minmax(200px, 300px)"
+     * - fr (fractional units): например, "1fr 2fr"
+     * - px (pixels): например, "200px 300px"
+     * - Комбинации: например, "minmax(150px, 1fr) 2fr"
+     *
+     * @default "1fr"
+     */
+    mainFiltersColumns?: string;
+    /**
+     * Флаг загрузки фильтров, используйте когда фильтры загружаются динамически с сервера
+     */
+    isLoading?: boolean;
+};
+export {};

package/hook-form/FormFilters/types.js

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

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

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

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

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

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

@@ -0,0 +1 @@
+export declare function useFirstMountAfterLoading(isLoading?: boolean): boolean;

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

@@ -0,0 +1,9 @@
+import { useRef } from 'react';
+export function useFirstMountAfterLoading(isLoading) {
+    const isFirst = useRef(true);
+    if (isFirst.current && !isLoading) {
+        isFirst.current = false;
+        return true;
+    }
+    return isFirst.current;
+}

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

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

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

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

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

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

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

@@ -0,0 +1,120 @@
+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, }) => {
+    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);
+    };
+    // Синхронизация внешних 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,
+        mainFilters,
+        secondaryFilters,
+        defaultValues: headerFormValues,
+        onSubmit: onSubmitModal,
+        isModalOpen,
+        setIsModalOpen,
+    };
+    return {
+        headerForm,
+        searchField,
+        mainFilters,
+        submitButton,
+        counter,
+        onSubmit,
+        onOpenModal,
+        dialogProps,
+        mainFiltersColumns,
+        isLoading,
+        allFiltersButtonClassName,
+    };
+};

package/hook-form/FormFiltersModalGroup/FormFiltersModalGroup.d.ts

@@ -0,0 +1,10 @@
+import { type FormFiltersModalGroupProps } from './types';
+/**
+ * Компонент для группировки фильтров в Grid сетку
+ * @example
+ * <FormFiltersModalGroup columns="1fr 2fr">
+ *  <FormSelect />
+ *  <FormSelect />
+ * </FormFiltersModalGroup>
+ */
+export declare const FormFiltersModalGroup: ({ children, columns, ...props }: FormFiltersModalGroupProps) => import("react/jsx-runtime").JSX.Element;

package/hook-form/FormFiltersModalGroup/FormFiltersModalGroup.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Container } from './styles';
+/**
+ * Компонент для группировки фильтров в Grid сетку
+ * @example
+ * <FormFiltersModalGroup columns="1fr 2fr">
+ *  <FormSelect />
+ *  <FormSelect />
+ * </FormFiltersModalGroup>
+ */
+export const FormFiltersModalGroup = ({ children, columns = '1fr', ...props }) => {
+    return (_jsx(Container, { container: true, columns: columns, ...props, children: children }));
+};

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

@@ -0,0 +1,2 @@
+export { FormFiltersModalGroup } from './FormFiltersModalGroup';
+export type { FormFiltersModalGroupProps } from './types';

package/hook-form/FormFiltersModalGroup/index.js

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

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

@@ -0,0 +1,2 @@
+export { FormFiltersModalGroup } from './FormFiltersModalGroup';
+export type { FormFiltersModalGroupProps } from './types';

package/hook-form/FormFiltersModalGroup/public.js

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

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Container: import("../../components/styled").StyledComponent<Omit<import("../../components/Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & import("../../components/Grid/styles").StyledGridProps, {}, {}>;

package/hook-form/FormFiltersModalGroup/styles.js

@@ -0,0 +1,23 @@
+import { Grid } from '../../components/Grid';
+import { styled } from '../../components/styled';
+import { formFiltersClassnames } from '../FormFilters/constants';
+export const Container = styled(Grid) `
+  display: contents;
+
+  > * {
+  flex: 1;
+  }
+
+  .${formFiltersClassnames.modalFilters} & {
+    display: grid;
+    column-gap: ${({ theme }) => theme.spacing(5)};
+    align-items: center;
+    justify-content: space-between;
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+      display: flex;
+      flex-direction: column;
+      align-items: unset;
+    }
+  }
+`;

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import { type GridProps } from '../../components/Grid';
+export type FormFiltersModalGroupProps = Omit<GridProps, 'container'> & {
+    children?: ReactNode;
+    /**
+     * Количество колонок
+     */
+    columns?: number | string;
+};

package/hook-form/FormFiltersModalGroup/types.js

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

package/hook-form/FormFiltersSearchField/FormFiltersSearchField.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { type SearchFieldProps } from '../../components/SearchField';
+import { type WithFormFieldProps } from '../types';
+export type FormFiltersSearchFieldProps<TFieldValues extends object> = WithFormFieldProps<SearchFieldProps, TFieldValues> & {
+    width?: string;
+};
+export declare const FormFiltersSearchField: <T extends object>(props: Omit<SearchFieldProps, "error" | "name"> & Omit<import("react-hook-form").UseControllerProps<T>, "rules"> & {
+    width?: string | undefined;
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

package/hook-form/FormFiltersSearchField/FormFiltersSearchField.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRefWithGeneric } from '../../components/forwardRefWithGeneric';
+import { SearchField, } from '../../components/SearchField';
+import { useFormFieldProps } from '../useFormFieldProps';
+import { FORM_FILTERS_SEARCH_FIELD_ID } from './constants';
+import { Wrapper } from './styles';
+/**
+ * Адаптер для SearchField
+ */
+function FormFiltersSearchFieldInner({ width, ...props }, ref) {
+    const fieldProps = useFormFieldProps({
+        ...props,
+        defaultValue: props.defaultValue || '',
+    });
+    return (_jsx(Wrapper, { "$width": width, children: _jsx(SearchField, { ...fieldProps, ref: ref, inputProps: { id: FORM_FILTERS_SEARCH_FIELD_ID } }) }));
+}
+export const FormFiltersSearchField = forwardRefWithGeneric(FormFiltersSearchFieldInner);

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

@@ -0,0 +1 @@
+export declare const FORM_FILTERS_SEARCH_FIELD_ID = "form-filters-search-field";

package/hook-form/FormFiltersSearchField/constants.js

@@ -0,0 +1 @@
+export const FORM_FILTERS_SEARCH_FIELD_ID = 'form-filters-search-field';

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

@@ -0,0 +1 @@
+export { FormFiltersSearchField, type FormFiltersSearchFieldProps, } from './FormFiltersSearchField';

package/hook-form/FormFiltersSearchField/index.js

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

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

@@ -0,0 +1 @@
+export { FormFiltersSearchField, type FormFiltersSearchFieldProps, } from './FormFiltersSearchField';

package/hook-form/FormFiltersSearchField/public.js

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

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

@@ -0,0 +1,7 @@
+/// <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;
+} & {
+    $width?: string | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/hook-form/FormFiltersSearchField/styles.js

@@ -0,0 +1,8 @@
+import { styled } from '../../components/styled';
+export const Wrapper = styled.div `
+  min-width: ${({ $width }) => $width || '240px'};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: 100%;
+  }
+`;

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

@@ -7,6 +7,7 @@ export declare const useLogic: <TFormValues extends Record<string, unknown>>({ a
         title?: import("react").ReactNode;
         description?: import("react").ReactNode;
         subheader?: import("react").ReactNode;
+        filters?: import("react").ReactNode;
         breadcrumbs?: import("react").ReactNode;
         className?: string | undefined;
         isLoading?: boolean | undefined;

package/hook-form/FormSearchField/FormSearchField.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { type SearchFieldProps } from '../../components/SearchField';
+import { type WithFormFieldProps } from '../types';
+export type FormSearchFieldProps<TFieldValues extends object> = WithFormFieldProps<SearchFieldProps, TFieldValues>;
+export declare const FormSearchField: <T extends object>(props: Omit<SearchFieldProps, "error" | "name"> & Omit<import("react-hook-form").UseControllerProps<T>, "rules"> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

package/hook-form/FormSearchField/FormSearchField.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRefWithGeneric } from '../../components/forwardRefWithGeneric';
+import { SearchField, } from '../../components/SearchField';
+import { useFormFieldProps } from '../useFormFieldProps';
+/**
+ * Адаптер для SearchField
+ */
+function FormSearchFieldInner(props, ref) {
+    const fieldProps = useFormFieldProps({
+        ...props,
+        defaultValue: props.defaultValue || '',
+    });
+    return _jsx(SearchField, { ...fieldProps, ref: ref });
+}
+export const FormSearchField = forwardRefWithGeneric(FormSearchFieldInner);

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

@@ -0,0 +1 @@
+export { FormSearchField, type FormSearchFieldProps, } from './FormSearchField';

package/hook-form/FormSearchField/index.js

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

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

@@ -0,0 +1 @@
+export { FormSearchField, type FormSearchFieldProps, } from './FormSearchField';

package/hook-form/FormSearchField/public.js

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

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

@@ -6,12 +6,12 @@ const CrossOutlineMd_1 = require("../../icons/CrossOutlineMd");
 const IconButton_1 = require("../IconButton");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
-const BottomDrawer = ({ title, drawerHeaderHeight = constants_1.DEFAULT_HEADER_HEIGHT, children, onClose, ...props }) => {
+const BottomDrawer = ({ title, drawerHeaderHeight = constants_1.DEFAULT_HEADER_HEIGHT, children, onClose, headerContent, ...props }) => {
     const handleClose = (event) => {
         if (onClose) {
             onClose(event, 'escapeKeyDown');
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledDrawer, { ...props, anchor: "bottom", onClose: onClose, children: [(0, jsx_runtime_1.jsxs)(styles_1.Header, { drawerHeaderHeight: drawerHeaderHeight, children: [(0, jsx_runtime_1.jsx)(styles_1.HeaderTitle, { variant: "h6", noWrap: true, children: title }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", onClick: handleClose, size: "large", children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) })] }), (0, jsx_runtime_1.jsx)(styles_1.Body, { className: constants_1.bottomDrawerClassnames.content, children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledDrawer, { ...props, anchor: "bottom", onClose: onClose, children: [(0, jsx_runtime_1.jsxs)(styles_1.Header, { drawerHeaderHeight: drawerHeaderHeight, children: [(0, jsx_runtime_1.jsx)(styles_1.HeaderTitle, { variant: "h6", noWrap: true, children: title }), headerContent, (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", onClick: handleClose, size: "large", children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) })] }), (0, jsx_runtime_1.jsx)(styles_1.Body, { className: constants_1.bottomDrawerClassnames.content, children: children })] }));
 };
 exports.BottomDrawer = BottomDrawer;

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

@@ -15,6 +15,7 @@ export declare const Title: import("@emotion/styled/dist/declarations/src/types"
 export declare const StyledBottomDrawer: import("@emotion/styled/dist/declarations/src/types").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/node/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/node/components/Dialog/Dialog.js

@@ -6,7 +6,7 @@ const BottomDrawer_1 = require("../BottomDrawer");
 const DialogTitle_1 = require("../DialogTitle");
 const useViewportType_1 = require("../useViewportType");
 const styles_1 = require("./styles");
-const Dialog = ({ children, title, disableBackdropClick, onClose, size = 'md', ...props }) => {
+const Dialog = ({ children, title, disableBackdropClick, onClose, size = 'md', headerContent, ...props }) => {
     const handleClose = onClose &&
         ((event, reason) => {
             if (disableBackdropClick && reason === 'backdropClick') {
@@ -16,8 +16,8 @@ const Dialog = ({ children, title, disableBackdropClick, onClose, size = 'md', .
         });
     const { isMobile } = (0, useViewportType_1.useViewportType)();
     if (isMobile) {
-        return ((0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { onClose: handleClose, title: title, ...props, children: children }));
+        return ((0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { onClose: handleClose, title: title, headerContent: headerContent, ...props, children: children }));
     }
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledDialog, { "$size": size, onClose: handleClose, ...props, children: [title && (0, jsx_runtime_1.jsx)(DialogTitle_1.DialogTitle, { onClose: onClose, children: title }), children] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledDialog, { "$size": size, onClose: handleClose, ...props, children: [title && ((0, jsx_runtime_1.jsx)(DialogTitle_1.DialogTitle, { onClose: onClose, headerContent: headerContent, children: title })), children] }));
 };
 exports.Dialog = Dialog;