import { CSSProperties } from 'react';
import React from 'react';
import * as React_2 from 'react';

/**
 * 定义面包屑。通常包括若干个{@link IBreadcrumb.Item | Breadcrumb.Item}作为子元素。
 * @public
 */
export declare const Breadcrumb: IBreadcrumb;

declare type BreadcrumbItemType = typeof import('@alicloud/console-components/types/breadcrumb').Item;

/**
 * 定义页面主体的内容结构。可以包含内容导航菜单，通过{@link IContentProps.menu | menu属性}传入。
 * @public
 */
export declare const Content: React.FC<IContentProps>;

/**
 * @public
 */
export declare const Header: React.FC<IHeaderProps>;

/**
 * @public
 */
export declare interface IBreadcrumb extends React_2.FC<IBreadcrumbProps> {
    /**
     * 定义面包屑的项。
     */
    Item: BreadcrumbItemType;
}

/**
 * @public
 */
export declare interface IBreadcrumbProps {
    /**
     * 面包屑的项。通常包括若干个{@link IBreadcrumb.Item | Breadcrumb.Item}作为子元素。
     */
    children: React_2.ReactNode;
}

/**
 * @public
 */
export declare interface IContentProps {
    /**
     * 内容容器的类名。
     */
    className?: string;
    /**
     * 内容容器的样式。
     */
    style?: CSSProperties;
    /**
     * 内容的导航菜单。通常使用{@link Menu | Page.Menu}组件来定义，传给这个prop。
     */
    menu?: React.ReactNode;
    /* Excluded from this release type: adjustHeight */
    /**
     * 实际展示的内容。
     */
    children?: React.ReactNode;
}

/**
 * @public
 */
export declare interface IHeaderProps {
    /**
     * Header元素的类名。
     */
    className?: string;
    /**
     * Header元素的样式。
     */
    style?: React.CSSProperties;
    /**
     * 页面一级标题。
     */
    title?: React.ReactNode;
    /**
     * 页面二级标题。
     */
    subTitle?: React.ReactNode;
    /**
     * 定义面包屑导航区域的内容。
     * 通常使用{@link Breadcrumb | Page.Breadcrumb}组件来定义面包屑导航，然后传给这个prop。
     */
    breadcrumb?: React.ReactNode;
    /**
     * 面包屑额外内容
     */
    breadcrumbExtra?: React.ReactNode;
    /**
     * 面包屑额外内容的位置
     */
    breadcrumbExtraAlign?: 'left' | 'right';
    /**
     * 是否展示「返回上级」的图标按钮。
     */
    hasBackArrow?: boolean;
    /**
     * 自定义「返回上级」按钮的渲染。
     * @remarks 该函数被调用时，会传入默认的「返回上级」按钮，用户可以在这个React Element的基础上自行封装。当然，用户也可以选择返回一个与默认无关的React Element，但是要注意自己绑定`onClick`回调。
     */
    renderBackArrow?: (arrowIcon: React.ReactElement) => React.ReactElement;
    /**
     * 【默认的「返回上级」按钮】所绑定的`onClick`回调。
     * @remarks 注意，如果用户通过renderBackArrow返回了一个全新的按钮，没有渲染默认的按钮，那么用户需要自己绑定`onClick`回调。
     */
    onBackArrowClick?: (e: React.SyntheticEvent) => void | never;
    /**
     * Header的额外内容。
     */
    children?: React.ReactNode;
    /**
     * 额外内容在 Header 区域的相对位置，默认为 `left`。
     */
    childrenAlign?: 'left' | 'right';
}

/**
 * Menu组件的类型。我们通过Page的对象属性导出了其余的Menu组件。
 * @public
 */
export declare interface IMenu extends React_2.FC<{}> {
    Item: React_2.ComponentType;
    Group: React_2.ComponentType;
    SubMenu: React_2.ComponentType;
    PopupItem: React_2.ComponentType;
}

/**
 * 我们通过Page的对象属性导出了其余的相关组件。
 * 不过，还是建议直接使用import `import { Header } from '$packageName$`。
 * @public
 */
export declare type IPage = typeof Page & {
    Header: typeof Header;
    Breadcrumb: typeof Breadcrumb;
    Content: typeof Content;
    Menu: typeof Menu;
};

/**
 * @public
 */
export declare interface IPageProps {
    /**
     * Page元素的类名。
     */
    className?: string;
    /**
     * Page元素的样式。
     */
    style?: React.CSSProperties;
    /**
     * 内容。通常利用 `Page.Header` / `Page.Content` 组件来定义内容节点，以获得结构化的布局。
     */
    children?: React.ReactNode;
    /**
     * 背板的样式主题。默认是`white`。
     */
    sceneryTheme?: 'white' | 'grey';
    /**
     * Page组件利用此值来获取背板元素（一个HTMLElement对象）的引用。默认获取`document.body`作为背板元素。背板元素会被增加额外的样式，样式由{@link IPageProps.sceneryTheme | sceneryTheme属性}来决定。<br>
     * 当其值为一个字符串时，Page会在内部调用 document.querySelector(props.sceneryRef) 来获取背板元素的引用；当其为函数时，Page调用该函数拿到背板元素的引用。
     * 拿到背板元素以后，Page就根据{@link IPageProps.sceneryTheme | sceneryTheme属性}来设置elem.style.backgroundColor。
     * 由于设置背板的主题有可能导致与应用的样式冲突，你可以通过更改`sceneryRef`的值来决定将哪个元素作为背板，或者将其设置为`false`来关闭背板样式设置。
     */
    sceneryRef?: string | boolean | (() => HTMLElement);
}

/**
 * @public
 */
export declare const Menu: IMenu;

/**
 * 整个页面的容器。
 * @public
 */
export declare const Page: React.FC<IPageProps>;

/**
 * @public
 */
declare const Page_2: IPage;
export default Page_2;

export { }
