@astral/ui 4.74.0 → 4.76.0

package/components/DonutChart/useLogic/utils/index.d.ts

@@ -0,0 +1,6 @@
+export { getMeterAriaValue } from './getMeterAriaValue';
+export { getDonutChartCssVars } from './getDonutChartCssVars';
+export { getGeometry } from './getGeometry';
+export { getProgressCirclePath } from './getProgressCirclePath';
+export { getProgressOffset } from './getProgressOffset';
+export { getProgressPercent } from './getProgressPercent';

package/components/DonutChart/useLogic/utils/index.js

@@ -0,0 +1,6 @@
+export { getMeterAriaValue } from './getMeterAriaValue';
+export { getDonutChartCssVars } from './getDonutChartCssVars';
+export { getGeometry } from './getGeometry';
+export { getProgressCirclePath } from './getProgressCirclePath';
+export { getProgressOffset } from './getProgressOffset';
+export { getProgressPercent } from './getProgressPercent';

package/components/ExpansionPanel/Summary/styles.d.ts

@@ -13,6 +13,6 @@ export declare const Title: import("../../styled").StyledComponent<{
 export declare const StyledChevron: import("../../styled").StyledComponent<{
     isActive?: boolean | undefined;
     className?: string | undefined;
-} & Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").SvgIconProps>, "classes" | "children" | "ref"> & {
+} & Omit<import("../..").WithoutEmotionSpecific<import("../..").SvgIconProps>, "classes" | "children" | "ref"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/MenuOrganization/OrganizationButton/styles.d.ts

@@ -12,7 +12,7 @@ export declare const StyledButton: import("../../styled/styled").StyledComponent
 export declare const StyledChevron: import("../../styled/styled").StyledComponent<{
     isActive?: boolean | undefined;
     className?: string | undefined;
-} & Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").SvgIconProps>, "classes" | "children" | "ref"> & {
+} & Omit<import("../..").WithoutEmotionSpecific<import("../..").SvgIconProps>, "classes" | "children" | "ref"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const Container: import("../../styled/styled").StyledComponent<{

package/components/NewStepper/StepIcon/StepIcon.js

@@ -4,6 +4,7 @@ import { StepErrorFillMd } from '../../../icons/StepErrorFillMd';
 import { StepSuccessFillMd } from '../../../icons/StepSuccessFillMd';
 import { cva } from '../../utils/cva';
 import { stepIconClassnames } from './constants';
+import { useLogic } from './useLogic';
 const stepIcon = cva(stepIconClassnames.root, {
     variants: {
         isActive: {
@@ -21,10 +22,11 @@ const stepIcon = cva(stepIconClassnames.root, {
     },
 });
 export const StepIcon = ({ icon: Icon, isActive, isCompleted, isError, isWarning, }) => {
+    const { isShowError } = useLogic({ isError, isActive, isCompleted });
     if (Icon) {
         return (_jsx(Icon, { isActive: isActive, isCompleted: isCompleted, isError: isError, isWarning: isWarning, className: stepIcon({ isActive, isCompleted, isError, isWarning }) }));
     }
-    if (isError && !isActive) {
+    if (isShowError) {
         return _jsx(StepErrorFillMd, { className: stepIcon({ isError: true }) });
     }
     if (isCompleted) {

package/components/NewStepper/StepIcon/useLogic/index.d.ts

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

package/components/NewStepper/StepIcon/useLogic/index.js

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

package/components/NewStepper/StepIcon/useLogic/useLogic.d.ts

@@ -0,0 +1,8 @@
+export type UseLogicParams = {
+    isActive?: boolean;
+    isCompleted?: boolean;
+    isError?: boolean;
+};
+export declare const useLogic: ({ isError, isActive, isCompleted, }: UseLogicParams) => {
+    isShowError: boolean | undefined;
+};

package/components/NewStepper/StepIcon/useLogic/useLogic.js

@@ -0,0 +1,6 @@
+export const useLogic = ({ isError, isActive, isCompleted, }) => {
+    const isShowError = (isError && !isActive) || (isError && isCompleted && isActive);
+    return {
+        isShowError,
+    };
+};

package/components/PageContent/PageContent.js

@@ -1,12 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, isValidElement } from 'react';
+import { forwardRef, isValidElement, useContext } from 'react';
+import { PageContext } from '../PageContext';
 import { PageLayoutFooter, } from '../PageLayoutFooter';
 import { classNames } from '../utils/classNames';
+import { cva } from '../utils/cva';
 import { pageContentClassnames } from './constants';
 import { Content, Wrapper } from './styles';
-import { useLogic } from './useLogic';
+const contentCva = cva(pageContentClassnames.content, {
+    variants: {
+        isUnconstrained: {
+            true: pageContentClassnames.isUnconstrained,
+        },
+        hasHeader: {
+            true: pageContentClassnames.contentHasHeader,
+        },
+        hasAside: {
+            true: pageContentClassnames.hasAside,
+        },
+    },
+});
 export const PageContent = forwardRef((props, forwardedRef) => {
-    const { hasAside, contentClassnames } = useLogic(props);
-    const { className, children, isFullHeight = true, footer, scrollRef, header, } = props;
-    return (_jsxs(Wrapper, { className: classNames(className, pageContentClassnames.pageContent), ref: forwardedRef, "$isFullHeight": isFullHeight, "$isSeparatorShown": hasAside || Boolean(header), children: [header && header, _jsx(Content, { ref: scrollRef, className: contentClassnames, "$hasAside": hasAside || Boolean(header), children: children }), footer && !isValidElement(footer) && (_jsx(PageLayoutFooter, { ...footer })), isValidElement(footer) && footer] }));
+    const { hasAside } = useContext(PageContext);
+    const { className, children, isFullHeight = true, footer, scrollRef, header, isUnconstrained = false, } = props;
+    return (_jsxs(Wrapper, { className: classNames(className, pageContentClassnames.pageContent), ref: forwardedRef, "$isFullHeight": isFullHeight, "$isSeparatorShown": hasAside || Boolean(header), children: [header && header, _jsx(Content, { ref: scrollRef, className: contentCva({
+                    isUnconstrained,
+                    hasHeader: Boolean(header),
+                    hasAside,
+                }), children: children }), footer && !isValidElement(footer) && (_jsx(PageLayoutFooter, { ...footer })), isValidElement(footer) && footer] }));
 });

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;
+};