@astral/ui 4.75.0 → 4.76.0

package/components/PageContent/PageContentHeader/Description/Description.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Skeleton } from '../../../Skeleton';
 import { Typography } from '../../../Typography';
+import { SkeletonWrapper } from './styles';
 export const Description = ({ className, description, isLoading, }) => {
     if (!description && isLoading) {
-        return _jsx(Skeleton, { className: className, height: 20, width: 300 });
+        return (_jsx(SkeletonWrapper, { children: _jsx(Skeleton, { className: className, height: 16, width: 300, variant: "rounded" }) }));
     }
     if (typeof description === 'string') {
         return (_jsx(Typography, { className: className, variant: "body1", children: description }));

package/components/PageContent/PageContentHeader/Description/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const SkeletonWrapper: 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>, {}>;

package/components/PageContent/PageContentHeader/Description/styles.js

@@ -0,0 +1,10 @@
+import { styled } from '../../../styled';
+export const SkeletonWrapper = styled.div `
+  display: flex;
+
+  padding: ${({ theme }) => theme.spacing(1, 0)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

package/components/PageContent/PageContentHeader/PageContentHeader.js

@@ -1,8 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
 import { pageContentHeaderClassnames } from './constants';
 import { Description } from './Description';
+import { PageContentHeaderProvider } from './PageContentHeaderContext';
 import { TitleBlock, Wrapper } from './styles';
 import { Title } from './Title';
+import { useLogic } from './useLogic';
 export const PageContentHeader = ({ title, description, actions, children, isLoading, }) => {
-    return (_jsxs(Wrapper, { className: pageContentHeaderClassnames.pageContentHeader, children: [_jsxs(TitleBlock, { children: [_jsx(Title, { title: title, isLoading: isLoading, children: children }), _jsx(Description, { className: pageContentHeaderClassnames.description, description: description, isLoading: isLoading })] }), actions && actions] }));
+    const { pageHeaderContainer, isMobile } = useLogic();
+    const content = (_jsx(PageContentHeaderProvider, { title: title, description: description, children: _jsxs(Wrapper, { className: pageContentHeaderClassnames.pageContentHeader, children: [_jsxs(TitleBlock, { children: [_jsx(Title, { title: title, isLoading: isLoading, children: children }), _jsx(Description, { className: pageContentHeaderClassnames.description, description: description, isLoading: isLoading })] }), actions] }) }));
+    // В мобильной версии pageContentHeader отображается внутри PageHeader страницы
+    if (isMobile && pageHeaderContainer) {
+        return createPortal(content, pageHeaderContainer);
+    }
+    return content;
 };

package/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/MobilePageContentHeaderActions.d.ts

@@ -0,0 +1,3 @@
+import { type ElementType } from 'react';
+import { type PageContentHeaderActionsProps } from '../types';
+export declare const MobilePageContentHeaderActions: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType>(props: PageContentHeaderActionsProps<TMainActionComponent, TSecondaryActionComponent>) => import("react/jsx-runtime").JSX.Element;

package/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/MobilePageContentHeaderActions.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DotsVOutlineMd } from '../../../../../icons/DotsVOutlineMd';
+import { BottomDrawer } from '../../../../BottomDrawer';
+import { SecondaryActions, SecondaryVisibleActions, } from '../../../../PageHeader/PageActions';
+import { Typography } from '../../../../Typography';
+import { Description } from '../../Description';
+import { ActionsWrapper, AddonInfoWrapper, BottomDrawerWrapper, StyledIconButton, StyledMainActions, } from './styles';
+import { useLogic } from './useLogic';
+export const MobilePageContentHeaderActions = (props) => {
+    const { open, handleOpenMenu, handleCloseMenu, main, secondary, secondaryVisible, title, description, } = useLogic(props);
+    return (_jsxs(_Fragment, { children: [_jsx(StyledIconButton, { title: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043F\u043E\u0434\u0440\u043E\u0431\u043D\u0443\u044E \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044E", variant: "text", color: "grey", onClick: handleOpenMenu, children: _jsx(DotsVOutlineMd, {}) }), _jsx(BottomDrawer, { title: "\u041F\u043E\u0434\u0440\u043E\u0431\u043D\u0430\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F", onClose: handleCloseMenu, open: open, children: _jsxs(BottomDrawerWrapper, { children: [_jsxs(AddonInfoWrapper, { children: [_jsx(Typography, { variant: "h6", children: title }), _jsx(Description, { description: description })] }), _jsxs(ActionsWrapper, { children: [_jsx(StyledMainActions, { actions: main, size: "large" }), _jsx(SecondaryVisibleActions, { actions: secondaryVisible, size: "large" }), _jsx(SecondaryActions, { actions: secondary, size: "large" })] })] }) })] }));
+};

package/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/index.d.ts

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

package/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/index.js

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

package/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/styles.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+export declare const BottomDrawerWrapper: 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 AddonInfoWrapper: 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 StyledIconButton: import("../../../../styled").StyledComponent<Omit<import("../../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "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;
+    size?: "large" | "medium" | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const ActionsWrapper: 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 StyledMainActions: import("../../../../styled").StyledComponent<Omit<import("../../../../ActionGroup").MainActionsProps<import("react").ElementType>, "actions"> & {
+    actions?: import("../../../..").MainAction<import("react").ElementType>[] | undefined;
+    className?: string | undefined;
+    size: import("../../../..").ButtonSize;
+    spacing?: number | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledSkeleton: import("../../../../styled").StyledComponent<Omit<import("../../../..").WithoutEmotionSpecific<import("@mui/material").SkeletonProps<import("react").ElementType, unknown>>, "animation" | "variant"> & {
+    component?: import("react").ElementType | undefined;
+    variant?: "text" | "circular" | "rounded" | undefined;
+    shapeSize?: "large" | "medium" | "small" | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/styles.js

@@ -0,0 +1,41 @@
+import { IconButton } from '../../../../IconButton';
+import { MainActions } from '../../../../PageHeader/PageActions';
+import { Skeleton } from '../../../../Skeleton';
+import { styled } from '../../../../styled';
+import { tooltipClassnames } from '../../../../Tooltip';
+export const BottomDrawerWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(6)};
+
+  padding: ${({ theme }) => theme.spacing(4)};
+`;
+export const AddonInfoWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(3)};
+`;
+export const StyledIconButton = styled(IconButton) `
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    display: none;
+  }
+`;
+export const ActionsWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
+
+  & .${tooltipClassnames.contentWrapper} {
+    display: none;
+  }
+`;
+export const StyledMainActions = styled(MainActions) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding-bottom: 0;
+  }
+`;
+export const StyledSkeleton = styled(Skeleton) `
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    display: none;
+  }
+`;

package/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/useLogic/index.d.ts

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

package/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/useLogic/index.js

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

package/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/useLogic/useLogic.d.ts

@@ -0,0 +1,14 @@
+import { type ElementType } from 'react';
+import { type PageContentHeaderActionsProps } from '../../types';
+type UseLogicParams<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType> = PageContentHeaderActionsProps<TMainActionComponent, TSecondaryActionComponent>;
+export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType>({ main: rawMain, secondary: rawSecondary, secondaryVisible: rawSecondaryVisible, }: UseLogicParams<TMainActionComponent, TSecondaryActionComponent>) => {
+    open: boolean;
+    handleOpenMenu: () => void;
+    handleCloseMenu: () => void;
+    main: import("../../../../..").MainAction<TMainActionComponent>[];
+    secondary: import("../../../../../ActionGroup").SecondaryAction<TSecondaryActionComponent>[];
+    secondaryVisible: import("../../../../../ActionGroup").SecondaryVisibleAction[];
+    title: import("react").ReactNode;
+    description: import("react").ReactNode;
+};
+export {};

package/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/useLogic/useLogic.js

@@ -0,0 +1,23 @@
+import { useContext, useMemo } from 'react';
+import { useMenu } from '../../../../../useMenu';
+import { PageContentHeaderContext } from '../../../PageContentHeaderContext';
+import { composeCloseIntoActions } from './utils';
+export const useLogic = ({ main: rawMain = [], secondary: rawSecondary = [], secondaryVisible: rawSecondaryVisible = [], }) => {
+    const { open, handleOpenMenu, handleCloseMenu } = useMenu();
+    const { title, description } = useContext(PageContentHeaderContext);
+    const [main, secondary, secondaryVisible] = useMemo(() => [
+        composeCloseIntoActions(rawMain, handleCloseMenu),
+        composeCloseIntoActions(rawSecondary, handleCloseMenu),
+        composeCloseIntoActions(rawSecondaryVisible, handleCloseMenu),
+    ], [rawMain, rawSecondary, rawSecondaryVisible, handleCloseMenu]);
+    return {
+        open,
+        handleOpenMenu,
+        handleCloseMenu,
+        main,
+        secondary,
+        secondaryVisible,
+        title,
+        description,
+    };
+};

package/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/useLogic/utils/composeCloseIntoActions/composeCloseIntoActions.d.ts

@@ -0,0 +1,14 @@
+import { type MouseEventHandler } from 'react';
+type NestedAction = {
+    onClick?: MouseEventHandler;
+};
+type Action = {
+    onClick?: MouseEventHandler;
+    isNested?: boolean;
+    actions?: NestedAction[];
+};
+/**
+ * Рекурсивно оборачивает onClick обработчики действий, добавляя вызов closeFn
+ */
+export declare const composeCloseIntoActions: <TAction extends Action>(actions: TAction[], closeFn: () => void) => TAction[];
+export {};

package/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/useLogic/utils/composeCloseIntoActions/composeCloseIntoActions.js

@@ -0,0 +1,18 @@
+/**
+ * Рекурсивно оборачивает onClick обработчики действий, добавляя вызов closeFn
+ */
+export const composeCloseIntoActions = (actions, closeFn) => {
+    return actions.map((action) => {
+        const composed = {
+            ...action,
+            onClick: (event) => {
+                action.onClick?.(event);
+                closeFn();
+            },
+        };
+        if (action.actions) {
+            composed.actions = composeCloseIntoActions(action.actions, closeFn);
+        }
+        return composed;
+    });
+};

package/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/useLogic/utils/composeCloseIntoActions/index.d.ts

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

package/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/useLogic/utils/composeCloseIntoActions/index.js

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

package/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/useLogic/utils/index.d.ts

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

package/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/useLogic/utils/index.js

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

package/components/PageContent/PageContentHeader/PageContentHeaderActions/PageContentHeaderActions.d.ts

@@ -1,4 +1,3 @@
 import type { ElementType } from 'react';
-import { type PageActionsProps } from '../../../PageHeader';
-export type PageContentHeaderActionsProps<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType> = PageActionsProps<TMainActionComponent, TSecondaryActionComponent>;
-export declare const PageContentHeaderActions: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType>(props: PageContentHeaderActionsProps<TMainActionComponent, TSecondaryActionComponent>) => import("react/jsx-runtime").JSX.Element;
+import { type PageContentHeaderActionsProps } from './types';
+export declare const PageContentHeaderActions: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType>({ isLoading, ...props }: PageContentHeaderActionsProps<TMainActionComponent, TSecondaryActionComponent>) => import("react/jsx-runtime").JSX.Element;

package/components/PageContent/PageContentHeader/PageContentHeaderActions/PageContentHeaderActions.js

@@ -1,5 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { PageActions } from '../../../PageHeader';
-export const PageContentHeaderActions = (props) => {
-    return _jsx(PageActions, { size: "medium", spacing: 1, ...props });
+import { MobilePageContentHeaderActions } from './MobilePageContentHeaderActions';
+import { PageContentHeaderActionsSkeleton } from './PageContentHeaderActionsSkeleton';
+export const PageContentHeaderActions = ({ isLoading, ...props }) => {
+    if (isLoading) {
+        return _jsx(PageContentHeaderActionsSkeleton, {});
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(PageActions, { size: "medium", spacing: 1, ...props }), _jsx(MobilePageContentHeaderActions, { ...props })] }));
 };

package/components/PageContent/PageContentHeader/PageContentHeaderActions/PageContentHeaderActionsSkeleton/PageContentHeaderActionsSkeleton.d.ts

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

package/components/PageContent/PageContentHeader/PageContentHeaderActions/PageContentHeaderActionsSkeleton/PageContentHeaderActionsSkeleton.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyledSkeleton } from './styles';
+export const PageContentHeaderActionsSkeleton = () => {
+    return _jsx(StyledSkeleton, { variant: "rounded" });
+};

package/components/PageContent/PageContentHeader/PageContentHeaderActions/PageContentHeaderActionsSkeleton/index.d.ts

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

package/components/PageContent/PageContentHeader/PageContentHeaderActions/PageContentHeaderActionsSkeleton/index.js

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

package/components/PageContent/PageContentHeader/PageContentHeaderActions/PageContentHeaderActionsSkeleton/styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const StyledSkeleton: import("../../../../styled").StyledComponent<Omit<import("../../../..").WithoutEmotionSpecific<import("@mui/material").SkeletonProps<import("react").ElementType, unknown>>, "animation" | "variant"> & {
+    component?: import("react").ElementType | undefined;
+    variant?: "text" | "circular" | "rounded" | undefined;
+    shapeSize?: "large" | "medium" | "small" | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/PageContent/PageContentHeader/PageContentHeaderActions/PageContentHeaderActionsSkeleton/styles.js

@@ -0,0 +1,13 @@
+import { Skeleton } from '../../../../Skeleton';
+import { styled } from '../../../../styled';
+export const StyledSkeleton = styled(Skeleton) `
+  flex-shrink: 0;
+
+  width: 180px;
+  height: 32px;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: 40px;
+    height: 40px;
+  }
+`;

package/components/PageContent/PageContentHeader/PageContentHeaderActions/index.d.ts

@@ -1 +1,3 @@
 export * from './PageContentHeaderActions';
+export * from './types';
+export * from './PageContentHeaderActionsSkeleton';

package/components/PageContent/PageContentHeader/PageContentHeaderActions/index.js

@@ -1 +1,3 @@
 export * from './PageContentHeaderActions';
+export * from './types';
+export * from './PageContentHeaderActionsSkeleton';

package/components/PageContent/PageContentHeader/PageContentHeaderActions/types.d.ts

@@ -0,0 +1,3 @@
+import type { ElementType } from 'react';
+import type { PageActionsProps } from '../../../PageHeader';
+export type PageContentHeaderActionsProps<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType> = PageActionsProps<TMainActionComponent, TSecondaryActionComponent>;

package/components/PageContent/PageContentHeader/PageContentHeaderActions/types.js

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

package/components/PageContent/PageContentHeader/PageContentHeaderContext/PageContentHeaderContext.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+export type PageContentHeaderContextProps = {
+    title?: ReactNode;
+    description?: ReactNode;
+};
+/**
+ * Контекст для проброса параметров (title, description) для использования внутри bottomDrawer в мобильном отображении.
+ */
+export declare const PageContentHeaderContext: import("react").Context<PageContentHeaderContextProps>;

package/components/PageContent/PageContentHeader/PageContentHeaderContext/PageContentHeaderContext.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+/**
+ * Контекст для проброса параметров (title, description) для использования внутри bottomDrawer в мобильном отображении.
+ */
+export const PageContentHeaderContext = createContext({
+    title: undefined,
+    description: undefined,
+});

package/components/PageContent/PageContentHeader/PageContentHeaderContext/PageContentHeaderProvider/PageContentHeaderProvider.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+import { type PageContentHeaderContextProps } from '../PageContentHeaderContext';
+type Props = PageContentHeaderContextProps & {
+    children: ReactNode;
+};
+export declare const PageContentHeaderProvider: ({ children, title, description, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/PageContent/PageContentHeader/PageContentHeaderContext/PageContentHeaderProvider/PageContentHeaderProvider.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { PageContentHeaderContext, } from '../PageContentHeaderContext';
+export const PageContentHeaderProvider = ({ children, title, description, }) => {
+    const contextValue = useMemo(() => ({ title, description }), [title, description]);
+    return (_jsx(PageContentHeaderContext.Provider, { value: contextValue, children: children }));
+};

package/components/PageContent/PageContentHeader/PageContentHeaderContext/PageContentHeaderProvider/index.d.ts

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

package/components/PageContent/PageContentHeader/PageContentHeaderContext/PageContentHeaderProvider/index.js

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

package/components/PageContent/PageContentHeader/PageContentHeaderContext/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PageContentHeaderContext';
+export * from './PageContentHeaderProvider';

package/components/PageContent/PageContentHeader/PageContentHeaderContext/index.js

@@ -0,0 +1,2 @@
+export * from './PageContentHeaderContext';
+export * from './PageContentHeaderProvider';

package/components/PageContent/PageContentHeader/Title/Title.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { OverflowTypography } from '../../../OverflowTypography';
-import { Skeleton } from '../../../Skeleton';
-import { TitleWrapper } from './styles';
+import { StyledSkeleton, TitleWrapper } from './styles';
 export const Title = ({ title, isLoading, children }) => {
     if (!title && !children && isLoading) {
-        return _jsx(Skeleton, { height: 20, width: 200 });
+        return _jsx(StyledSkeleton, { variant: "rounded" });
     }
     if (typeof title === 'string') {
         return (_jsxs(TitleWrapper, { component: "h3", variant: "h5", children: [_jsx(OverflowTypography, { component: "div", variant: "inherit", children: title }), children] }));

package/components/PageContent/PageContentHeader/Title/styles.d.ts

@@ -10,3 +10,10 @@ export declare const TitleWrapper: import("../../../styled").StyledComponent<imp
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
+export declare const StyledSkeleton: import("../../../styled").StyledComponent<Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").SkeletonProps<import("react").ElementType, unknown>>, "animation" | "variant"> & {
+    component?: import("react").ElementType | undefined;
+    variant?: "text" | "circular" | "rounded" | undefined;
+    shapeSize?: "large" | "medium" | "small" | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/PageContent/PageContentHeader/Title/styles.js

@@ -1,3 +1,4 @@
+import { Skeleton } from '../../../Skeleton';
 import { styled } from '../../../styled';
 import { Typography } from '../../../Typography';
 export const TitleWrapper = styled(Typography) `
