///
import { IReadonlyObservableArray } from '../../Core/Observable';
import { IButtonProps } from '../../Button';
import { IHeaderCommandBarItem } from '../../HeaderCommandBar';
import { IIconProps } from '../../Icon';
import { ITooltipProps } from '../../TooltipEx';
export interface IHeader {
}
export declare enum TitleSize {
Medium = 0,
Large = 1,
Small = 2
}
/**
* Item determining the new look of a Command Bar item for a certain breakpoint.
*/
export interface IHeaderBreakpointCommandItem {
/**
* Icon of the Command Bar item to be displayed on the certain breakpoint.
* Specify undefined to make icon hidden.
*/
iconProps?: IIconProps;
/**
* Id of the Command Bar item specified for the Header.
*/
id: string;
/**
* Importance of the Command Bar item to be displayed on the certain breakpoint.
* Not specifying important will let Header itself decide when to display items
* in the overflow area.
*
* If full control is needed to display items in the overflow area, specify important
* for each Command Bar item no matter they change between breakpoints or not.
*/
important?: boolean;
/**
* Text of the Command Bar item to be displayed on the certain breakpoint.
* Specify undefined to make text hidden.
*/
text?: string;
/**
* Optional tooltip props to display
*/
tooltipProps?: ITooltipProps;
}
/**
* An IHeaderBreakpoint is used to define the visibility of the header items
* when the specified breakpoint is reached.
*/
export interface IHeaderBreakpoint {
/**
* The header is defined with series of breakpoints. Each of the breakpoints
* will have a mappings for the specified Command Bar items.
*
* If a Command Bar item is not changed for any of the breakpoints, then it is not
* necessary to include it in the commandBarItems list. However, all the properties
* (id, text, iconProps, important) need to be specified for a Command Bar item, if
* it changes between breakpoints to have correct visibility for that item.
*/
breakpoint: number;
/**
* List of Command Bar items, which will have a change for this particular breakpoint.
* Id property needs to match the id from the commandBarItems of the Header in order to
* get a Command Bar item's visibility updated for a certain breakpoint.
*/
commandBarItems?: IHeaderBreakpointCommandItem[];
}
export interface ICustomHeaderProps {
/**
* An optional className to pass to the root Header element
*/
className?: string;
/**
* Whether or not to show a separator after the Header
* @default false
*/
separator?: boolean;
}
export interface IHeaderDescriptionProps {
/**
* An optional className to pass to the description element
*/
className?: string;
/**
* An optional id used for the descriptions's text. Can be used in conjunction with aria-describedby.
* getSafeId() will be called on this value.
*/
id?: string;
}
export interface IHeaderBackButtonProps {
/**
* If these props are provided, the Header will draw a back button before the
* header's title. By default this will use a subtle button with the "Back" icon,
* but these props can override those choices.
*/
buttonProps: IButtonProps;
}
export interface IHeaderIconProps {
/**
* An optional className to pass to the icon element
*/
className?: string;
/**
* Props to render for the icon.
*/
iconProps: IIconProps;
/**
* Applies appropriate font size and padding for the icon.
*/
titleSize?: TitleSize;
}
export interface IHeaderTitleProps {
/**
* An optional aria level to pass to the title element
*/
ariaLevel?: number;
/**
* An optional className to pass to the title element
*/
className?: string;
/**
* An optional id used for the title's text. Can be used in conjunction with aria-labelledby.
* getSafeId() will be called on this value.
*/
id?: string;
/**
* Applies appropriate font size and padding for text.
*/
titleSize?: TitleSize;
}
export interface IHeaderTitleAreaProps {
/**
* An optional className to pass to the title area element
*/
className?: string;
}
export interface IHeaderTitleRowProps {
/**
* An optional className to pass to the title row element
*/
className?: string;
}
export interface IHeaderProps extends ICustomHeaderProps {
/**
* If these props are provided, the Header will draw a back button before the
* header's title. By default this will use a subtle button with the "Back" icon,
* but these props can override those choices.
*/
backButtonProps?: IButtonProps;
/**
* How many buttons to show in the HeaderCommandBar if there is room. The rest will be sent to overflow if they are not marked as important.
*/
buttonCount?: number;
/**
* Optional className to pass to the command bar rendered in the Header.
*/
commandBarClassName?: string;
/**
* Optional className to pass to the Header's content element.
*/
contentClassName?: string;
/**
* Items to display in the far-right Command Bar
* Should influence page-wide state
*/
commandBarItems?: IReadonlyObservableArray | IHeaderCommandBarItem[];
/**
* Optional id to assign to the more button within the HeaderCommandBar.
*/
commandBarMoreButtonId?: string;
/**
* Secondary text to display in the header, below the title
*/
description?: React.ReactNode;
/**
* Optional className to pass to the description in the Header
*/
descriptionClassName?: string;
/**
* An optional id used for the descriptions's text. Can be used in conjunction with aria-describedby.
* getSafeId() will be called on this value.
*/
descriptionId?: string;
/**
* A header can be defined with a set of breakpoints. These breakpoints will be used to control
* the visibility of the Command Bar items as the space available to the header changes.
*/
headerBreakpoints?: IHeaderBreakpoint[];
/**
* Primary text to display in the header
*/
title?: React.ReactNode;
/**
* Optional aria level to pass to the title in the Header
*/
titleAriaLevel?: number;
/**
* Optional className to pass to the title in the Header
*/
titleClassName?: string;
/**
* Props to render the large Title Icon to the left of the Title and Description elements
*/
titleIconProps?: IIconProps;
/**
* An optional id used for the title's text. Can be used in conjunction with aria-labelledby.
* getSafeId() will be called on this value after it is passed to the
*/
titleId?: string;
/**
* Applies appropriate font size and padding for title text.
*/
titleSize?: TitleSize;
/**
* Optional boolean to keep icons for header bar but expand to have text for overflow menu
*/
useAriaLabelForOverflow?: boolean;
}