UNPKG

9.19 kBTypeScriptView Raw
1import * as React from 'react';
2import { SelectOptionObject } from './SelectOption';
3import { SelectPosition } from './selectConstants';
4import { ChipGroupProps } from '../ChipGroup';
5import { OUIAProps, PickOptional } from '../../helpers';
6import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper';
7export interface SelectViewMoreObject {
8 /** View more text */
9 text: string;
10 /** Callback for when the view more button is clicked */
11 onClick: (event: React.MouseEvent | React.ChangeEvent) => void;
12}
13export interface SelectProps extends ToggleMenuBaseProps, Omit<React.HTMLProps<HTMLDivElement>, 'onSelect' | 'ref' | 'checked' | 'selected'>, OUIAProps {
14 /** Content rendered inside the Select. Must be React.ReactElement<SelectGroupProps>[] */
15 children?: React.ReactElement[];
16 /** Classes applied to the root of the Select */
17 className?: string;
18 /** Indicates where menu will be aligned horizontally */
19 position?: SelectPosition | 'right' | 'left';
20 /** Flag specifying which direction the Select menu expands */
21 direction?: 'up' | 'down';
22 /** Flag to indicate if select is open */
23 isOpen?: boolean;
24 /** Flag to indicate if select options are grouped */
25 isGrouped?: boolean;
26 /** Display the toggle with no border or background */
27 isPlain?: boolean;
28 /** Flag to indicate if select is disabled */
29 isDisabled?: boolean;
30 /** Flag to indicate if the typeahead select allows new items */
31 isCreatable?: boolean;
32 /** Flag indicating if placeholder styles should be applied */
33 hasPlaceholderStyle?: boolean;
34 /** @beta Flag indicating if the creatable option should set its value as a SelectOptionObject */
35 isCreateSelectOptionObject?: boolean;
36 /** Value to indicate if the select is modified to show that validation state.
37 * If set to success, select will be modified to indicate valid state.
38 * If set to error, select will be modified to indicate error state.
39 * If set to warning, select will be modified to indicate warning state.
40 */
41 validated?: 'success' | 'warning' | 'error' | 'default';
42 /** @beta Loading variant to display either the spinner or the view more text button */
43 loadingVariant?: 'spinner' | SelectViewMoreObject;
44 /** Text displayed in typeahead select to prompt the user to create an item */
45 createText?: string;
46 /** Title text of Select */
47 placeholderText?: string | React.ReactNode;
48 /** Text to display in typeahead select when no results are found */
49 noResultsFoundText?: string;
50 /** Array of selected items for multi select variants. */
51 selections?: string | SelectOptionObject | (string | SelectOptionObject)[];
52 /** Flag indicating if selection badge should be hidden for checkbox variant,default false */
53 isCheckboxSelectionBadgeHidden?: boolean;
54 /** Id for select toggle element */
55 toggleId?: string;
56 /** Adds accessible text to Select */
57 'aria-label'?: string;
58 /** Id of label for the Select aria-labelledby */
59 'aria-labelledby'?: string;
60 /** Id of div for the select aria-labelledby */
61 'aria-describedby'?: string;
62 /** Flag indicating if the select is an invalid state */
63 'aria-invalid'?: boolean;
64 /** Label for input field of type ahead select variants */
65 typeAheadAriaLabel?: string;
66 /** Label for clear selection button of type ahead select variants */
67 clearSelectionsAriaLabel?: string;
68 /** Label for toggle of type ahead select variants */
69 toggleAriaLabel?: string;
70 /** Label for remove chip button of multiple type ahead select variant */
71 removeSelectionAriaLabel?: string;
72 /** ID list of favorited select items */
73 favorites?: string[];
74 /** Label for the favorites group */
75 favoritesLabel?: string;
76 /** Enables favorites. Callback called when a select options's favorite button is clicked */
77 onFavorite?: (itemId: string, isFavorite: boolean) => void;
78 /** Callback for selection behavior */
79 onSelect?: (event: React.MouseEvent | React.ChangeEvent, value: string | SelectOptionObject, isPlaceholder?: boolean) => void;
80 /** Callback for toggle button behavior */
81 onToggle: (isExpanded: boolean, event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent | Event) => void;
82 /** Callback for toggle blur */
83 onBlur?: (event?: any) => void;
84 /** Callback for typeahead clear button */
85 onClear?: (event: React.MouseEvent) => void;
86 /** Optional callback for custom filtering */
87 onFilter?: (e: React.ChangeEvent<HTMLInputElement> | null, value: string) => React.ReactElement[] | undefined;
88 /** Optional callback for newly created options */
89 onCreateOption?: (newOptionValue: string) => void;
90 /** Optional event handler called each time the value in the typeahead input changes. */
91 onTypeaheadInputChanged?: (value: string) => void;
92 /** Variant of rendered Select */
93 variant?: 'single' | 'checkbox' | 'typeahead' | 'typeaheadmulti';
94 /** Width of the select container as a number of px or string percentage */
95 width?: string | number;
96 /** Max height of the select container as a number of px or string percentage */
97 maxHeight?: string | number;
98 /** Icon element to render inside the select toggle */
99 toggleIcon?: React.ReactElement;
100 /** Custom content to render in the select menu. If this prop is defined, the variant prop will be ignored and the select will render with a single select toggle */
101 customContent?: React.ReactNode;
102 /** Flag indicating if select should have an inline text input for filtering */
103 hasInlineFilter?: boolean;
104 /** Placeholder text for inline filter */
105 inlineFilterPlaceholderText?: string;
106 /** Custom text for select badge */
107 customBadgeText?: string | number;
108 /** Prefix for the id of the input in the checkbox select variant*/
109 inputIdPrefix?: string;
110 /** Value for the typeahead and inline filtering input autocomplete attribute. When targeting Chrome this property should be a random string. */
111 inputAutoComplete?: string;
112 /** Optional props to pass to the chip group in the typeaheadmulti variant */
113 chipGroupProps?: Omit<ChipGroupProps, 'children' | 'ref'>;
114 /** Optional props to render custom chip group in the typeaheadmulti variant */
115 chipGroupComponent?: React.ReactNode;
116 /** Flag for retaining keyboard-entered value in typeahead text field when focus leaves input away */
117 isInputValuePersisted?: boolean;
118 /** @beta Flag for retaining filter results on blur from keyboard-entered typeahead text */
119 isInputFilterPersisted?: boolean;
120 /** Flag indicating the typeahead input value should reset upon selection */
121 shouldResetOnSelect?: boolean;
122 /** Content rendered in the footer of the select menu */
123 footer?: React.ReactNode;
124}
125export interface SelectState {
126 focusFirstOption: boolean;
127 typeaheadInputValue: string | null;
128 typeaheadFilteredChildren: React.ReactNode[];
129 favoritesGroup: React.ReactNode[];
130 typeaheadCurrIndex: number;
131 creatableValue: string;
132 tabbedIntoFavoritesMenu: boolean;
133 typeaheadStoredIndex: number;
134 ouiaStateId: string;
135 viewMoreNextIndex: number;
136}
137export declare class Select extends React.Component<SelectProps & OUIAProps, SelectState> {
138 static displayName: string;
139 private parentRef;
140 private menuComponentRef;
141 private filterRef;
142 private clearRef;
143 private inputRef;
144 private refCollection;
145 private optionContainerRefCollection;
146 private footerRef;
147 static defaultProps: PickOptional<SelectProps>;
148 state: SelectState;
149 getTypeaheadActiveChild: (typeaheadCurrIndex: number) => HTMLElement;
150 componentDidUpdate: (prevProps: SelectProps, prevState: SelectState) => void;
151 onEnter: () => void;
152 onToggle: (isExpanded: boolean, e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent | Event) => void;
153 onClose: () => void;
154 onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
155 updateTypeAheadFilteredChildren: (typeaheadInputValue: string, e: React.ChangeEvent<HTMLInputElement> | null) => void;
156 onClick: (e: React.MouseEvent) => void;
157 clearSelection: (_e: React.MouseEvent) => void;
158 extendTypeaheadChildren(typeaheadCurrIndex: number, favoritesGroup?: React.ReactNode[]): React.ReactNode[];
159 sendRef: (optionRef: React.ReactNode, favoriteRef: React.ReactNode, optionContainerRef: React.ReactNode, index: number) => void;
160 handleMenuKeys: (index: number, innerIndex: number, position: string) => void;
161 moveFocus: (nextIndex: number, updateCurrentIndex?: boolean) => void;
162 switchFocusToFavoriteMenu: () => void;
163 moveFocusToLastMenuItem: () => void;
164 handleTypeaheadKeys: (position: string, shiftKey?: boolean) => void;
165 onClickTypeaheadToggleButton: () => void;
166 getDisplay: (value: string | SelectOptionObject, type?: 'node' | 'text') => any;
167 findText: (item: React.ReactNode) => string;
168 generateSelectedBadge: () => string | number;
169 setVieMoreNextIndex: () => void;
170 isLastOptionBeforeFooter: (index: any) => boolean;
171 render(): JSX.Element;
172}
173//# sourceMappingURL=Select.d.ts.map
\No newline at end of file