UNPKG

3.08 kBTypeScriptView Raw
1import * as React from 'react';
2import type { IStyle, ITheme } from '../../Styling';
3import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities';
4export interface IButtonGrid {
5}
6export interface IButtonGridProps extends React.TableHTMLAttributes<HTMLTableElement>, React.RefAttributes<HTMLElement> {
7 /**
8 * Gets the component ref.
9 */
10 componentRef?: IRefObject<IButtonGrid>;
11 /**
12 * Items to display in a ButtonGrid with the specified number of columns
13 */
14 items: any[];
15 /**
16 * The number of columns
17 */
18 columnCount: number;
19 /**
20 * Custom renderer for the individual items
21 */
22 onRenderItem: (item: any, index: number) => JSX.Element;
23 /**
24 * Whether focus should cycle back to the beginning once the user navigates past the end (and vice versa).
25 * Only relevant if `doNotContainWithinFocusZone` is not true.
26 */
27 shouldFocusCircularNavigate?: boolean;
28 /**
29 * If false (the default), the ButtonGrid is contained inside a FocusZone.
30 * If true, a FocusZone is not used.
31 * @default false
32 */
33 doNotContainWithinFocusZone?: boolean;
34 /**
35 * Class name for the FocusZone container for the ButtonGrid.
36 * @deprecated Use `styles.focusedContainer` to define styling for the focus zone container
37 */
38 containerClassName?: string;
39 /**
40 * Handler for when focus leaves the ButtonGrid.
41 */
42 onBlur?: () => void;
43 /**
44 * If true, uses radiogroup semantics for the ButtonGrid.
45 * This should be set to true for single-row grids, for two reasons:
46 * 1. Radios are a more simple and understandable control,
47 * and a better fit for a single-dimensional selection control
48 * 2. Multiple browsers use heuristics to strip table and grid roles from single-row tables with no column headers.
49 */
50 isSemanticRadio?: boolean;
51 /**
52 * Position this ButtonGrid is in the parent set (index in a parent menu, for example)
53 */
54 ariaPosInSet?: number;
55 /**
56 * @deprecated Use `ariaPosInSet`
57 */
58 positionInSet?: number;
59 /**
60 * Size of the parent set (size of parent menu, for example)
61 */
62 ariaSetSize?: number;
63 /**
64 * @deprecated Use `ariaSetSize`
65 */
66 setSize?: number;
67 /**
68 * Theme to apply to the component.
69 */
70 theme?: ITheme;
71 /**
72 * Optional styles for the component.
73 */
74 styles?: IStyleFunctionOrObject<IButtonGridStyleProps, IButtonGridStyles>;
75}
76/**
77 * Properties required to build the styles for the ButtonGrid component.
78 */
79export interface IButtonGridStyleProps {
80 /**
81 * Theme to apply to the ButtonGrid
82 */
83 theme: ITheme;
84}
85/**
86 * Styles for the ButtonGrid Component.
87 */
88export interface IButtonGridStyles {
89 /**
90 * Style for the table container of a ButtonGrid.
91 */
92 root: IStyle;
93 /**
94 * Style for the table cells of the ButtonGrid.
95 */
96 tableCell: IStyle;
97 /**
98 * Style for the FocusZone container for the ButtonGrid.
99 */
100 focusedContainer?: IStyle;
101}