1 | import * as React from 'react';
|
2 | import type { IStyle, ITheme } from '../../Styling';
|
3 | import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities';
|
4 | export interface IButtonGrid {
|
5 | }
|
6 | export 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 | */
|
79 | export interface IButtonGridStyleProps {
|
80 | /**
|
81 | * Theme to apply to the ButtonGrid
|
82 | */
|
83 | theme: ITheme;
|
84 | }
|
85 | /**
|
86 | * Styles for the ButtonGrid Component.
|
87 | */
|
88 | export 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 | }
|