@astral/ui 4.75.0 → 4.76.0

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobilePageContentHeaderActions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DotsVOutlineMd_1 = require("../../../../../icons/DotsVOutlineMd");
+const BottomDrawer_1 = require("../../../../BottomDrawer");
+const PageActions_1 = require("../../../../PageHeader/PageActions");
+const Typography_1 = require("../../../../Typography");
+const Description_1 = require("../../Description");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+const MobilePageContentHeaderActions = (props) => {
+    const { open, handleOpenMenu, handleCloseMenu, main, secondary, secondaryVisible, title, description, } = (0, useLogic_1.useLogic)(props);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.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: (0, jsx_runtime_1.jsx)(DotsVOutlineMd_1.DotsVOutlineMd, {}) }), (0, jsx_runtime_1.jsx)(BottomDrawer_1.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: (0, jsx_runtime_1.jsxs)(styles_1.BottomDrawerWrapper, { children: [(0, jsx_runtime_1.jsxs)(styles_1.AddonInfoWrapper, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "h6", children: title }), (0, jsx_runtime_1.jsx)(Description_1.Description, { description: description })] }), (0, jsx_runtime_1.jsxs)(styles_1.ActionsWrapper, { children: [(0, jsx_runtime_1.jsx)(styles_1.StyledMainActions, { actions: main, size: "large" }), (0, jsx_runtime_1.jsx)(PageActions_1.SecondaryVisibleActions, { actions: secondaryVisible, size: "large" }), (0, jsx_runtime_1.jsx)(PageActions_1.SecondaryActions, { actions: secondary, size: "large" })] })] }) })] }));
+};
+exports.MobilePageContentHeaderActions = MobilePageContentHeaderActions;

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

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

package/node/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/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("./MobilePageContentHeaderActions"), exports);

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

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+export declare const BottomDrawerWrapper: 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 AddonInfoWrapper: 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 StyledIconButton: import("@emotion/styled/dist/declarations/src/types").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("@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 StyledMainActions: import("@emotion/styled/dist/declarations/src/types").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("@emotion/styled/dist/declarations/src/types").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/node/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/styles.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledSkeleton = exports.StyledMainActions = exports.ActionsWrapper = exports.StyledIconButton = exports.AddonInfoWrapper = exports.BottomDrawerWrapper = void 0;
+const IconButton_1 = require("../../../../IconButton");
+const PageActions_1 = require("../../../../PageHeader/PageActions");
+const Skeleton_1 = require("../../../../Skeleton");
+const styled_1 = require("../../../../styled");
+const Tooltip_1 = require("../../../../Tooltip");
+exports.BottomDrawerWrapper = styled_1.styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(6)};
+
+  padding: ${({ theme }) => theme.spacing(4)};
+`;
+exports.AddonInfoWrapper = styled_1.styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(3)};
+`;
+exports.StyledIconButton = (0, styled_1.styled)(IconButton_1.IconButton) `
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    display: none;
+  }
+`;
+exports.ActionsWrapper = styled_1.styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
+
+  & .${Tooltip_1.tooltipClassnames.contentWrapper} {
+    display: none;
+  }
+`;
+exports.StyledMainActions = (0, styled_1.styled)(PageActions_1.MainActions) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding-bottom: 0;
+  }
+`;
+exports.StyledSkeleton = (0, styled_1.styled)(Skeleton_1.Skeleton) `
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    display: none;
+  }
+`;

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

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

package/node/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/useLogic/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("./useLogic"), exports);

