///
import { IObservableValue } from '../../Core/Observable';
import { IButtonProps } from '../../Button';
import { IFocusGroupProps } from '../../FocusGroup';
import { IMenuButtonProps, IMenuItem } from '../../Menu';
import { ITooltipProps } from '../../TooltipEx';
import { IFilter } from '../../Utilities/Filter';
export interface IHeaderCommandBar {
}
export interface IHeaderCommandBarItem extends IMenuItem {
/**
* Adds aria-checked to the element.
*/
ariaChecked?: boolean;
/**
* Adds aria-controls to the element.
*
* NOTE: Give the base Id in this case, NOT the getSafeId.
*/
ariaControls?: string;
/**
* Adds aria-describedby to the element.
*
* NOTE: Give the base Id in this case, NOT the getSafeId.
*/
ariaDescribedBy?: string;
/**
* Adds aria-expanded to the element.
*/
ariaExpanded?: boolean;
/**
* Adds aria-haspopup to the element.
*/
ariaHasPopup?: boolean;
/**
* An aria label to add to the command bar item.
*/
ariaLabel?: string;
/**
* Adds aria-posinset to the element.
*/
ariaPosInSet?: number;
/**
* Adds aria-roledescription to the element.
*/
ariaRoleDescription?: string;
/**
* Adds aria-pressed to the element.
*/
ariaPressed?: boolean;
/**
* Adds aria-selected to the element.
*/
ariaSelected?: boolean;
/**
* Adds aria-setsize to the element.
*/
ariaSetSize?: number;
/**
* Indicates that the dropdown chevron should not be shown.
* Only applies to items that have subMenuProps.
*/
hideDropdownIcon?: boolean;
/**
* A value of true means the item will always be rendered as
* a button directly in the header.
* A value of false means the item will always be rendered in
* an overflow button.
* Undefined means that the HeaderCommandBar will determine
* where the item is rendered.
*/
important?: boolean;
/**
* Determines if we render as a primary button or not
*/
isPrimary?: boolean;
/**
* The items will be sorted by rank if rank is present.
*/
rank?: number;
/**
* A custom renderer for the command bar item when rendered in the header
*/
renderButton?(props: IButtonProps | IMenuButtonProps): JSX.Element;
/**
* Override the default "menuItem" role for the item
*/
role?: string;
/**
* Uses a subtle button when rendering this item - only applies
* when the item is not in overflow
*/
subtle?: boolean;
/**
* Optional tooltip props to display
*/
tooltipProps?: ITooltipProps;
}
export interface IHeaderCommandBarProps {
/**
* How many buttons to show if there is room. The rest will be sent to overflow if they are not marked as important.
* @default 3
*/
buttonCount?: number;
/**
* Additional classes to be applied to component
*/
className?: string;
/**
* Setting this property enables experimental layout computations meant to reduce flickering. This is a temporary property that will be removed in a future version and not supported long-term
*/
reduceFlickering?: boolean;
/**
* Items to display in the far-right Command Bar
* Should influence page-wide state
*/
items: IHeaderCommandBarItem[];
/**
* Optional id to apply to the overflow more button.
*/
moreButtonId?: string;
/**
* Optional CSS className to apply to the callout rendered by overflow menu button.
*/
overflowClassName?: string;
/**
* Optional boolean to keep icons for header bar but expand to have text for overflow menu
*/
useAriaLabelForOverflow?: boolean;
/**
* Optional CSS className to apply to the overflow menu
*/
moreButtonMenuClassName?: string;
}
export interface ICustomHeaderCommandBarProps {
/**
* Additional classes to be applied to component
*/
className?: string;
/**
* Focus group props to use in the focus zone that wraps the ButtonGroup
*/
focusGroupProps?: IFocusGroupProps;
/**
* Whether or not the last child is an icon button - will adjust right padding
*/
lastItemIsIconButton?: boolean;
/**
* Optional role to apply to the div containing the command bar, e.g. "menubar"
*/
role?: string;
}
export interface IHeaderCommandBarWithFilterProps extends IHeaderCommandBarProps {
/**
* A filter object to listen to changes on. When there are changes, the filter icon
* will be displayed as filled.
*/
filter: IFilter;
/**
* The current state of whether the filter is visible or hidden. The value is toggled
* by the onClick on the item.
*/
filterToggled: IObservableValue;
}