( props: AriaComboBoxOptions<T, M>, state: ComboBoxState<T, M> )
| 115 | * @param state - State for the select, as returned by `useComboBoxState`. |
| 116 | */ |
| 117 | export function useComboBox<T, M extends SelectionMode = 'single'>( |
| 118 | props: AriaComboBoxOptions<T, M>, |
| 119 | state: ComboBoxState<T, M> |
| 120 | ): ComboBoxAria<T> { |
| 121 | let { |
| 122 | buttonRef, |
| 123 | popoverRef, |
| 124 | inputRef, |
| 125 | listBoxRef, |
| 126 | keyboardDelegate, |
| 127 | layoutDelegate, |
| 128 | // completionMode = 'suggest', |
| 129 | shouldFocusWrap, |
| 130 | isReadOnly, |
| 131 | isDisabled |
| 132 | } = props; |
| 133 | let backupBtnRef = useRef(null); |
| 134 | buttonRef = buttonRef ?? backupBtnRef; |
| 135 | |
| 136 | let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/combobox'); |
| 137 | let {menuTriggerProps, menuProps} = useMenuTrigger<T>( |
| 138 | { |
| 139 | type: 'listbox', |
| 140 | isDisabled: isDisabled || isReadOnly |
| 141 | }, |
| 142 | state, |
| 143 | buttonRef |
| 144 | ); |
| 145 | |
| 146 | // Set listbox id so it can be used when calling getItemId later |
| 147 | listData.set(state, {id: menuProps.id}); |
| 148 | |
| 149 | // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down). |
| 150 | // When virtualized, the layout object will be passed in as a prop and override this. |
| 151 | let {collection} = state; |
| 152 | let {disabledKeys} = state.selectionManager; |
| 153 | let delegate = useMemo( |
| 154 | () => |
| 155 | keyboardDelegate || |
| 156 | new ListKeyboardDelegate({ |
| 157 | collection, |
| 158 | disabledKeys, |
| 159 | ref: listBoxRef, |
| 160 | layoutDelegate |
| 161 | }), |
| 162 | [keyboardDelegate, layoutDelegate, collection, disabledKeys, listBoxRef] |
| 163 | ); |
| 164 | |
| 165 | // Use useSelectableCollection to get the keyboard handlers to apply to the textfield |
| 166 | let {collectionProps} = useSelectableCollection({ |
| 167 | selectionManager: state.selectionManager, |
| 168 | keyboardDelegate: delegate, |
| 169 | disallowTypeAhead: true, |
| 170 | disallowEmptySelection: true, |
| 171 | shouldFocusWrap, |
| 172 | ref: inputRef, |
| 173 | // Prevent item scroll behavior from being applied here, should be handled in the user's Popover + ListBox component |
| 174 | isVirtualized: true |
no test coverage detected