@astral/ui 1.39.3 → 1.40.0

package/Notification/types.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { ToastOptions } from 'react-toastify/dist/types';
-export declare type Variant = 'success' | 'warning' | 'info' | 'error';
-export declare type ActionsDirection = 'right' | 'left';
+export type Variant = 'success' | 'warning' | 'info' | 'error';
+export type ActionsDirection = 'right' | 'left';
 export interface NotificationProps extends Omit<ToastOptions, 'className' | 'style' | 'isLoading' | 'bodyClassName' | 'bodyStyle' | 'onOpen' | 'onClose' | 'type' | 'toastId' | 'updateId' | 'data' | 'progressClassName' | 'closeButton' | 'transition' | 'draggableDirection' | 'role' | 'containerId' | 'rtl' | 'icon' | 'theme'> {
     /**
      * @example notify.success('title')

package/OverflowTypography/OverflowTypography.d.ts

@@ -1,8 +1,8 @@
 import { PropsWithChildren } from 'react';
 import { TypographyProps } from '../Typography';
 import { TooltipProps as BasicTooltipProps } from '../Tooltip';
-declare type TooltipProps = Omit<BasicTooltipProps, 'ref'>;
-export declare type OverflowedProps = {
+type TooltipProps = Omit<BasicTooltipProps, 'ref'>;
+export type OverflowedProps = {
     /**
      * @example <OverflowTypography rowsCount={2} />
      * @default 1
@@ -10,15 +10,15 @@ export declare type OverflowedProps = {
      */
     rowsCount?: number;
 };
-declare type TooltipCustomizable = {
+type TooltipCustomizable = {
     /**
      * @example <OverflowTypography tooltipProps={{placement: 'top-start'}} />
      * @description способ кастомизировать тултип при необходимости
      */
     tooltipProps?: Omit<TooltipProps, 'children'>;
 };
-export declare type OverflowedElementProps = OverflowedProps & TooltipCustomizable & TypographyProps;
-export declare type OverflowedTypographyProps = PropsWithChildren<OverflowedElementProps>;
+export type OverflowedElementProps = OverflowedProps & TooltipCustomizable & TypographyProps;
+export type OverflowedTypographyProps = PropsWithChildren<OverflowedElementProps>;
 export declare const DEFAULT_ROWS_COUNT = 1;
 export declare const OverflowTypography: import("react").ForwardRefExoticComponent<Pick<OverflowedTypographyProps, string | number | symbol> & import("react").RefAttributes<HTMLElement>>;
 export {};

package/PageAside/PageAside.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export type PageAsideProps = {
+    children: ReactNode;
+};
+export declare const PageAside: ({ children }: PageAsideProps) => JSX.Element;

package/PageAside/PageAside.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageAside = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("./styles");
+const PageAside = ({ children }) => {
+    return (0, jsx_runtime_1.jsx)(styles_1.PageAsideWrapper, { children: children });
+};
+exports.PageAside = PageAside;

package/PageAside/index.d.ts

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

package/PageAside/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("./PageAside"), exports);

package/PageAside/styles.d.ts

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

package/PageAside/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageAsideWrapper = void 0;
+const styles_1 = require("../styles");
+exports.PageAsideWrapper = styles_1.styled.aside `
+  grid-area: aside;
+  width: 320px;
+  padding: ${({ theme }) => theme.spacing(6)};
+  overflow: auto;
+
+  border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-left: 1px solid ${({ theme }) => theme.palette.grey[300]};
+`;

package/PageContent/PageContent.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export type PageContentProps = {
+    children: ReactNode;
+    /**
+     * @example <PageContent isSeparatorShown />
+     * @default false
+     * Флаг, отображающий границу шапки
+     */
+    isSeparatorShown?: boolean;
+    /**
+     * @example <PageContent isPaddingDisabled>Контент</PageContent>
+     * @default true
+     * Флаг, добавляющий стандартные отсупы (требуются не всегда)
+     */
+    isPaddingDisabled?: boolean;
+};
+export declare const PageContent: (props: PageContentProps) => JSX.Element;

