304 lines
10 KiB
TypeScript
304 lines
10 KiB
TypeScript
/// <reference types="react" />
|
|
|
|
import { ButtonProps } from '@fluentui/react-button';
|
|
import { ButtonSlots } from '@fluentui/react-button';
|
|
import { ButtonState } from '@fluentui/react-button';
|
|
import type { ComponentProps } from '@fluentui/react-utilities';
|
|
import type { ComponentState } from '@fluentui/react-utilities';
|
|
import { DividerSlots } from '@fluentui/react-divider';
|
|
import { DividerState } from '@fluentui/react-divider';
|
|
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
import * as React_2 from 'react';
|
|
import type { Slot } from '@fluentui/react-utilities';
|
|
import { SlotClassNames } from '@fluentui/react-utilities';
|
|
import { ToggleButtonProps } from '@fluentui/react-button';
|
|
import { ToggleButtonState } from '@fluentui/react-button';
|
|
|
|
/**
|
|
* Render the final JSX of Toolbar
|
|
*/
|
|
export declare const renderToolbar_unstable: (state: ToolbarState, contextValues: ToolbarContextValues) => JSX.Element;
|
|
|
|
/**
|
|
* Render the final JSX of ToolbarGroup
|
|
*/
|
|
export declare const renderToolbarGroup_unstable: (state: ToolbarGroupState) => JSX.Element;
|
|
|
|
declare type ToggableHandler = (e: React_2.MouseEvent | React_2.KeyboardEvent, name: string, value: string, checked?: boolean) => void;
|
|
|
|
/**
|
|
* Toolbar component
|
|
*/
|
|
export declare const Toolbar: ForwardRefComponent<ToolbarProps>;
|
|
|
|
/**
|
|
* ToolbarButton component is a Button to be used inside Toolbar
|
|
* which will respect toolbar props such as `size`
|
|
*/
|
|
export declare const ToolbarButton: ForwardRefComponent<ToolbarButtonProps>;
|
|
|
|
/**
|
|
* ToolbarButton Props
|
|
*/
|
|
export declare type ToolbarButtonProps = ComponentProps<ButtonSlots> & Partial<Pick<ButtonProps, 'disabled' | 'disabledFocusable'>> & {
|
|
appearance?: 'primary' | 'subtle' | 'transparent';
|
|
} & {
|
|
vertical?: boolean;
|
|
};
|
|
|
|
/**
|
|
* State used in rendering ToolbarButton
|
|
*/
|
|
export declare type ToolbarButtonState = ComponentState<Partial<ButtonSlots>> & ButtonState & Required<Pick<ToolbarButtonProps, 'vertical'>>;
|
|
|
|
declare type ToolbarCheckedValueChangeData = {
|
|
/** The items for this value that are checked */
|
|
checkedItems: string[];
|
|
/** The name of the value */
|
|
name: string;
|
|
};
|
|
|
|
declare type ToolbarCheckedValueChangeEvent = React_2.MouseEvent | React_2.KeyboardEvent;
|
|
|
|
export declare const toolbarClassNames: SlotClassNames<ToolbarSlots>;
|
|
|
|
export declare type ToolbarContextValue = Pick<ToolbarState, 'size' | 'vertical' | 'checkedValues'> & {
|
|
handleToggleButton?: ToggableHandler;
|
|
handleRadio?: ToggableHandler;
|
|
};
|
|
|
|
export declare type ToolbarContextValues = {
|
|
toolbar: ToolbarContextValue;
|
|
};
|
|
|
|
/**
|
|
* ToolbarDivider component
|
|
*/
|
|
export declare const ToolbarDivider: ForwardRefComponent<ToolbarDividerProps>;
|
|
|
|
/**
|
|
* ToolbarDivider Props
|
|
*/
|
|
export declare type ToolbarDividerProps = ComponentProps<Partial<DividerSlots>> & {
|
|
/**
|
|
* A divider can be horizontal or vertical (default).
|
|
*
|
|
* @default true
|
|
*/
|
|
vertical?: boolean;
|
|
};
|
|
|
|
/**
|
|
* State used in rendering ToolbarDivider
|
|
*/
|
|
export declare type ToolbarDividerState = ComponentState<Partial<DividerSlots>> & DividerState;
|
|
|
|
/**
|
|
* ToolbarGroup component is a Button to be used inside Toolbar
|
|
* which will respect toolbar props such as `size`
|
|
*/
|
|
export declare const ToolbarGroup: ForwardRefComponent<ToolbarGroupProps>;
|
|
|
|
export declare const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots>;
|
|
|
|
/**
|
|
* ToolbarButton Props
|
|
*/
|
|
export declare type ToolbarGroupProps = ComponentProps<ToolbarGroupSlots>;
|
|
|
|
declare type ToolbarGroupSlots = {
|
|
root: Slot<'div'>;
|
|
};
|
|
|
|
/**
|
|
* State used in rendering ToolbarButton
|
|
*/
|
|
export declare type ToolbarGroupState = ComponentState<ToolbarGroupSlots>;
|
|
|
|
/**
|
|
* Toolbar Props
|
|
*/
|
|
export declare type ToolbarProps = ComponentProps<ToolbarSlots> & {
|
|
/**
|
|
* Toolbar can have small or medium size
|
|
*
|
|
* @default medium
|
|
*/
|
|
size?: 'small' | 'medium' | 'large';
|
|
/**
|
|
* Toolbar can be vertical styled
|
|
* @default false
|
|
*/
|
|
vertical?: boolean;
|
|
/**
|
|
* Map of all checked values
|
|
*/
|
|
checkedValues?: Record<string, string[]>;
|
|
/**
|
|
* Default values to be checked on mount
|
|
*/
|
|
defaultCheckedValues?: Record<string, string[]>;
|
|
/**
|
|
* Callback when checked items change for value with a name
|
|
*
|
|
* @param event - React's original SyntheticEvent
|
|
* @param data - A data object with relevant information
|
|
*/
|
|
onCheckedValueChange?: (e: ToolbarCheckedValueChangeEvent, data: ToolbarCheckedValueChangeData) => void;
|
|
};
|
|
|
|
/**
|
|
* ToolbarRadioButton component
|
|
*/
|
|
export declare const ToolbarRadioButton: ForwardRefComponent<ToolbarRadioButtonProps>;
|
|
|
|
/**
|
|
* ToolbarRadioButton Props
|
|
*/
|
|
export declare type ToolbarRadioButtonProps = ComponentProps<ButtonSlots> & Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {
|
|
appearance?: 'primary' | 'subtle' | 'transparent';
|
|
name: string;
|
|
value: string;
|
|
};
|
|
|
|
/**
|
|
* State used in rendering ToolbarRadioButton
|
|
*/
|
|
export declare type ToolbarRadioButtonState = ComponentState<Partial<ButtonSlots>> & ToggleButtonState & Required<Pick<ToggleButtonProps, 'checked'>> & Pick<ToolbarRadioButtonProps, 'name' | 'value'>;
|
|
|
|
/**
|
|
* ToolbarRadioGroup component is a Button to be used inside Toolbar
|
|
* which will respect toolbar props such as `size`
|
|
*/
|
|
export declare const ToolbarRadioGroup: ForwardRefComponent<ToolbarRadioGroupProps>;
|
|
|
|
/**
|
|
* ToolbarButton Props
|
|
*/
|
|
export declare type ToolbarRadioGroupProps = ComponentProps<ToolbarRadioGroupSlots>;
|
|
|
|
declare type ToolbarRadioGroupSlots = {
|
|
root: Slot<'div'>;
|
|
};
|
|
|
|
/**
|
|
* State used in rendering ToolbarButton
|
|
*/
|
|
export declare type ToolbarRadioGroupState = ComponentState<ToolbarRadioGroupSlots>;
|
|
|
|
export declare type ToolbarSlots = {
|
|
root: Slot<'div'>;
|
|
};
|
|
|
|
/**
|
|
* State used in rendering Toolbar
|
|
*/
|
|
export declare type ToolbarState = ComponentState<ToolbarSlots> & Required<Pick<ToolbarProps, 'size' | 'checkedValues' | 'vertical'>> & Pick<ToolbarProps, 'defaultCheckedValues' | 'onCheckedValueChange'> & {
|
|
handleToggleButton: ToggableHandler;
|
|
handleRadio: ToggableHandler;
|
|
};
|
|
|
|
/**
|
|
* ToolbarToggleButton component
|
|
*/
|
|
export declare const ToolbarToggleButton: ForwardRefComponent<ToolbarToggleButtonProps>;
|
|
|
|
/**
|
|
* ToolbarToggleButton Props
|
|
*/
|
|
export declare type ToolbarToggleButtonProps = ComponentProps<ButtonSlots> & Partial<Pick<ToggleButtonProps, 'disabled' | 'disabledFocusable' | 'size'>> & {
|
|
appearance?: 'primary' | 'subtle' | 'transparent';
|
|
name: string;
|
|
value: string;
|
|
};
|
|
|
|
/**
|
|
* State used in rendering ToolbarToggleButton
|
|
*/
|
|
export declare type ToolbarToggleButtonState = ComponentState<Partial<ButtonSlots>> & ToggleButtonState & Required<Pick<ToggleButtonProps, 'checked'>> & Pick<ToolbarToggleButtonProps, 'name' | 'value'>;
|
|
|
|
/**
|
|
* Create the state required to render Toolbar.
|
|
*
|
|
* The returned state can be modified with hooks such as useToolbarStyles_unstable,
|
|
* before being passed to renderToolbar_unstable.
|
|
*
|
|
* @param props - props from this instance of Toolbar
|
|
* @param ref - reference to root HTMLElement of Toolbar
|
|
*/
|
|
export declare const useToolbar_unstable: (props: ToolbarProps, ref: React_2.Ref<HTMLElement>) => ToolbarState;
|
|
|
|
/**
|
|
* Given user props, defines default props for the Button, calls useButtonState and useChecked, and returns
|
|
* processed state.
|
|
* @param props - User provided props to the Button component.
|
|
* @param ref - User provided ref to be passed to the Button component.
|
|
*/
|
|
export declare const useToolbarButton_unstable: (props: ToolbarButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToolbarButtonState;
|
|
|
|
/**
|
|
* Apply styling to the ToolbarButton slots based on the state
|
|
*/
|
|
export declare const useToolbarButtonStyles_unstable: (state: ToolbarButtonState) => void;
|
|
|
|
/**
|
|
* Create the state required to render ToolbarDivider.
|
|
*
|
|
* The returned state can be modified with hooks such as useToolbarDividerStyles_unstable,
|
|
* before being passed to renderToolbar_unstable.
|
|
*
|
|
* @param props - props from this instance of ToolbarDivider
|
|
* @param ref - reference to root HTMLElement of ToolbarDivider
|
|
*/
|
|
export declare const useToolbarDivider_unstable: (props: ToolbarDividerProps, ref: React_2.Ref<HTMLElement>) => ToolbarDividerState;
|
|
|
|
/**
|
|
* Apply styling to the ToolbarDivider slots based on the state
|
|
*/
|
|
export declare const useToolbarDividerStyles_unstable: (state: ToolbarDividerState) => ToolbarDividerState;
|
|
|
|
/**
|
|
* Given user props, defines default props for the Group
|
|
* @param props - User provided props to the Group component.
|
|
* @param ref - User provided ref to be passed to the Group component.
|
|
*/
|
|
export declare const useToolbarGroup_unstable: (props: ToolbarGroupProps, ref: React_2.Ref<HTMLDivElement>) => ToolbarGroupState;
|
|
|
|
/**
|
|
* Apply styling to the Toolbar slots based on the state
|
|
*/
|
|
export declare const useToolbarGroupStyles_unstable: (state: ToolbarGroupState) => ToolbarGroupState;
|
|
|
|
/**
|
|
* Given user props, defines default props for the RadioButton, calls useButtonState and useChecked, and returns
|
|
* processed state.
|
|
* @param props - User provided props to the RadioButton component.
|
|
* @param ref - User provided ref to be passed to the RadioButton component.
|
|
*/
|
|
export declare const useToolbarRadioButton_unstable: (props: ToolbarRadioButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToolbarRadioButtonState;
|
|
|
|
/**
|
|
* Apply styling to the ToolbarRadioButton slots based on the state
|
|
*/
|
|
export declare const useToolbarRadioButtonStyles_unstable: (state: ToolbarRadioButtonState) => ToolbarRadioButtonState;
|
|
|
|
/**
|
|
* Apply styling to the Toolbar slots based on the state
|
|
*/
|
|
export declare const useToolbarStyles_unstable: (state: ToolbarState) => ToolbarState;
|
|
|
|
/**
|
|
* Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
|
|
* processed state.
|
|
* @param props - User provided props to the ToggleButton component.
|
|
* @param ref - User provided ref to be passed to the ToggleButton component.
|
|
*/
|
|
export declare const useToolbarToggleButton_unstable: (props: ToolbarToggleButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToolbarToggleButtonState;
|
|
|
|
/**
|
|
* Apply styling to the ToolbarToggleButton slots based on the state
|
|
*/
|
|
export declare const useToolbarToggleButtonStyles_unstable: (state: ToolbarToggleButtonState) => ToolbarToggleButtonState;
|
|
|
|
export { }
|