@@ -6,3 +7,11 @@ export const TitleWrapper = styled(Typography) `
   gap: ${({ theme }) => theme.spacing(1)};
   align-items: center;
 `;
+export const StyledSkeleton = styled(Skeleton) `
+  width: 200px;
+  height: 20px;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: 100%;
+  }
+`;

package/components/PageContent/PageContentHeader/styles.js

@@ -11,13 +11,13 @@ export const Wrapper = styled.header `
   border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-      margin: ${({ theme }) => theme.spacing(0, 4)};
+    gap: ${({ theme }) => theme.spacing(5)};
 
-      background-color: ${({ theme }) => theme.palette.background.default};
-      border: 1px solid ${({ theme }) => theme.palette.components.border.default};
-      border-bottom: none;
-      border-top-left-radius: ${({ theme }) => theme.shape.medium};
-      border-top-right-radius: ${({ theme }) => theme.shape.medium};
+    height: 48px;
+    padding: ${({ theme }) => theme.spacing(0, 1, 0, 4)};
+
+    background-color: ${({ theme }) => theme.palette.background.default};
+    border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
   }
 `;
 export const TitleBlock = styled.div `
@@ -26,6 +26,8 @@ export const TitleBlock = styled.div `
   flex-direction: column;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: 100%;
+
     & .${pageContentHeaderClassnames.description} {
       display: none;
     }