package/PageContent/PageContent.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("./styles");
+const PageContent = (props) => {
+    const { children, isPaddingDisabled = true, isSeparatorShown = false, } = props;
+    return ((0, jsx_runtime_1.jsx)(styles_1.PageContentWrapper, Object.assign({ isPaddingDisabled: isPaddingDisabled, isSeparatorShown: isSeparatorShown }, { children: children })));
+};
+exports.PageContent = PageContent;

package/PageContent/index.d.ts

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

package/PageContent/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("./PageContent"), exports);

package/PageContent/styles.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+type PageContentWrapperProps = {
+    isPaddingDisabled?: boolean;
+    isSeparatorShown?: boolean;
+};
+export declare const PageContentWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & PageContentWrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export {};

package/PageContent/styles.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageContentWrapper = void 0;
+const styles_1 = require("../styles");
+exports.PageContentWrapper = styles_1.styled.article `
+  grid-area: content;
+  padding: ${({ isPaddingDisabled, theme }) => isPaddingDisabled ? 0 : theme.spacing(0, 6)};
+  overflow: auto;
+
+  border-top: ${({ isSeparatorShown, theme }) => isSeparatorShown ? `1px solid ${theme.palette.grey[300]}` : 'none'};
+`;

package/PageHeader/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ButtonProps } from '../../Button';
+import { ListItemButtonProps } from '../../ListItemButton';
+export type ButtonGroupProps = {
+    main?: (Omit<ButtonProps, 'children'> & {
+        text: string;
+    })[];
+    secondary?: (Omit<ListItemButtonProps, 'children'> & {
+        text: string;
+    })[];
+};
+export declare const ButtonGroup: (props: ButtonGroupProps) => JSX.Element;

package/PageHeader/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,33 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonGroup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@astral/icons");
+const Button_1 = require("../../Button");
+const ListItemButton_1 = require("../../ListItemButton");
+const ListItemText_1 = require("../../ListItemText");
+const IconDropdownButton_1 = require("../../IconDropdownButton");
+const styles_1 = require("./styles");
+const ButtonGroup = (props) => {
+    const { main, secondary } = props;
+    return ((0, jsx_runtime_1.jsxs)(styles_1.ButtonGroupWrapper, { children: [secondary && ((0, jsx_runtime_1.jsx)(IconDropdownButton_1.IconDropdownButton, Object.assign({ icon: (0, jsx_runtime_1.jsx)(icons_1.DotsOutlineMd, {}), variant: "light" }, { children: secondary.map((_a) => {
+                    var { text } = _a, secondaryProps = __rest(_a, ["text"]);
+                    return ((0, jsx_runtime_1.jsx)(ListItemButton_1.ListItemButton, Object.assign({}, secondaryProps, { children: (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { primary: text }) }), text));
+                }) }))), main &&
+                main.map((_a) => {
+                    var { text } = _a, mainProps = __rest(_a, ["text"]);
+                    return ((0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({}, mainProps, { children: text }), text));
+                })] }));
+};
+exports.ButtonGroup = ButtonGroup;

package/PageHeader/ButtonGroup/index.d.ts

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

package/PageHeader/ButtonGroup/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("./ButtonGroup"), exports);

package/PageHeader/ButtonGroup/styles.d.ts

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

