@octopusdeploy/design-system-components/dist/src/components/Page/Level2InnerPageLayout.d.ts

The design systems component library.

import type { ReactElement, ReactNode } from "react";
import type React from "react";
import type { BreadcrumbItem } from "../Breadcrumbs";
import type { StandardCalloutActions } from "../Callout/Callout";
import type { CalloutMessageState } from "../Callout/Callout.constants";
import type { CalloutContent } from "../Callout/calloutContent";
import { type ErrorInfo } from "../ErrorSummary";
import type { SimpleMenuItem } from "../MenuItems/SimpleMenuItems";
import type { PageAction, PrimaryPageAction } from "../PageActions/PageActions";
import type { PageTitleBadge } from "./types";
interface Level2InnerPageLayoutBaseProps {
    /**
     * Defines the elements used in the page header, ensuring a consistent and structured layout.
     * The `title` is required, while other elements such as chips, breadcrumbs, and actions are optional.
     *
     * - **title**: `string` *(required)*
     * The main title of the page. This is a required field and serves as the primary header text.
     * - **titleComplementaryText**: `string` *(required)*
     * Text which can provide additional context to both the title and the chip e.g. [Title] Exclusive to [Chip] *(optional)*.
     * - **logo**: `ReactElement` *(optional)*
     * A custom logo to display as part of the title
     * - **badge**: `PageTitleBadge` *(optional)*
     * A badge that display alongside the title, often used for status or categorization. Refer to the Badge component.
     * - **secondaryBadge**: `PageTitleBadge` *(optional)*
     * A second badge to display alongside the title.
     * - **breadcrumbs**: `BreadcrumbItem[]` *(optional)*
     * An array of breadcrumb items for hierarchical navigation. Refer to the the Breadcumbs component.
     * - **showBreadcrumbBackIcon**: `boolean` *(optional)*
     * to show a back icon next to the breadcrumb
     * - **primaryAction**: `PrimaryPageAction` *(optional)*
     * Defines the primary action for the page, such as a button for a key task.
     * Example: `{ label: "Save", onClick: () => handleSave() }`.
     * - **pageActions**: `PageAction[]` *(optional)*
     * An array of secondary actions displayed on the page, typically as buttons.
     * Example: `{ label: "Edit", type: "Button", buttonType: "secondary", onClick: () => handleEdit() }`.
     * - **overflowActions**: `SimpleMenuItem[]` *(optional)*
     * Actions displayed in an overflow menu for additional functionality. Refer to the the Simple Menu Items component.
     */
    header: {
        title: string;
        titleComplementaryText?: string;
        logo?: ReactElement;
        badge?: PageTitleBadge;
        secondaryBadge?: PageTitleBadge;
        /**
         * @deprecated Use badge instead.
         * A custom chip component to display alongside the title, often used for status or categorization. Refer to the Chip component.
         */
        chip?: ReactElement;
        contextSelector?: ReactElement;
        breadcrumbs?: BreadcrumbItem[];
        showBreadcrumbBackIcon?: boolean;
        primaryAction?: PrimaryPageAction;
        pageActions?: PageAction[];
        overflowActions?: SimpleMenuItem[];
    };
    busy: boolean;
    /**
     * A custom description to be rendered
     */
    description?: ReactNode;
    /**
     * The `Callout` component displays important information or alerts to the user.
     * It supports two configurations: a custom callout with a React element as content,
     * or a standard callout with a title, content, and optional close functionality.
     *
     * **Custom Callout**
     * - **type**: `"custom"`
     * Specifies the callout type as "custom".
     * - **content**: `React.ReactElement`
     * A custom React element to render inside the callout.
     *
     * **Standard Callout**
     * - **type**: `"information", "success", "warning", "danger", "new-feature", "generic"`
     * The type of the callout, defining its style and purpose.
     * - **title**: `React.ReactNode` *(optional)*
     * The optional title of the callout.
     * - **content**: `React.ReactNode`
     * The main content or message of the callout.
     * - **onClose**: `() => void` *(optional)*
     * A callback function triggered when the callout is closed.
     */
    callout?: Level2InnerPageLayoutCalloutType;
    errors?: ErrorInfo[];
    /**
     * Specifies whether the page content should take up the entire width of the page
     */
    fullWidth: boolean;
}
type CalloutActions = StandardCalloutActions;
type Level2InnerPageLayoutCustomCalloutType = {
    type: "custom";
    content: React.ReactElement;
};
type Level2InnerPageLayoutDefaultCalloutType = {
    title?: string;
    content: CalloutContent;
    messageState: CalloutMessageState;
    actions?: CalloutActions;
    onClose?: () => void;
};
export type Level2InnerPageLayoutCalloutType = Level2InnerPageLayoutCustomCalloutType | Level2InnerPageLayoutDefaultCalloutType;
interface ContentProps {
    /**
     * Defines the structure for filter inputs, summaries, and advanced filtering options in a page layout.
     * - **inputs**: `React.ReactNode[]` *(required)*
     * An array of input elements for filters. These can include dropdowns, text inputs, or custom filter components.
     *
     * - **filtersSummary**: `React.ReactNode` *(optional)*
     * A summary or overview of the applied filters, typically displayed above or near the filter inputs.
     *
     * - **advancedFilters**: `object` *(optional)*
     * Advanced filtering options for more complex use cases:
     * -- **content**: `React.ReactNode`
     * Custom content for the advanced filters section, such as additional inputs or filter groups.
     * -- **onResetFilter**: `() => void`
     * A callback function to reset the advanced filters to their default state.
     * -- **hasUserSelectedValues**: `boolean`
     * Indicates whether the user has applied any values in the advanced filters.
     *
     * - **onShareFilters**: `() => void` *(optional)*
     * When provided, a share button is rendered alongside the advanced filters toggle. The callback is
     * invoked when the button is clicked, typically to open a dialog for sharing the current filters.
     */
    filters?: {
        inputs: ReactNode[];
        filtersSummary?: ReactNode;
        advancedFilters?: {
            content: ReactNode;
            onResetFilter: () => void;
            hasUserSelectedValues: boolean;
        };
        onShareFilters?: () => void;
    };
    /**
     * Defines the UI and placement options for pagination controls within a page layout.
     *
     * - **ui**: `React.ReactNode` *(required)*
     * The React node representing the pagination UI, such as a component for navigating through pages.
     * - **placement**: `"top" | "bottom" | "topAndBottom"` *(required)*
     * Specifies where the pagination controls are displayed on the page:
     * - `"top"`: Displays pagination controls at the top of the page.
     * - `"bottom"`: Displays pagination controls at the bottom of the page.
     * - `"topAndBottom"`: Displays pagination controls at both the top and bottom of the page.
     */
    pagination?: {
        ui: ReactNode;
        placement: "top" | "bottom" | "topAndBottom";
    };
    /**
     * Defines a custom sidebar that will be rendered as part of the page content
     * @deprecated Avoid using sidebars for new pages; Consult your designer or Frontend Foundations Team for alternative solutions.
     */
    sidebar?: ReactNode;
}
export type Level2InnerPageLayoutPropsWithoutTabs = Level2InnerPageLayoutBaseProps & ContentProps & {
    /**
     * The children to render as part of the page content. *(required if no tabs)*
     */
    children: ReactNode;
    legacyTabs?: ReactNode;
};
export type Level2InnerPageLayoutPropsWithTabs<TabValue extends string> = Level2InnerPageLayoutBaseProps & {
    /**
     * Defines the tabs along with the content to show for each tab option. A level 2
     * page can only have top level tabs or content, but not both.
     * - **label**: `string` *(required)*
     * The label to use when rendering the tab
     * - **value**: `string` *(required)*
     * The value that uniquely identifies the tab
     * - **content**: `ReactNode` *(required)*
     * The content to display when the tab is selected
     * - **warning**: `string` *(optional)*
     * A warning which applies to the tab
     */
    tabs: Level2PageTab<TabValue>[];
    /**
     * A callback used to set the currently selected tab
     */
    onTabChanged: (value: TabValue) => void;
    /**
     * The current selected tab
     */
    currentTab: TabValue;
};
export interface Level2PageTab<TabValue extends string> extends ContentProps {
    value: TabValue;
    label: string;
    content: ReactNode;
    warning?: string;
    callout?: Level2InnerPageLayoutCalloutType;
}
export type Level2InnerPageLayoutProps<TabValue extends string = never> = Level2InnerPageLayoutPropsWithTabs<TabValue> | Level2InnerPageLayoutPropsWithoutTabs;
export declare function Level2InnerPageLayout<TabValue extends string>({ header, busy, description, callout, errors, fullWidth, ...contentProps }: Level2InnerPageLayoutProps<TabValue>): import("react/jsx-runtime").JSX.Element;
export {};