package/components/PageContent/PageContentHeader/useLogic/index.d.ts

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

package/components/PageContent/PageContentHeader/useLogic/index.js

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

package/components/PageContent/PageContentHeader/useLogic/useLogic.d.ts

@@ -0,0 +1,4 @@
+export declare const useLogic: () => {
+    pageHeaderContainer: Element | null;
+    isMobile: boolean;
+};

package/components/PageContent/PageContentHeader/useLogic/useLogic.js

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+import { pageHeaderClassnames } from '../../../PageHeader';
+import { useViewportType } from '../../../useViewportType';
+export const useLogic = () => {
+    const [pageHeaderContainer, setPageHeaderContainer] = useState(null);
+    const { isMobile } = useViewportType();
+    useEffect(() => {
+        const container = document.querySelector(`.${pageHeaderClassnames.root}`);
+        setPageHeaderContainer(container);
+    }, []);
+    return {
+        pageHeaderContainer,
+        isMobile,
+    };
+};

package/components/PageContent/public.d.ts

@@ -1,4 +1,4 @@
 export { pageContentClassnames } from './constants';
 export { PageContent } from './PageContent';
-export { PageContentHeader, PageContentHeaderActions, type PageContentHeaderActionsProps, type PageContentHeaderProps, } from './PageContentHeader';
+export { PageContentHeader, PageContentHeaderActions, type PageContentHeaderActionsProps, PageContentHeaderActionsSkeleton, type PageContentHeaderProps, } from './PageContentHeader';
 export type { PageContentProps } from './types';

