1 | import * as React from 'react';
|
2 | import {StyletronComponent} from 'styletron-react';
|
3 | import {Override} from '../overrides';
|
4 |
|
5 | export interface KEY_STRINGS {
|
6 | ArrowUp: 'ArrowUp';
|
7 | ArrowDown: 'ArrowDown';
|
8 | ArrowLeft: 'ArrowLeft';
|
9 | ArrowRight: 'ArrowRight';
|
10 | Enter: 'Enter';
|
11 | Space: ' ';
|
12 | Escape: 'Escape';
|
13 | Backspace: 'Backspace';
|
14 | }
|
15 | export interface STATE_CHANGE_TYPES {
|
16 | click: 'click';
|
17 | moveUp: 'moveUp';
|
18 | moveDown: 'moveDown';
|
19 | mouseEnter: 'mouseEnter';
|
20 | focus: 'focus';
|
21 | reset: 'reset';
|
22 | character: 'character';
|
23 | enter: 'enter';
|
24 | }
|
25 |
|
26 | export interface OPTION_LIST_SIZE {
|
27 | default: 'default';
|
28 | compact: 'compact';
|
29 | }
|
30 |
|
31 | export type BaseMenuPropsT = {
|
32 | renderAll?: boolean;
|
33 | };
|
34 |
|
35 | export interface MenuProps extends BaseMenuPropsT {
|
36 | size?: keyof OPTION_LIST_SIZE;
|
37 | overrides?: {
|
38 | EmptyState?: Override<any>;
|
39 | List?: Override<any>;
|
40 | Option?: Override<any>;
|
41 | ListItem?: Override<any>;
|
42 | };
|
43 | }
|
44 |
|
45 | export type ItemT = any;
|
46 | export type ArrayItemsT = ItemT[];
|
47 | export type GroupedItemsT = {
|
48 | __ungrouped: ArrayItemsT;
|
49 | [key: string]: ArrayItemsT;
|
50 | };
|
51 | export type ItemsT = ArrayItemsT | GroupedItemsT;
|
52 |
|
53 | export type StatefulMenuProps = StatefulContainerProps & MenuProps;
|
54 | export class StatefulMenu extends React.PureComponent<StatefulMenuProps> {}
|
55 |
|
56 | export interface RenderItemProps {
|
57 | disabled?: boolean;
|
58 | ref?: React.Ref<any>;
|
59 | id?: string;
|
60 | isFocused?: boolean;
|
61 | isHighlighted?: boolean;
|
62 | resetMenu?: () => any;
|
63 | }
|
64 |
|
65 | export type OnItemSelect = (args: {
|
66 | item: any;
|
67 | event?: React.SyntheticEvent<HTMLElement> | KeyboardEvent;
|
68 | }) => any;
|
69 |
|
70 | export type StateReducer = (
|
71 | changeType: STATE_CHANGE_TYPES[keyof STATE_CHANGE_TYPES],
|
72 | changes: StatefulContainerState,
|
73 | currentState: StatefulContainerState,
|
74 | ) => StatefulContainerState;
|
75 |
|
76 | export type GetRequiredItemProps = (
|
77 | item: any,
|
78 | index: number,
|
79 | ) => RenderItemProps;
|
80 |
|
81 | export type RenderProps = StatefulContainerState & {
|
82 | items: ItemsT;
|
83 | getRequiredItemProps: GetRequiredItemProps;
|
84 | };
|
85 |
|
86 | export interface StatefulContainerProps {
|
87 | items: ItemsT;
|
88 | initialState?: StatefulContainerState;
|
89 | stateReducer?: StateReducer;
|
90 | getRequiredItemProps?: GetRequiredItemProps;
|
91 | onActiveDescendantChange?: (id?: string) => void;
|
92 | onItemSelect?: OnItemSelect;
|
93 | rootRef?: React.Ref<any>;
|
94 | keyboardControlNode?: React.Ref<any>;
|
95 | typeAhead?: boolean;
|
96 | children?: (args: RenderProps) => React.ReactNode;
|
97 | addMenuToNesting?: (ref: React.Ref<HTMLElement>) => void;
|
98 | removeMenuFromNesting?: (ref: React.Ref<HTMLElement>) => void;
|
99 | getParentMenu?: (ref: React.Ref<HTMLElement>) => void;
|
100 | getChildMenu?: (ref: React.Ref<HTMLElement>) => void;
|
101 | }
|
102 | export interface StatefulContainerState {
|
103 | activedescendantId?: string;
|
104 | highlightedIndex: number;
|
105 | isFocused: boolean;
|
106 | }
|
107 | export class StatefulContainer extends React.Component<
|
108 | StatefulContainerProps,
|
109 | StatefulContainerState
|
110 | > {}
|
111 |
|
112 | export interface OptionListProps extends BaseMenuPropsT {
|
113 | item: any;
|
114 | getItemLabel: (item: any) => React.ReactNode;
|
115 | getChildMenu?: (item: any) => React.ReactNode;
|
116 | onMouseEnter?: (event: MouseEvent) => any;
|
117 | size?: OPTION_LIST_SIZE[keyof OPTION_LIST_SIZE];
|
118 | overrides?: {
|
119 | ListItem?: Override<any>;
|
120 | ChildMenuPopover?: Override<any>;
|
121 | };
|
122 | renderHrefAsAnchor?: boolean;
|
123 | resetMenu?: () => void;
|
124 | $isHighlighted?: boolean;
|
125 | $isFocused?: boolean;
|
126 | }
|
127 | export const OptionList: React.FC<OptionListProps>;
|
128 |
|
129 | export interface OptionProfileProps extends BaseMenuPropsT {
|
130 | item: any;
|
131 | getChildMenu?: (item: any) => React.ReactNode;
|
132 | getProfileItemLabels: (
|
133 | item: any,
|
134 | ) => {title?: string; subtitle?: string; body?: string};
|
135 | getProfileItemImg: (item: any) => string | React.ComponentType<any>;
|
136 | getProfileItemImgText: (item: any) => string;
|
137 | overrides?: {
|
138 | ListItemProfile?: Override<any>;
|
139 | ProfileImgContainer?: Override<any>;
|
140 | ProfileImg?: Override<any>;
|
141 | ProfileLabelsContainer?: Override<any>;
|
142 | ProfileTitle?: Override<any>;
|
143 | ProfileSubtitle?: Override<any>;
|
144 | ProfileBody?: Override<any>;
|
145 | ChildMenuPopover?: Override<any>;
|
146 | };
|
147 | resetMenu?: () => void;
|
148 | $isHighlighted?: boolean;
|
149 | }
|
150 | export const OptionProfile: React.FC<OptionProfileProps>;
|
151 |
|
152 | export interface SharedStatelessProps {
|
153 | activedescendantId?: string;
|
154 | getRequiredItemProps?: (item: any, index: number) => RenderItemProps;
|
155 | highlightedIndex?: number;
|
156 | items: ItemsT;
|
157 | isFocused?: boolean;
|
158 | noResultsMsg?: React.ReactNode;
|
159 | onBlur?: (event: React.FocusEvent<HTMLElement>) => any;
|
160 | onFocus?: (event: React.FocusEvent<HTMLElement>) => any;
|
161 | rootRef?: React.Ref<any>;
|
162 | focusMenu?: (event: FocusEvent | MouseEvent | KeyboardEvent) => any;
|
163 | unfocusMenu?: () => any;
|
164 | handleKeyDown?: (event: KeyboardEvent) => any;
|
165 | }
|
166 |
|
167 | export type StatelessMenuProps = SharedStatelessProps & MenuProps;
|
168 | export const Menu: React.FC<StatelessMenuProps>;
|
169 |
|
170 | export interface NestedMenuProps {
|
171 | children: React.ReactNode;
|
172 | }
|
173 | export interface NestedMenuState {
|
174 | menus: Array<React.Ref<HTMLElement>>;
|
175 | }
|
176 | export class NestedMenus extends React.Component<
|
177 | NestedMenuProps,
|
178 | NestedMenuState
|
179 | > {
|
180 | addMenuToNesting(ref: React.Ref<HTMLElement>): void;
|
181 | removeMenuFromNesting(ref: React.Ref<HTMLElement>): void;
|
182 | findMenuIndexByRef(ref: React.Ref<HTMLElement>): number;
|
183 | getParentMenu(ref: React.Ref<HTMLElement>): React.Ref<HTMLElement>;
|
184 | getChildMenu(ref: React.Ref<HTMLElement>): React.Ref<HTMLElement>;
|
185 | }
|
186 |
|
187 | export const StyledEmptyState: StyletronComponent<any>;
|
188 | export const StyledList: StyletronComponent<any>;
|
189 | export const StyledListItem: StyletronComponent<any>;
|
190 | export const StyledListItemProfile: StyletronComponent<any>;
|
191 | export const StyledProfileImgContainer: StyletronComponent<any>;
|
192 | export const StyledProfileImg: StyletronComponent<any>;
|
193 | export const StyledProfileLabelsContainer: StyletronComponent<any>;
|
194 | export const StyledProfileTitle: StyletronComponent<any>;
|
195 | export const StyledProfileSubtitle: StyletronComponent<any>;
|
196 | export const StyledProfileBody: StyletronComponent<any>;
|
197 |
|
198 | export const KEY_STRINGS: KEY_STRINGS;
|
199 | export const STATE_CHANGE_TYPES: STATE_CHANGE_TYPES;
|
200 | export const OPTION_LIST_SIZE: OPTION_LIST_SIZE;
|