@fluentui/react-northstar
Version:
A themable React component library.
84 lines (83 loc) • 3.87 kB
TypeScript
import { Accessibility, SplitButtonBehaviorProps } from '@fluentui/accessibility';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { ComponentEventHandler, ShorthandValue, ShorthandCollection, FluentComponentStaticProps } from '../../types';
import { UIComponentProps, ChildrenComponentProps, ContentComponentProps, SizeValue } from '../../utils';
import { SplitButtonToggle, SplitButtonToggleProps } from './SplitButtonToggle';
import { ButtonProps } from '../Button/Button';
import { MenuProps } from '../Menu/Menu';
import { MenuItemProps } from '../Menu/MenuItem';
import { PositioningProps } from '../../utils/positioner/types';
export interface SplitButtonProps extends UIComponentProps, ChildrenComponentProps, ContentComponentProps, PositioningProps {
/**
* Accessibility behavior if overridden by the user.
*/
accessibility?: Accessibility<SplitButtonBehaviorProps>;
/** Shorthand for the main button. */
button?: ShorthandValue<ButtonProps>;
/** Initial value for 'open'. */
defaultOpen?: boolean;
/** A split button can be disabled. */
disabled?: boolean;
/** Shorthand for the menu. */
menu?: ShorthandValue<MenuProps> | ShorthandCollection<MenuItemProps>;
/**
* Called after user's click on the main button.
*
* @param event - React's original SyntheticEvent.
* @param data - All props.
*/
onMainButtonClick?: ComponentEventHandler<ButtonProps>;
/**
* Called after user's click on a menu item.
*
* @param event - React's original SyntheticEvent.
* @param data - All props.
*/
onMenuItemClick?: ComponentEventHandler<MenuItemProps>;
/**
* Event for request to change 'open' value.
* @param event - React's original SyntheticEvent.
* @param data - All props and proposed value.
*/
onOpenChange?: ComponentEventHandler<SplitButtonProps>;
/** Defines whether menu is displayed. */
open?: boolean;
/** A split button can be formatted to show different levels of emphasis. */
primary?: boolean;
/** A split button can be formatted to show different levels of emphasis. */
secondary?: boolean;
/** A split button can be sized */
size?: SizeValue;
/** A button can be elevated or flat. */
flat?: boolean;
/** Shorthand for the toggle button. */
toggleButton?: ShorthandValue<SplitButtonToggleProps>;
}
export declare const splitButtonClassName = "ui-splitbutton";
export declare type SplitButtonStylesProps = Required<Pick<SplitButtonProps, 'size'>> & {
flat: boolean;
isFromKeyboard: boolean;
};
/**
* A SplitButton enables users to take one of several related actions, one being dominant and rest being displayed in a menu.
*/
export declare const SplitButton: (<TExtendedElementType extends React.ElementType<any> = "div">(props: React.RefAttributes<HTMLDivElement> & Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof SplitButtonProps> & {
as?: TExtendedElementType;
} & SplitButtonProps) => JSX.Element) & {
propTypes?: React.WeakValidationMap<SplitButtonProps> & {
as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
};
contextTypes?: PropTypes.ValidationMap<any>;
defaultProps?: Partial<SplitButtonProps & {
as: "div";
}>;
displayName?: string;
readonly __PRIVATE_PROPS?: React.RefAttributes<HTMLDivElement> & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
}, "as" | keyof SplitButtonProps> & {
as?: "div";
} & SplitButtonProps;
} & FluentComponentStaticProps<SplitButtonProps> & {
Toggle: typeof SplitButtonToggle;
};