package/PageHeader/ButtonGroup/styles.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonGroupWrapper = void 0;
+const styles_1 = require("../../styles");
+exports.ButtonGroupWrapper = styles_1.styled.div `
+  display: flex;
+  grid-area: actions;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;

package/PageHeader/PageHeader.d.ts

@@ -0,0 +1,55 @@
+import { ReactNode } from 'react';
+import { BaseButtonProps } from '../ButtonBase';
+import { ButtonGroupProps } from './ButtonGroup';
+export type PageHeaderProps = {
+    /**
+     * @example <PageHeader title="Заголовок страницы" />
+     * Заголовок страницы
+     */
+    title: ReactNode;
+    /**
+     * @example <PageHeader description="Описание страницы" />
+     * Описание страницы
+     */
+    description?: ReactNode;
+    /**
+     * @example <PageHeader subheader={<TextField placeholder="Поиск на странице..." size="small" />} />
+     * Набор компонент, отображаемый в нижней части блока
+     */
+    subheader?: ReactNode;
+    /**
+     * @example <PageHeader breadcrumbs={
+     *  [
+     *    <Link>Первая ссылка</Link>,
+     *    <Link>Вторая ссылка</Link>,
+     *    <>Текст</>,
+     *  ]
+     * } />
+     * Хлебные крошки
+     */
+    breadcrumbs?: ReactNode[];
+    /**
+     * @example <PageHeader actions={{
+     *  main: [
+     *    {
+     *      text: 'Основное действие',
+     *    },
+     *  ],
+     *  secondary: [
+     *    {
+     *      text: 'Вспомогательное действие',
+     *    },
+     *  ]
+     * }} />
+     * Набор кнопок, видимые кофигурируются через объект main, скрытые в меню - через secondary
+     */
+    actions?: ButtonGroupProps;
+    /**
+     * @example <PageHeader backButton={{
+     *  onClick: () => {},
+     * }} />
+     * Кнопка назад
+     */
+    backButton?: Omit<BaseButtonProps, 'children' | 'variant'>;
+};
+export declare const PageHeader: (props: PageHeaderProps) => JSX.Element;

package/PageHeader/PageHeader.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@astral/icons");
+const ButtonGroup_1 = require("./ButtonGroup");
+const styles_1 = require("./styles");
+const PageHeader = (props) => {
+    const { title, description, subheader, breadcrumbs, actions, backButton } = props;
+    return ((0, jsx_runtime_1.jsxs)(styles_1.PageHeaderWrapper, { children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(styles_1.PageHeaderBreadcrumbs, { children: breadcrumbs })), backButton && ((0, jsx_runtime_1.jsx)(styles_1.PageHeaderBackButton, Object.assign({}, backButton, { variant: "light" }, { children: (0, jsx_runtime_1.jsx)(icons_1.ArrowLOutlineMd, {}) }))), (0, jsx_runtime_1.jsx)(styles_1.PageHeaderTitle, Object.assign({ variant: "h3" }, { children: title })), description && ((0, jsx_runtime_1.jsx)(styles_1.PageHeaderDescription, { children: description })), actions && (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup, Object.assign({}, actions)), subheader && (0, jsx_runtime_1.jsx)(styles_1.PageSubheader, { children: subheader })] }));
+};
+exports.PageHeader = PageHeader;

package/PageHeader/PageHeaderDashboardStory.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PageHeaderDashboardStory: () => JSX.Element;

package/PageHeader/PageHeaderDashboardStory.js

@@ -0,0 +1,285 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageHeaderDashboardStory = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@astral/icons");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const ActionCell_1 = require("../ActionCell");
+const DashboardLayout_1 = require("../DashboardLayout");
+const DataGrid_1 = require("../DataGrid");
+const DataGridPagination_1 = require("../DataGridPagination");
+const Divider_1 = require("../Divider");
+const ListItemIcon_1 = require("../ListItemIcon");
+const ListItemText_1 = require("../ListItemText");
+const Menu_1 = require("../Menu");
+const MenuItem_1 = require("../MenuItem");
+const PageLayout_1 = require("../PageLayout");
+const ProductSwitcher_1 = require("../ProductSwitcher");
+const ProductSwitcher_stories_1 = require("../ProductSwitcher/ProductSwitcher.stories");
+const Select_1 = require("../Select");
+const TextField_1 = require("../TextField");
+const ACTIONS = {
+    main: [
+        {
+            icon: (0, jsx_runtime_1.jsx)(icons_1.EyeFillMd, {}),
+            name: 'Просмотреть',
+            onClick: () => console.log('main'),
+        },
+        {
+            icon: (0, jsx_runtime_1.jsx)(icons_1.SendOutlineMd, {}),
+            nested: true,
+            name: 'Отправить',
+            actions: [
+                { name: 'Туда', onClick: () => console.log('nested 1') },
+                { name: 'Сюда', onClick: () => console.log('nested 2') },
+            ],
+        },
+    ],
+    secondary: [
+        { name: 'Редактировать', onClick: () => console.log('secondary 1') },
+        { name: 'Удалить', onClick: () => console.log('secondary 2') },
+    ],
+};
+const data = [
+    {
+        id: '1',
+        documentName: 'Документ 1',
+        direction: 'ФНС',
+        createDate: '2022-03-24T17:50:40.206Z',
+    },
+    {
+        id: '2',
+        documentName: 'Документ 2',
+        direction: 'ФСС',
+        createDate: '2022-03-24T17:50:40.206Z',
+    },
+    {
+        id: '3',
+        documentName: 'Документ 3',
+        direction: 'ПФР',
+        createDate: '2022-03-24T17:50:40.206Z',
+    },
+    {
+        id: '4',
+        documentName: 'Документ 4',
+        direction: 'РПН',
+        createDate: '2022-03-24T17:50:40.206Z',
+    },
+    {
+        id: '5',
+        documentName: 'Документ 5',
+        direction: 'ФНС',
+        createDate: '2022-03-24T17:50:40.206Z',
+    },
+    {
+        id: '6',
+        documentName: 'Документ 6',
+        direction: 'РПН',
+        createDate: '2022-03-24T17:50:40.206Z',
+    },
+    {
+        id: '7',
+        documentName: 'Документ 7',
+        direction: 'ПФР',
+        createDate: '2022-03-24T17:50:40.206Z',
+    },
+    {
+        id: '8',
+        documentName: 'Документ 8',
+        direction: 'ФНС',
+        createDate: '2022-03-24T17:50:40.206Z',
+    },
+    {
+        id: '9',
+        documentName: 'Документ 9',
+        direction: 'ФНС',
+        createDate: '2022-03-24T17:50:40.206Z',
+    },
+    {
+        id: '10',
+        documentName: 'Документ 10',
+        direction: 'ФСС',
+        createDate: '2022-03-24T17:50:40.206Z',
+    },
+    {
+        id: '11',
+        documentName: 'Документ 11',
+        direction: 'ФНС',
+        createDate: '2022-03-24T17:50:40.206Z',
+    },
+    {
+        id: '12',
+        documentName: 'Документ 12',
+        direction: 'РПН',
+        createDate: '2022-03-24T17:50:40.206Z',
+    },
+    {
+        id: '13',
+        documentName: 'Документ 13',
+        direction: 'ФНС',
+        createDate: '2022-03-24T17:50:40.206Z',
+    },
+    {
+        id: '15',
+        documentName: 'Документ 14',
+        direction: 'ФСС',
+        createDate: '2022-03-24T17:50:40.206Z',
+    },
+    {
+        id: '14',
+        documentName: 'Документ 15',
+        direction: 'ФНС',
+        createDate: '2022-03-24T17:50:40.206Z',
+    },
+    {
+        id: '16',
+        documentName: 'Документ 12',
+        direction: 'РПН',
+        createDate: '2022-03-24T17:50:40.206Z',
+    },
+];
+const columns = [
+    {
+        field: 'documentName',
+        label: 'Наименование документа',
+        sortable: true,
+    },
+    {
+        field: 'direction',
+        label: 'Направление',
+        sortable: true,
+    },
+    {
+        field: 'createDate',
+        label: 'Дата создания',
+        sortable: true,
+        format: ({ createDate }) => new Date(createDate).toLocaleDateString(),
+    },
+    {
+        label: 'Действия',
+        sortable: false,
+        align: 'center',
+        width: '1%',
+        renderCell: (row) => (0, jsx_runtime_1.jsx)(ActionCell_1.ActionCell, { actions: ACTIONS, row: row }),
+    },
+];
+const PageHeaderDashboardStory = () => {
+    const [selected, setSelected] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [slicedData, setSlicedData] = (0, react_1.useState)(data.slice(0, 10));
+    const [page, setPage] = (0, react_1.useState)(1);
+    const header = {
+        productSwitcher() {
+            return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(ProductSwitcher_1.ProductSwitcher, { getProducts: ProductSwitcher_stories_1.handleGetProducts }) }));
+        },
+        product: {
+            name: 'Астрал.ЭДО',
+            logo() {
+                return ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M6.5 6.10352e-05C5.1195 6.10352e-05 4 1.11956 4 2.50006V3.00006H13.75C15.545 3.00006 17 4.45506 17 6.25006V11.2501C17 12.2166 16.2165 13.0001 15.25 13.0001H8.75C7.7835 13.0001 7 12.2166 7 11.2501V8.00006H5C4.4475 8.00006 4 8.44756 4 9.00006V13.5001C4 14.8806 5.1195 16.0001 6.5 16.0001H17.5C18.8805 16.0001 20 14.8806 20 13.5001V2.50006C20 1.11956 18.8805 6.10352e-05 17.5 6.10352e-05H6.5Z", fill: "#8566FF" }), (0, jsx_runtime_1.jsx)("path", { d: "M2.5 4.00006C1.1195 4.00006 0 5.11956 0 6.50006V17.5001C0 18.8806 1.1195 20.0001 2.5 20.0001H13.5C14.8805 20.0001 16 18.8806 16 17.5001V17.0001H6.25C4.455 17.0001 3 15.5451 3 13.7501V8.75006C3 7.78356 3.7835 7.00006 4.75 7.00006H11.25C12.2165 7.00006 13 7.78356 13 8.75006V12.0001H15C15.5525 12.0001 16 11.5526 16 11.0001V6.50006C16 5.11956 14.8805 4.00006 13.5 4.00006H2.5Z", fill: "#5D3FD4" })] })));
+            },
+        },
+        profile: {
+            displayName: 'Григорьев Виталий',
+            annotation: 'vitatiy_grig@mail.ru',
+            avatar: {
+                alt: 'Григорьев Виталий',
+                children: 'ГВ',
+            },
+            menu(props) {
+                return ((0, jsx_runtime_1.jsxs)(Menu_1.Menu, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsxs)(MenuItem_1.MenuItem, { children: [(0, jsx_runtime_1.jsx)(ListItemIcon_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(icons_1.ProfileOutlineMd, {}) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { children: "\u041C\u043E\u0439 \u043F\u0440\u043E\u0444\u0438\u043B\u044C" })] }), (0, jsx_runtime_1.jsxs)(MenuItem_1.MenuItem, { children: [(0, jsx_runtime_1.jsx)(ListItemIcon_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(icons_1.CompanyOutlineMd, {}) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { children: "\u041C\u043E\u0438 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438" })] }), (0, jsx_runtime_1.jsxs)(MenuItem_1.MenuItem, { children: [(0, jsx_runtime_1.jsx)(ListItemIcon_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(icons_1.SettingsFillMd, {}) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { children: "\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438" })] }), (0, jsx_runtime_1.jsx)(Divider_1.Divider, {}), (0, jsx_runtime_1.jsxs)(MenuItem_1.MenuItem, { children: [(0, jsx_runtime_1.jsx)(ListItemIcon_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(icons_1.QuitOutlineMd, {}) }), (0, jsx_runtime_1.jsx)(ListItemText_1.ListItemText, { children: "\u0412\u044B\u0439\u0442\u0438" })] })] })));
+            },
+        },
+    };
+    const sidebar = {
+        menu: {
+            items: [
+                [
+                    'documents',
+                    {
+                        icon: (0, jsx_runtime_1.jsx)(icons_1.ProfileOutlineMd, {}),
+                        text: 'Документы',
+                        items: [
+                            [
+                                'incoming-documents',
+                                {
+                                    text: 'Входящие документы',
+                                    active: true,
+                                },
+                            ],
+                            [
+                                'outgoing-documents',
+                                {
+                                    text: 'Исходящие документы',
+                                    active: false,
+                                },
+                            ],
+                        ],
+                    },
+                ],
+                [
+                    'counterparties',
+                    {
+                        icon: (0, jsx_runtime_1.jsx)(icons_1.ProfileOutlineMd, {}),
+                        text: 'Контрагенты',
+                        items: [
+                            [
+                                'invitations',
+                                {
+                                    text: 'Приглашения',
+                                    active: false,
+                                },
+                            ],
+                        ],
+                    },
+                ],
+                [
+                    'organizations',
+                    {
+                        icon: (0, jsx_runtime_1.jsx)(icons_1.CompanyOutlineMd, {}),
+                        text: 'Мои организации',
+                        active: true,
+                    },
+                ],
+            ],
+        },
+    };
+    const handleChangePage = (_event, newPage) => {
+        setLoading(true);
+        setPage(newPage);
+        setTimeout(() => {
+            setLoading(false);
+            setSlicedData(data.slice((newPage - 1) * 10, newPage * 10));
+        }, 1500);
+    };
+    const handleSelect = (rows) => setSelected(rows);
+    const handleRowClick = (row) => console.log('row clicked', row);
+    return ((0, jsx_runtime_1.jsxs)(DashboardLayout_1.DashboardLayout, { children: [(0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout.Header, Object.assign({}, header)), (0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout.Sidebar, Object.assign({}, sidebar)), (0, jsx_runtime_1.jsx)(DashboardLayout_1.DashboardLayout.Main, { children: (0, jsx_runtime_1.jsx)(PageLayout_1.PageLayout, { header: {
+                        title: 'Черновики',
+                        breadcrumbs: [
+                            (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: "\u041F\u0435\u0440\u0432\u044B\u0439 \u0442\u0435\u043A\u0441\u0442" }, "1"),
+                            (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: "\u0422\u0435\u043A\u0441\u0442 \u0441 \u0440\u0430\u0437\u0434\u0435\u043B\u0438\u0442\u0435\u043B\u0435\u043C" }, "2"),
+                            (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: "\u0422\u0435\u043A\u0441\u0442 \u0441 \u0440\u0430\u0437\u0434\u0435\u043B\u0438\u0442\u0435\u043B\u0435\u043C" }, "3"),
+                        ],
+                        actions: {
+                            main: [
+                                {
+                                    text: 'Основное действие',
+                                    startIcon: (0, jsx_runtime_1.jsx)(icons_1.AddOutlineMd, {}),
+                                },
+                            ],
+                            secondary: [
+                                {
+                                    text: 'Кнопка',
+                                },
+                            ],
+                        },
+                        subheader: ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ flexDirection: "row", flexWrap: "wrap", gap: 2 }, { children: [(0, jsx_runtime_1.jsx)(TextField_1.TextField, { placeholder: "\u041F\u043E\u0438\u0441\u043A \u043D\u0430 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0435...", size: "small", InputProps: {
+                                        startAdornment: (0, jsx_runtime_1.jsx)(icons_1.SearchOutlineMd, {}),
+                                    } }), (0, jsx_runtime_1.jsx)(Select_1.Select, { value: "", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0430\u0440\u0438\u0430\u043D\u0442", size: "small" }), (0, jsx_runtime_1.jsx)(Select_1.Select, { value: "", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0430\u0440\u0438\u0430\u043D\u0442", size: "small" })] }))),
+                    }, content: {
+                        children: ((0, jsx_runtime_1.jsx)(DataGrid_1.DataGrid, { keyId: "id", rows: slicedData, columns: columns, selectedRows: selected, onSelectRow: handleSelect, onRowClick: handleRowClick, minDisplayRows: 10, loading: loading, Footer: (0, jsx_runtime_1.jsx)(DataGridPagination_1.DataGridPagination, { totalCount: data.length, onChange: handleChangePage, page: page }) })),
+                        isPaddingDisabled: false,
+                    } }) })] }));
+};
+exports.PageHeaderDashboardStory = PageHeaderDashboardStory;

package/PageHeader/index.d.ts

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

package/PageHeader/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("./PageHeader"), exports);