package/components/PageContent/public.js

@@ -1,3 +1,3 @@
 export { pageContentClassnames } from './constants';
 export { PageContent } from './PageContent';
-export { PageContentHeader, PageContentHeaderActions, } from './PageContentHeader';
+export { PageContentHeader, PageContentHeaderActions, PageContentHeaderActionsSkeleton, } from './PageContentHeader';

package/components/PageContent/styles.js

@@ -67,6 +67,10 @@ export const Content = styled.div `
     padding-right: ${({ theme }) => theme.spacing(4)};
     padding-bottom: ${({ theme }) => theme.spacing(3)};
     padding-left: ${({ theme }) => theme.spacing(4)};
+
+    &.${pageContentClassnames.contentHasHeader}, &.${pageContentClassnames.hasAside} {
+      padding: ${({ theme }) => theme.spacing(4, 4, 3)};
+    }
   }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {

package/node/components/PageContent/PageContentHeader/Description/Description.js

@@ -4,9 +4,10 @@ exports.Description = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Skeleton_1 = require("../../../Skeleton");
 const Typography_1 = require("../../../Typography");
+const styles_1 = require("./styles");
 const Description = ({ className, description, isLoading, }) => {
     if (!description && isLoading) {
-        return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { className: className, height: 20, width: 300 });
+        return ((0, jsx_runtime_1.jsx)(styles_1.SkeletonWrapper, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { className: className, height: 16, width: 300, variant: "rounded" }) }));
     }
     if (typeof description === 'string') {
         return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { className: className, variant: "body1", children: description }));

package/node/components/PageContent/PageContentHeader/Description/styles.d.ts

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

package/node/components/PageContent/PageContentHeader/Description/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonWrapper = void 0;
+const styled_1 = require("../../../styled");
+exports.SkeletonWrapper = styled_1.styled.div `
+  display: flex;
+
+  padding: ${({ theme }) => theme.spacing(1, 0)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

package/node/components/PageContent/PageContentHeader/PageContentHeader.js

@@ -2,11 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageContentHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_dom_1 = require("react-dom");
 const constants_1 = require("./constants");
 const Description_1 = require("./Description");
+const PageContentHeaderContext_1 = require("./PageContentHeaderContext");
 const styles_1 = require("./styles");
 const Title_1 = require("./Title");
+const useLogic_1 = require("./useLogic");
 const PageContentHeader = ({ title, description, actions, children, isLoading, }) => {
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: constants_1.pageContentHeaderClassnames.pageContentHeader, children: [(0, jsx_runtime_1.jsxs)(styles_1.TitleBlock, { children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { title: title, isLoading: isLoading, children: children }), (0, jsx_runtime_1.jsx)(Description_1.Description, { className: constants_1.pageContentHeaderClassnames.description, description: description, isLoading: isLoading })] }), actions && actions] }));
+    const { pageHeaderContainer, isMobile } = (0, useLogic_1.useLogic)();
+    const content = ((0, jsx_runtime_1.jsx)(PageContentHeaderContext_1.PageContentHeaderProvider, { title: title, description: description, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: constants_1.pageContentHeaderClassnames.pageContentHeader, children: [(0, jsx_runtime_1.jsxs)(styles_1.TitleBlock, { children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { title: title, isLoading: isLoading, children: children }), (0, jsx_runtime_1.jsx)(Description_1.Description, { className: constants_1.pageContentHeaderClassnames.description, description: description, isLoading: isLoading })] }), actions] }) }));
+    // В мобильной версии pageContentHeader отображается внутри PageHeader страницы
+    if (isMobile && pageHeaderContainer) {
+        return (0, react_dom_1.createPortal)(content, pageHeaderContainer);
+    }
+    return content;
 };
 exports.PageContentHeader = PageContentHeader;

package/node/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/MobilePageContentHeaderActions.d.ts

@@ -0,0 +1,3 @@
+import { type ElementType } from 'react';
+import { type PageContentHeaderActionsProps } from '../types';
+export declare const MobilePageContentHeaderActions: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType>(props: PageContentHeaderActionsProps<TMainActionComponent, TSecondaryActionComponent>) => import("react/jsx-runtime").JSX.Element;