package/node/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/node/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/useLogic/useLogic.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const useMenu_1 = require("../../../../../useMenu");
+const PageContentHeaderContext_1 = require("../../../PageContentHeaderContext");
+const utils_1 = require("./utils");
+const useLogic = ({ main: rawMain = [], secondary: rawSecondary = [], secondaryVisible: rawSecondaryVisible = [], }) => {
+    const { open, handleOpenMenu, handleCloseMenu } = (0, useMenu_1.useMenu)();
+    const { title, description } = (0, react_1.useContext)(PageContentHeaderContext_1.PageContentHeaderContext);
+    const [main, secondary, secondaryVisible] = (0, react_1.useMemo)(() => [
+        (0, utils_1.composeCloseIntoActions)(rawMain, handleCloseMenu),
+        (0, utils_1.composeCloseIntoActions)(rawSecondary, handleCloseMenu),
+        (0, utils_1.composeCloseIntoActions)(rawSecondaryVisible, handleCloseMenu),
+    ], [rawMain, rawSecondary, rawSecondaryVisible, handleCloseMenu]);
+    return {
+        open,
+        handleOpenMenu,
+        handleCloseMenu,
+        main,
+        secondary,
+        secondaryVisible,
+        title,
+        description,
+    };
+};
+exports.useLogic = useLogic;

package/node/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/node/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/useLogic/utils/composeCloseIntoActions/composeCloseIntoActions.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.composeCloseIntoActions = void 0;
+/**
+ * Рекурсивно оборачивает onClick обработчики действий, добавляя вызов closeFn
+ */
+const composeCloseIntoActions = (actions, closeFn) => {
+    return actions.map((action) => {
+        const composed = {
+            ...action,
+            onClick: (event) => {
+                action.onClick?.(event);
+                closeFn();
+            },
+        };
+        if (action.actions) {
+            composed.actions = (0, exports.composeCloseIntoActions)(action.actions, closeFn);
+        }
+        return composed;
+    });
+};
+exports.composeCloseIntoActions = composeCloseIntoActions;

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

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

package/node/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/useLogic/utils/composeCloseIntoActions/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("./composeCloseIntoActions"), exports);

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

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

package/node/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/useLogic/utils/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("./composeCloseIntoActions"), exports);

package/node/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/node/components/PageContent/PageContentHeader/PageContentHeaderActions/PageContentHeaderActions.js

@@ -3,7 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageContentHeaderActions = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const PageHeader_1 = require("../../../PageHeader");
-const PageContentHeaderActions = (props) => {
-    return (0, jsx_runtime_1.jsx)(PageHeader_1.PageActions, { size: "medium", spacing: 1, ...props });
+const MobilePageContentHeaderActions_1 = require("./MobilePageContentHeaderActions");
+const PageContentHeaderActionsSkeleton_1 = require("./PageContentHeaderActionsSkeleton");
+const PageContentHeaderActions = ({ isLoading, ...props }) => {
+    if (isLoading) {
+        return (0, jsx_runtime_1.jsx)(PageContentHeaderActionsSkeleton_1.PageContentHeaderActionsSkeleton, {});
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PageHeader_1.PageActions, { size: "medium", spacing: 1, ...props }), (0, jsx_runtime_1.jsx)(MobilePageContentHeaderActions_1.MobilePageContentHeaderActions, { ...props })] }));
 };
 exports.PageContentHeaderActions = PageContentHeaderActions;

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

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

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

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

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

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

package/node/components/PageContent/PageContentHeader/PageContentHeaderActions/PageContentHeaderActionsSkeleton/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("./PageContentHeaderActionsSkeleton"), exports);

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const StyledSkeleton: import("@emotion/styled/dist/declarations/src/types").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/node/components/PageContent/PageContentHeader/PageContentHeaderActions/PageContentHeaderActionsSkeleton/styles.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledSkeleton = void 0;
+const Skeleton_1 = require("../../../../Skeleton");
+const styled_1 = require("../../../../styled");
+exports.StyledSkeleton = (0, styled_1.styled)(Skeleton_1.Skeleton) `
+  flex-shrink: 0;
+
+  width: 180px;
+  height: 32px;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: 40px;
+    height: 40px;
+  }
+`;

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

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

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

@@ -15,3 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./PageContentHeaderActions"), exports);
+__exportStar(require("./types"), exports);
+__exportStar(require("./PageContentHeaderActionsSkeleton"), exports);

