@astral/ui 4.85.0 → 4.86.0

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

package/components/PageHeader/HeaderContent/HeaderContent.js

@@ -6,13 +6,13 @@ import { PageActions } from '../PageActions';
 import { Title } from '../Title';
 import { Description } from './Description';
 import { FormFiltersProvider } from './FormFiltersProvider';
-import { BreadcrumbsWrapper, DesktopTitleWrapper, PageSubheader, } from './styles';
-export const HeaderContent = ({ backButton, description, subheader, breadcrumbs, actions, title, filters, isLoading, }) => {
+import { BreadcrumbsWrapper, DesktopTitleWrapper, PageSubheader, TabsWrapper, } from './styles';
+export const HeaderContent = ({ backButton, description, subheader, breadcrumbs, tabs, 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", withCollapseOnLaptop: Boolean(filters), ...actions })), filters && (_jsx(FormFiltersProvider, { filtersClassName: pageHeaderClassnames.filters, quickFiltersClassName: pageHeaderClassnames.quickFilters, children: filters })), subheader && (_jsx(PageSubheader, { className: pageHeaderClassnames.subheader, 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", withCollapseOnLaptop: Boolean(filters), ...actions })), filters && (_jsx(FormFiltersProvider, { filtersClassName: pageHeaderClassnames.filters, quickFiltersClassName: pageHeaderClassnames.quickFilters, children: filters })), tabs && _jsx(TabsWrapper, { children: tabs }), subheader && (_jsx(PageSubheader, { className: pageHeaderClassnames.subheader, children: subheader }))] }));
 };

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

@@ -3,6 +3,10 @@ export declare const BreadcrumbsWrapper: 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 TabsWrapper: 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 PageSubheader: 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

@@ -9,9 +9,19 @@ export const BreadcrumbsWrapper = styled.div `
     display: none;
   }
 `;
