@astral/ui 4.17.4 → 4.17.6

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Breadcrumbs_1 = require("../../Breadcrumbs");
+const utils_1 = require("../../utils");
+const constants_1 = require("../constants");
+const PageActions_1 = require("../PageActions");
+const Title_1 = require("../Title");
+const Description_1 = require("./Description");
+const styles_1 = require("./styles");
+const HeaderContent = ({ backButton, description, subheader, breadcrumbs, actions, title, isLoading, }) => {
+    const renderBreadcrumbs = () => {
+        if (!breadcrumbs) {
+            return null;
+        }
+        return ((0, jsx_runtime_1.jsx)(styles_1.BreadcrumbsWrapper, { children: Array.isArray(breadcrumbs) ? ((0, jsx_runtime_1.jsx)(Breadcrumbs_1.Breadcrumbs, { children: breadcrumbs })) : (breadcrumbs) }));
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderBreadcrumbs(), (0, jsx_runtime_1.jsx)(styles_1.DesktopTitleWrapper, { children: (0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), (0, jsx_runtime_1.jsx)(Description_1.Description, { description: description, isLoading: isLoading }), actions && ((0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { className: (0, utils_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", ...actions })), subheader && (0, jsx_runtime_1.jsx)(styles_1.PageSubheader, { children: subheader })] }));
+};
+exports.HeaderContent = HeaderContent;

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

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

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesktopTitleWrapper = exports.PageSubheader = exports.BreadcrumbsWrapper = void 0;
+const styled_1 = require("../../styled");
+exports.BreadcrumbsWrapper = styled_1.styled.div `
+  grid-column: 2;
+  grid-row: 1;
+
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;
+exports.PageSubheader = styled_1.styled.div `
+  grid-column: 1 / -1;
+  grid-row: 4;
+
+  padding-top: ${({ theme }) => theme.spacing(4)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(0, 4, 4, 4)};
+  }
+`;
+exports.DesktopTitleWrapper = styled_1.styled.div `
+  display: contents;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+
+    min-height: 48px;
+    padding: ${({ theme }) => theme.spacing(0, 4)};
+
+    background-color: ${({ theme }) => theme.palette.grey[100]};
+  }
+`;

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

@@ -0,0 +1,9 @@
+import type { ElementType } from 'react';
+import type { ActionGroupProps } from '../../ActionGroup';
+export type MobilePageActionsProps<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType> = ActionGroupProps<TMainActionComponent, TSecondaryActionComponent> & {
+    /**
+     * Если true, отображается skeleton
+     */
+    isLoading?: boolean;
+};
+export declare const MobilePageActions: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType>(props: MobilePageActionsProps<TMainActionComponent, TSecondaryActionComponent>) => JSX.Element | null;

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

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ShowMoreButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"inherit" | "error" | "success" | "warning" | "primary" | "secondary" | "info", import("@mui/material").ButtonPropsColorOverrides> | undefined;
+    disabled?: boolean | undefined;
+    disableElevation?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    endIcon?: import("react").ReactNode;
+    fullWidth?: boolean | undefined;
+    href?: string | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"large" | "medium" | "small", import("@mui/material").ButtonPropsSizeOverrides> | undefined;
+    startIcon?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"outlined" | "contained" | "text", import("@mui/material").ButtonPropsVariantOverrides> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "action" | "color" | "fullWidth" | "size" | "children" | "tabIndex" | "sx" | "disabled" | "href" | keyof import("@mui/material/OverridableComponent").CommonProps | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon" | "variant"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledCollapse: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("@mui/material").CollapseProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const ActionWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SecondaryActionsWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | 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: "large" | "medium";
+    spacing?: number | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    $isVisibleShowMoreButton: boolean;
+}, {}, {}>;

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

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledMainActions = exports.SecondaryActionsWrapper = exports.ActionWrapper = exports.StyledCollapse = exports.ShowMoreButton = exports.Wrapper = void 0;
+const material_1 = require("@mui/material");
+const styled_1 = require("../../styled");
+const constants_1 = require("../constants");
+const PageActions_1 = require("../PageActions");
+exports.Wrapper = styled_1.styled.div `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    position: sticky;
+    z-index: ${({ theme }) => theme.zIndex.speedDial};
+    bottom: 0;
+    left: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    order: 5;
+
+    width: 100%;
+
+    /* Ограничиваем высоту */
+    max-height: calc(100% - ${constants_1.PAGE_HEADER_HEIGHT_MOBILE});
+    margin-top: auto;
+    padding: ${({ theme }) => theme.spacing(4)};
+
+    background-color: ${({ theme }) => theme.palette.common.white};
+    border-top-left-radius: ${({ theme }) => theme.shape.large};
+    border-top-right-radius: ${({ theme }) => theme.shape.large};
+    box-shadow: ${({ theme }) => theme.elevation.up[100]};
+  }
+`;
+exports.ShowMoreButton = (0, styled_1.styled)(material_1.Button) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+
+    height: 40px;
+    min-height: 40px;
+    padding: 0;
+
+    &:hover {
+      background-color: unset;
+    }
+  }
+`;
+exports.StyledCollapse = (0, styled_1.styled)(material_1.Collapse) `
+  & .${material_1.collapseClasses.wrapper} > .${material_1.collapseClasses.wrapperInner} {
+    display: flex;
+    flex-direction: column;
+  }
+`;
+exports.ActionWrapper = styled_1.styled.div `
+  overflow: auto;
+`;
+exports.SecondaryActionsWrapper = (0, styled_1.styled)('div') `
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing(2)};
+
+  padding-bottom: ${({ theme }) => theme.spacing(2)};
+`;
+exports.StyledMainActions = (0, styled_1.styled)(PageActions_1.MainActions, {
+    shouldForwardProp: (prop) => !['$isVisibleShowMoreButton'].includes(prop),
+}) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding-bottom: ${({ theme, $isVisibleShowMoreButton }) => $isVisibleShowMoreButton ? theme.spacing(2) : 0};
+  }
+`;

package/node/components/PageHeader/MobilePageActions/useLogic/useLogic.d.ts

@@ -0,0 +1,13 @@
+import { type ElementType } from 'react';
+import { type MobilePageActionsProps } from '../MobilePageActions';
+type UseLogicParams<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType> = MobilePageActionsProps<TMainActionComponent, TSecondaryActionComponent>;
+export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType>({ main, secondary, secondaryVisible, isLoading, }: UseLogicParams<TMainActionComponent, TSecondaryActionComponent>) => {
+    disabledAction: boolean;
+    isActive: boolean;
+    handleToggle: () => void;
+    visibleMainActions: import("../../../ActionGroup").MainAction<TMainActionComponent>[] | undefined;
+    hiddenMainActions: import("../../../ActionGroup").MainAction<TMainActionComponent>[] | undefined;
+    isVisibleShowMoreButton: boolean;
+    isLoading: boolean | undefined;
+};
+export {};

package/node/components/PageHeader/MobilePageActions/useLogic/useLogic.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const ActionGroup_1 = require("../../../ActionGroup");
+const useLogic = ({ main, secondary, secondaryVisible, isLoading, }) => {
+    const [isActive, setIsActive] = (0, react_1.useState)(false);
+    const { disabledAction } = (0, ActionGroup_1.useActionsState)({ main, secondary });
+    const handleToggle = () => {
+        setIsActive(!isActive);
+    };
+    const visibleMainActions = main?.slice(0, 2);
+    const hiddenMainActions = main?.slice(2);
+    return {
+        disabledAction,
+        isActive,
+        handleToggle,
+        visibleMainActions,
+        hiddenMainActions,
+        isVisibleShowMoreButton: Boolean(secondary || secondaryVisible || hiddenMainActions?.length),
+        isLoading,
+    };
+};
+exports.useLogic = useLogic;

package/node/components/PageHeader/PageActions/MainActions/MainActions.d.ts

@@ -0,0 +1,17 @@
+import { type ElementType } from 'react';
+import { type MainAction, type MainActionsProps } from '../../../ActionGroup';
+import { type ButtonSize } from '../../../Button';
+type PageMainActionsProps<TMainActionComponent extends ElementType> = Omit<MainActionsProps<TMainActionComponent>, 'actions'> & {
+    actions?: MainAction<TMainActionComponent>[];
+    /**
+     * Класс, применяемый к корневому элементу
+     */
+    className?: string;
+    size: ButtonSize;
+    /**
+     * Отступ между действиями
+     */
+    spacing?: number;
+};
+export declare const MainActions: <TMainActionComponent extends ElementType = ElementType>({ actions, isDisabled, className, size, spacing, }: PageMainActionsProps<TMainActionComponent>) => JSX.Element | null;
+export {};

package/node/components/PageHeader/PageActions/MainActions/MainActions.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MainActions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ActionGroup_1 = require("../../../ActionGroup");
+const styles_1 = require("./styles");
+const MainActions = ({ actions, isDisabled, className, size, spacing = 2, }) => {
+    if (!actions || (actions && actions.length === 0)) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, "$spacing": spacing, children: (0, jsx_runtime_1.jsx)(ActionGroup_1.MainActions, { actions: actions ?? [], isDisabled: isDisabled, size: size }) }));
+};
+exports.MainActions = MainActions;

package/node/components/PageHeader/PageActions/MainActions/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $spacing: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/PageHeader/PageActions/MainActions/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrapper = void 0;
+const material_1 = require("@mui/material");
+const styled_1 = require("../../../styled");
+const Tooltip_1 = require("../../../Tooltip");
+exports.Wrapper = styled_1.styled.div `
+  display: flex;
+  gap: ${({ theme, $spacing }) => theme.spacing($spacing)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    flex-wrap: wrap;
+    gap: ${({ theme }) => theme.spacing(2)};
+    order: -1;
+
+    padding-bottom: ${({ theme }) => theme.spacing(2)};
+
+    & > .${Tooltip_1.tooltipClassnames.contentWrapper}, & > .${material_1.buttonClasses.root} {
+      flex: 1 1 calc(50% - ${({ theme }) => theme.spacing(1)});
+    }
+  }
+`;

package/node/components/PageHeader/PageActions/PageActionSkeleton/PageActionSkeleton.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type ButtonSize } from '../../../Button';
+type Props = {
+    size?: ButtonSize;
+};
+export declare const PageActionSkeleton: ({ size }: Props) => JSX.Element;
+export {};

package/node/components/PageHeader/PageActions/PageActionSkeleton/PageActionSkeleton.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageActionSkeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Skeleton_1 = require("../../../Skeleton");
+const styles_1 = require("./styles");
+const PageActionSkeleton = ({ size = 'medium' }) => {
+    if (size === 'medium') {
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded", height: 32, width: 180 });
+    }
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded", height: 40, width: 40 }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded", height: 40, width: 190 })] }));
+};
+exports.PageActionSkeleton = PageActionSkeleton;

package/node/components/PageHeader/PageActions/PageActionSkeleton/styles.d.ts

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

package/node/components/PageHeader/PageActions/PageActionSkeleton/styles.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrapper = void 0;
+const styled_1 = require("../../../styled");
+exports.Wrapper = styled_1.styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;

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

@@ -0,0 +1,25 @@
+import { type ElementType } from 'react';
+import { type ActionGroupProps } from '../../ActionGroup';
+import { type ButtonSize } from '../../Button';
+export type PageActionsProps<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType> = ActionGroupProps<TMainActionComponent, TSecondaryActionComponent> & {
+    /**
+     * Если true, отображается skeleton
+     */
+    isLoading?: boolean;
+    size?: ButtonSize;
+    /**
+     * Отступ между действиями
+     */
+    spacing?: number;
+};
+export declare const PageActions: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType>(props: ActionGroupProps<TMainActionComponent, TSecondaryActionComponent> & {
+    /**
+     * Если true, отображается skeleton
+     */
+    isLoading?: boolean | undefined;
+    size?: "large" | "medium" | undefined;
+    /**
+     * Отступ между действиями
+     */
+    spacing?: number | undefined;
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

package/node/components/PageHeader/PageActions/PageActions.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageActions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ActionGroup_1 = require("../../ActionGroup");
+const forwardRefWithGeneric_1 = require("../../forwardRefWithGeneric");
+const MainActions_1 = require("./MainActions");
+const PageActionSkeleton_1 = require("./PageActionSkeleton");
+const SecondaryActions_1 = require("./SecondaryActions");
+const SecondaryVisibleActions_1 = require("./SecondaryVisibleActions");
+const styles_1 = require("./styles");
+const PageActionsInner = (props, ref) => {
+    const { secondary, secondaryVisible, main, className, isLoading, size = 'medium', spacing = 2, } = props;
+    const { disabledAction } = (0, ActionGroup_1.useActionsState)({ main, secondary });
+    const renderSecondaryActions = () => ((0, jsx_runtime_1.jsxs)(styles_1.SecondaryWrapper, { "$spacing": spacing, children: [secondaryVisible && ((0, jsx_runtime_1.jsx)(SecondaryVisibleActions_1.SecondaryVisibleActions, { actions: secondaryVisible, size: size })), secondary && ((0, jsx_runtime_1.jsx)(SecondaryActions_1.SecondaryActions, { isDisabled: disabledAction, actions: secondary, size: size }))] }));
+    if (isLoading) {
+        return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { children: (0, jsx_runtime_1.jsx)(PageActionSkeleton_1.PageActionSkeleton, { size: size }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, ref: ref, children: (0, jsx_runtime_1.jsxs)(styles_1.ActionWrapper, { "$spacing": spacing, children: [(0, jsx_runtime_1.jsx)(MainActions_1.MainActions, { isDisabled: disabledAction, actions: main, size: size, spacing: spacing }), renderSecondaryActions()] }) }));
+};
+exports.PageActions = (0, forwardRefWithGeneric_1.forwardRefWithGeneric)(PageActionsInner);

package/node/components/PageHeader/PageActions/SecondaryActions/SecondaryActions.d.ts

@@ -0,0 +1,3 @@
+import { type ElementType } from 'react';
+import type { SecondaryActionProps } from '../../../ActionGroup';
+export declare const SecondaryActions: <TSecondaryActionComponent extends ElementType = ElementType>({ actions, isDisabled, size, }: SecondaryActionProps<TSecondaryActionComponent>) => JSX.Element;

package/node/components/PageHeader/PageActions/SecondaryActions/styles.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const StyledMobileButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
+    variant?: "light" | "link" | "outlined" | "contained" | "text" | undefined;
+    loading?: boolean | undefined;
+    color?: "grey" | "error" | "success" | "warning" | "primary" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledSecondaryActions: <TSecondaryActionComponent extends import("react").ElementType = import("react").ElementType>({ actions, isDisabled, className, size, }: import("../../../ActionGroup").SecondaryActionProps<TSecondaryActionComponent>) => JSX.Element | null;

package/node/components/PageHeader/PageActions/SecondaryActions/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledSecondaryActions = exports.StyledMobileButton = void 0;
+const ActionGroup_1 = require("../../../ActionGroup");
+const Button_1 = require("../../../Button");
+const styled_1 = require("../../../styled");
+exports.StyledMobileButton = (0, styled_1.styled)(Button_1.Button) `
+  display: none;
+
+  width: 100%;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+  }
+`;
+exports.StyledSecondaryActions = (0, styled_1.styled)(ActionGroup_1.SecondaryActions) `
+  display: flex;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

package/node/components/PageHeader/PageActions/SecondaryVisibleActions/SecondaryVisibleActions.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type SecondaryVisibleActionProps } from '../../../ActionGroup';
+export declare const SecondaryVisibleActions: ({ actions, size, }: SecondaryVisibleActionProps) => JSX.Element;

package/node/components/PageHeader/PageActions/SecondaryVisibleActions/styles.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const StyledMobileButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
+    variant?: "light" | "link" | "outlined" | "contained" | "text" | undefined;
+    loading?: boolean | undefined;
+    color?: "grey" | "error" | "success" | "warning" | "primary" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledSecondaryVisibleActions: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../../ActionGroup").SecondaryVisibleActionProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/node/components/PageHeader/PageActions/SecondaryVisibleActions/styles.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledSecondaryVisibleActions = exports.StyledMobileButton = void 0;
+const ActionGroup_1 = require("../../../ActionGroup");
+const Button_1 = require("../../../Button");
+const styled_1 = require("../../../styled");
+exports.StyledMobileButton = (0, styled_1.styled)(Button_1.Button) `
+  display: none;
+  flex-grow: 1;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+  }
+`;
+exports.StyledSecondaryVisibleActions = (0, styled_1.styled)(ActionGroup_1.SecondaryVisibleActions) `
+  display: flex;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SecondaryWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $spacing: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ActionWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $spacing: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionWrapper = exports.SecondaryWrapper = exports.Wrapper = void 0;
+const styled_1 = require("../../styled");
+exports.Wrapper = styled_1.styled.div `
+  display: flex;
+  grid-column: 3;
+  grid-row: 1 / 4;
+  gap: ${({ theme }) => theme.spacing(2)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;
+exports.SecondaryWrapper = (0, styled_1.styled)('div') `
+  display: flex;
+  flex-wrap: nowrap;
+  gap: ${({ theme, $spacing }) => theme.spacing($spacing)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    gap: ${({ theme }) => theme.spacing(2)};
+  }
+`;
+exports.ActionWrapper = styled_1.styled.div `
+  display: flex;
+  flex-direction: row-reverse;
+  gap: ${({ theme, $spacing }) => theme.spacing($spacing)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    gap: ${({ theme }) => theme.spacing(2)};
+  }
+`;

package/node/components/PageHeader/PageHeader.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../utils");
+const constants_1 = require("./constants");
+const HeaderContent_1 = require("./HeaderContent");
+const MobilePageActions_1 = require("./MobilePageActions");
+const styles_1 = require("./styles");
+const Title_1 = require("./Title");
+const useLogic_1 = require("./useLogic");
+const PageHeader = (props) => {
+    const { title, description, subheader, breadcrumbs, actions, backButton, className, } = props;
+    const { isLoading, mobileTitleActions, isShowMobileActions, mobileClassnames, } = (0, useLogic_1.useLogic)(props);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.MobileTitleWrapper, { className: mobileClassnames, children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, children: (0, jsx_runtime_1.jsx)(HeaderContent_1.HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, isLoading: isLoading }) }), isShowMobileActions && ((0, jsx_runtime_1.jsx)(MobilePageActions_1.MobilePageActions, { className: (0, utils_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
+};
+exports.PageHeader = PageHeader;

package/node/components/PageHeader/Title/Title.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Title = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("../../../icons");
+const OverflowTypography_1 = require("../../OverflowTypography");
+const styles_1 = require("./styles");
+const Title = ({ backButton, title, isLoading, hasDescription, hasBreadcrumbs, }) => {
+    if (!title && isLoading) {
+        return (0, jsx_runtime_1.jsx)(styles_1.StyledSkeleton, { height: 20, width: 280, variant: "rounded" });
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [backButton && ((0, jsx_runtime_1.jsx)(styles_1.BackButton, { ...backButton, variant: "outlined", color: "grey", size: "medium", children: (0, jsx_runtime_1.jsx)(icons_1.ArrowLOutlineMd, {}) })), typeof title === 'string' ? ((0, jsx_runtime_1.jsx)(styles_1.TitleWrapper, { component: "h1", variant: "h3", "$hasDescription": hasDescription, "$hasBreadcrumbs": hasBreadcrumbs, children: (0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { component: "div", variant: "inherit", children: title }) })) : ((0, jsx_runtime_1.jsx)(styles_1.TitleWrapper, { component: "div", role: "heading", variant: "h3", "aria-level": 1, "$hasDescription": hasDescription, "$hasBreadcrumbs": hasBreadcrumbs, children: title }))] }));
+};
+exports.Title = Title;