package/node/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/node/components/PageContent/PageContentHeader/PageContentHeaderActions/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/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/node/components/PageContent/PageContentHeader/PageContentHeaderContext/PageContentHeaderContext.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageContentHeaderContext = void 0;
+const react_1 = require("react");
+/**
+ * Контекст для проброса параметров (title, description) для использования внутри bottomDrawer в мобильном отображении.
+ */
+exports.PageContentHeaderContext = (0, react_1.createContext)({
+    title: undefined,
+    description: undefined,
+});

package/node/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/node/components/PageContent/PageContentHeader/PageContentHeaderContext/PageContentHeaderProvider/PageContentHeaderProvider.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageContentHeaderProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const PageContentHeaderContext_1 = require("../PageContentHeaderContext");
+const PageContentHeaderProvider = ({ children, title, description, }) => {
+    const contextValue = (0, react_1.useMemo)(() => ({ title, description }), [title, description]);
+    return ((0, jsx_runtime_1.jsx)(PageContentHeaderContext_1.PageContentHeaderContext.Provider, { value: contextValue, children: children }));
+};
+exports.PageContentHeaderProvider = PageContentHeaderProvider;

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

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

package/node/components/PageContent/PageContentHeader/PageContentHeaderContext/PageContentHeaderProvider/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("./PageContentHeaderProvider"), exports);

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

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

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

@@ -0,0 +1,18 @@
+"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("./PageContentHeaderContext"), exports);
+__exportStar(require("./PageContentHeaderProvider"), exports);

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

@@ -3,11 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Title = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const OverflowTypography_1 = require("../../../OverflowTypography");
-const Skeleton_1 = require("../../../Skeleton");
 const styles_1 = require("./styles");
 const Title = ({ title, isLoading, children }) => {
     if (!title && !children && isLoading) {
-        return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { height: 20, width: 200 });
+        return (0, jsx_runtime_1.jsx)(styles_1.StyledSkeleton, { variant: "rounded" });
     }
     if (typeof title === 'string') {
         return ((0, jsx_runtime_1.jsxs)(styles_1.TitleWrapper, { component: "h3", variant: "h5", children: [(0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { component: "div", variant: "inherit", children: title }), children] }));

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

@@ -10,3 +10,10 @@ export declare const TitleWrapper: import("@emotion/styled/dist/declarations/src
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
+export declare const StyledSkeleton: import("@emotion/styled/dist/declarations/src/types").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/node/components/PageContent/PageContentHeader/Title/styles.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TitleWrapper = void 0;
+exports.StyledSkeleton = exports.TitleWrapper = void 0;
+const Skeleton_1 = require("../../../Skeleton");
 const styled_1 = require("../../../styled");
 const Typography_1 = require("../../../Typography");
 exports.TitleWrapper = (0, styled_1.styled)(Typography_1.Typography) `
@@ -9,3 +10,11 @@ exports.TitleWrapper = (0, styled_1.styled)(Typography_1.Typography) `
   gap: ${({ theme }) => theme.spacing(1)};
   align-items: center;
 `;
+exports.StyledSkeleton = (0, styled_1.styled)(Skeleton_1.Skeleton) `
+  width: 200px;
+  height: 20px;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: 100%;
+  }
+`;

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

@@ -14,13 +14,13 @@ exports.Wrapper = styled_1.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};
   }
 `;
 exports.TitleBlock = styled_1.styled.div `
@@ -29,6 +29,8 @@ exports.TitleBlock = styled_1.styled.div `
   flex-direction: column;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: 100%;
+
     & .${constants_1.pageContentHeaderClassnames.description} {
       display: none;
     }

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const PageHeader_1 = require("../../../PageHeader");
+const useViewportType_1 = require("../../../useViewportType");
+const useLogic = () => {
+    const [pageHeaderContainer, setPageHeaderContainer] = (0, react_1.useState)(null);
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
+    (0, react_1.useEffect)(() => {
+        const container = document.querySelector(`.${PageHeader_1.pageHeaderClassnames.root}`);
+        setPageHeaderContainer(container);
+    }, []);
+    return {
+        pageHeaderContainer,
+        isMobile,
+    };
+};
+exports.useLogic = useLogic;

package/node/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';