import type { JSX, FC, ReactNode } from "react"; import type { BreadcrumbProps } from "../Breadcrumbs"; import { type NotificationBannerColor } from "../NotificationBanner/NotificationBanner"; import { type IconProps } from "../Icons/types/IconProps.type"; type Nil = null | undefined; /** * A single tab in the page header's navigation bar. */ export interface PageHeaderNavigationTab> { title: string | JSX.Element; badgeCount?: number; isLoading?: boolean; dataTestId?: string; extra?: T; } /** * Tabbed navigation rendered at the bottom of the page header. */ export interface PageHeaderNavigation> { tabs?: PageHeaderNavigationTab[]; selectedIndex?: number; onSelect?: (params: { index: number; selectedTab: PageHeaderNavigationTab; }) => void; className?: string; } type WithPageHeaderBanner = { banner?: Nil | { title?: string; text: { content: string; isHTML?: boolean; }; color: NotificationBannerColor; noBorder?: boolean | null; icon?: string | FC; }; }; type AllOrNone = T | { [K in keyof T]?: never; }; type WithBreadcrumbProps = { truncateBreadcrumbsAfter?: number; } & AllOrNone<{ /** * The breadcrumbs displayed above the header of the page, * when using this prop, the `renderBreadcrumbItem` prop should also be defined * otherwise your breadcrumbs won't render. */ breadcrumbs: BreadcrumbProps["crumbs"]; renderBreadcrumbItem: BreadcrumbProps["renderItem"]; }>; export type PageHeaderProps = { /** * Tabbed navigation rendered at the bottom of the page header. The name * `navigation` does not convey this well. */ navigation?: PageHeaderNavigation; dataTestId?: string; title: string | ReactNode; isPolling?: boolean; className?: string; contained?: boolean; accessories?: ReactNode; } & WithPageHeaderBanner & WithBreadcrumbProps; export {};