+export const TabsWrapper = styled.div `
+  grid-column: 1 / -1;
+  grid-row: 4;
+
+  padding-top:  ${({ theme }) => theme.spacing(3)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(0, 3, 3, 3)};
+  }
+`;
 export const PageSubheader = styled.div `
   grid-column: 1 / -1;
-  grid-row: 6;
+  grid-row: 5;
 
   padding-top: ${({ theme }) => theme.spacing(4)};
 

package/components/PageHeader/PageHeader.js

@@ -31,7 +31,7 @@ const rootCva = cva(pageHeaderClassnames.root, {
     },
 });
 export const PageHeader = (props) => {
-    const { title, description, subheader, breadcrumbs, actions, backButton, className, filters, } = props;
+    const { title, description, subheader, breadcrumbs, tabs, actions, backButton, className, filters, } = props;
     const { isLoading, mobileTitleActions, isShowMobileActions } = useLogic(props);
     return (_jsxs(_Fragment, { children: [_jsxs(MobileTitleWrapper, { className: mobilePageHeaderCva({
                     hasTitle: Boolean(title) || isLoading,
@@ -40,5 +40,5 @@ export const PageHeader = (props) => {
                     hasActions: Boolean(actions),
                     hasSubheader: Boolean(subheader),
                     hasFilters: Boolean(filters),
-                }), 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 }))] }));
+                }), className), children: _jsx(HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, tabs: tabs, filters: filters, isLoading: isLoading }) }), isShowMobileActions && (_jsx(MobilePageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
 };

package/components/PageHeader/styles.js

@@ -38,7 +38,7 @@ export const Wrapper = styled.header `
 
   .${pageHeaderClassnames.filters} {
     grid-column: 1 / -1;
-    grid-row: 4;
+    grid-row: 6;
 
     ${({ theme }) => theme.breakpoints.down('laptop')} {
       grid-column: 3;
@@ -48,7 +48,7 @@ export const Wrapper = styled.header `
 
   .${pageHeaderClassnames.quickFilters} {
     grid-column: 1 / -1;
-    grid-row: 5;
+    grid-row: 7;
 
     margin-top: ${({ theme }) => theme.spacing(4)};
 

package/components/PageHeader/types.d.ts

@@ -34,6 +34,16 @@ export type PageHeaderProps<TMainActionComponent extends ElementType = ElementTy
      * } />
      */
     breadcrumbs?: ReactNode;
+    /**
+     * Слот для tabs
+     * @example <PageHeader tabs={
+     * <Tabs value={tabValue} onChange={handleChange}>
+     *  <Tab label="Вкладка 1" />
+     *  <Tab label="Вкладка 2" />
+     * </Tabs>
+     * } />
+     */
+    tabs?: ReactNode;
     /**
      * Набор кнопок, видимые конфигурируются через объект main, скрытые в меню -
      * через secondary

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

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

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

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

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

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

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

@@ -3,6 +3,10 @@ export declare const BreadcrumbsWrapper: import("@emotion/styled/dist/declaratio
     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 TabsWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const PageSubheader: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DesktopTitleWrapper = exports.PageSubheader = exports.BreadcrumbsWrapper = void 0;
+exports.DesktopTitleWrapper = exports.PageSubheader = exports.TabsWrapper = exports.BreadcrumbsWrapper = void 0;
 const styled_1 = require("../../styled");
 exports.BreadcrumbsWrapper = styled_1.styled.div `
   grid-column: 2;
@@ -12,9 +12,19 @@ exports.BreadcrumbsWrapper = styled_1.styled.div `
     display: none;
   }
 `;
+exports.TabsWrapper = styled_1.styled.div `
+  grid-column: 1 / -1;
+  grid-row: 4;
+
+  padding-top:  ${({ theme }) => theme.spacing(3)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(0, 3, 3, 3)};
+  }
+`;
 exports.PageSubheader = styled_1.styled.div `
   grid-column: 1 / -1;
-  grid-row: 6;
+  grid-row: 5;
 
   padding-top: ${({ theme }) => theme.spacing(4)};
 

package/node/components/PageHeader/PageHeader.js

@@ -34,7 +34,7 @@ const rootCva = (0, cva_1.cva)(constants_1.pageHeaderClassnames.root, {
     },
 });
 const PageHeader = (props) => {
-    const { title, description, subheader, breadcrumbs, actions, backButton, className, filters, } = props;
+    const { title, description, subheader, breadcrumbs, tabs, actions, backButton, className, filters, } = props;
     const { isLoading, mobileTitleActions, isShowMobileActions } = (0, useLogic_1.useLogic)(props);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.MobileTitleWrapper, { className: mobilePageHeaderCva({
                     hasTitle: Boolean(title) || isLoading,
@@ -43,6 +43,6 @@ const PageHeader = (props) => {
                     hasActions: Boolean(actions),
                     hasSubheader: Boolean(subheader),
                     hasFilters: Boolean(filters),
-                }), className), children: (0, jsx_runtime_1.jsx)(HeaderContent_1.HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, filters: filters, isLoading: isLoading }) }), isShowMobileActions && ((0, jsx_runtime_1.jsx)(MobilePageActions_1.MobilePageActions, { className: (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
+                }), className), children: (0, jsx_runtime_1.jsx)(HeaderContent_1.HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, tabs: tabs, filters: filters, isLoading: isLoading }) }), isShowMobileActions && ((0, jsx_runtime_1.jsx)(MobilePageActions_1.MobilePageActions, { className: (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
 };
 exports.PageHeader = PageHeader;

package/node/components/PageHeader/styles.js

@@ -41,7 +41,7 @@ exports.Wrapper = styled_1.styled.header `
 
   .${constants_2.pageHeaderClassnames.filters} {
     grid-column: 1 / -1;
-    grid-row: 4;
+    grid-row: 6;
 
     ${({ theme }) => theme.breakpoints.down('laptop')} {
       grid-column: 3;
@@ -51,7 +51,7 @@ exports.Wrapper = styled_1.styled.header `
 
   .${constants_2.pageHeaderClassnames.quickFilters} {
     grid-column: 1 / -1;
-    grid-row: 5;
+    grid-row: 7;
 
     margin-top: ${({ theme }) => theme.spacing(4)};
 

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

@@ -34,6 +34,16 @@ export type PageHeaderProps<TMainActionComponent extends ElementType = ElementTy
      * } />
      */
     breadcrumbs?: ReactNode;
+    /**
+     * Слот для tabs
+     * @example <PageHeader tabs={
+     * <Tabs value={tabValue} onChange={handleChange}>
+     *  <Tab label="Вкладка 1" />
+     *  <Tab label="Вкладка 2" />
+     * </Tabs>
+     * } />
+     */
+    tabs?: ReactNode;
     /**
      * Набор кнопок, видимые конфигурируются через объект main, скрытые в меню -
      * через secondary

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.85.0",
+  "version": "4.86.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {