@octopusdeploy/design-system-components/dist/src/components/Page/Level1PageLayout.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, type UpsellCalloutActions } 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 Level1PageLayoutBaseProps {
    /**
     * 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.
     * - **badge**: `PageTitleBadge` *(optional)*
     * Props that will be passed to <Badge> to display a badge next to the title.
     * - **contextSelector**: `ReactElement` *(optional)*
     * A custom React element to render as a context selector next to the title, but before any badges.
     * - **breadcrumbs**: `BreadcrumbItem[]` *(optional)*
     * An array of breadcrumb items for hierarchical navigation. Refer to the Breadcumbs component.
     * - **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;
        badge?: PageTitleBadge;
        contextSelector?: ReactElement;
        breadcrumbs?: BreadcrumbItem[];
        primaryAction?: PrimaryPageAction;
        pageActions?: PageAction[];
        overflowActions?: SimpleMenuItem[];
    };
    /**
     * 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?: Level1PageLayoutCalloutType;
    busy?: boolean;
    errors?: ErrorInfo[];
    /**
     * Specifies whether the page content should take up the entire width of the page
     */
    isFullWidth: boolean;
}
type Level1PageLayoutCustomCalloutType = {
    type: "custom";
    content: React.ReactElement;
};
type Level1PageLayoutDefaultCalloutType = {
    title?: string;
    content: CalloutContent;
    messageState: Exclude<CalloutMessageState, "upsell">;
    actions?: StandardCalloutActions;
    onClose?: () => void;
} | {
    title?: string;
    content: CalloutContent;
    messageState: "upsell";
    actions: UpsellCalloutActions;
    onClose?: () => void;
};
export type Level1PageLayoutCalloutType = Level1PageLayoutCustomCalloutType | Level1PageLayoutDefaultCalloutType;
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.
     */
    filters?: {
        inputs: ReactNode[];
        filtersSummary?: ReactNode;
        advancedFilters?: {
            content: ReactNode;
            onResetFilter: () => void;
            hasUserSelectedValues: boolean;
            activeFilterCount?: number;
            hideByDefault?: boolean;
        };
    };
    /**
     * 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;
}
type Level1PageLayoutPropsWithoutTabs = Level1PageLayoutBaseProps & ContentProps & {
    children: React.ReactNode;
};
export type Level1PageLayoutProps = Level1PageLayoutPropsWithoutTabs;
/**
 * The `Level1PageLayout` component has pre-determined slots for `Errors`, `Callout`, `Header`, `Pagination`, and `Filters`.
 * It is designed to provide a consistent layout for pages with a single content area and optional filters and pagination controls.
 */
export declare function Level1PageLayout({ header, busy, callout, errors, isFullWidth, ...contentProps }: Level1PageLayoutProps): import("react/jsx-runtime").JSX.Element;
export {};