@fluentui/react-combobox 9.3.4 → 9.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (208) hide show
  1. package/CHANGELOG.json +141 -1
  2. package/CHANGELOG.md +41 -2
  3. package/dist/index.d.ts +2 -2
  4. package/lib/Combobox.js +0 -1
  5. package/lib/Combobox.js.map +1 -1
  6. package/lib/Dropdown.js +0 -1
  7. package/lib/Dropdown.js.map +1 -1
  8. package/lib/Listbox.js +0 -1
  9. package/lib/Listbox.js.map +1 -1
  10. package/lib/Option.js +0 -1
  11. package/lib/Option.js.map +1 -1
  12. package/lib/OptionGroup.js +0 -1
  13. package/lib/OptionGroup.js.map +1 -1
  14. package/lib/Selection.js +1 -0
  15. package/lib/Selection.js.map +1 -0
  16. package/lib/components/Combobox/Combobox.js +6 -8
  17. package/lib/components/Combobox/Combobox.js.map +1 -1
  18. package/lib/components/Combobox/Combobox.types.js +0 -1
  19. package/lib/components/Combobox/Combobox.types.js.map +1 -1
  20. package/lib/components/Combobox/index.js +0 -1
  21. package/lib/components/Combobox/index.js.map +1 -1
  22. package/lib/components/Combobox/renderCombobox.js +6 -11
  23. package/lib/components/Combobox/renderCombobox.js.map +1 -1
  24. package/lib/components/Combobox/useCombobox.js +228 -251
  25. package/lib/components/Combobox/useCombobox.js.map +1 -1
  26. package/lib/components/Combobox/useComboboxStyles.styles.js.map +1 -1
  27. package/lib/components/Dropdown/Dropdown.js +6 -8
  28. package/lib/components/Dropdown/Dropdown.js.map +1 -1
  29. package/lib/components/Dropdown/Dropdown.types.js +1 -2
  30. package/lib/components/Dropdown/Dropdown.types.js.map +1 -1
  31. package/lib/components/Dropdown/index.js +0 -1
  32. package/lib/components/Dropdown/index.js.map +1 -1
  33. package/lib/components/Dropdown/renderDropdown.js +6 -11
  34. package/lib/components/Dropdown/renderDropdown.js.map +1 -1
  35. package/lib/components/Dropdown/useDropdown.js +127 -136
  36. package/lib/components/Dropdown/useDropdown.js.map +1 -1
  37. package/lib/components/Dropdown/useDropdownStyles.styles.js.map +1 -1
  38. package/lib/components/Listbox/Listbox.js +6 -8
  39. package/lib/components/Listbox/Listbox.js.map +1 -1
  40. package/lib/components/Listbox/Listbox.types.js +1 -2
  41. package/lib/components/Listbox/Listbox.types.js.map +1 -1
  42. package/lib/components/Listbox/index.js +0 -1
  43. package/lib/components/Listbox/index.js.map +1 -1
  44. package/lib/components/Listbox/renderListbox.js +6 -11
  45. package/lib/components/Listbox/renderListbox.js.map +1 -1
  46. package/lib/components/Listbox/useListbox.js +77 -89
  47. package/lib/components/Listbox/useListbox.js.map +1 -1
  48. package/lib/components/Listbox/useListboxStyles.styles.js.map +1 -1
  49. package/lib/components/Option/Option.js +5 -7
  50. package/lib/components/Option/Option.js.map +1 -1
  51. package/lib/components/Option/Option.types.js +0 -1
  52. package/lib/components/Option/Option.types.js.map +1 -1
  53. package/lib/components/Option/index.js +0 -1
  54. package/lib/components/Option/index.js.map +1 -1
  55. package/lib/components/Option/renderOption.js +4 -9
  56. package/lib/components/Option/renderOption.js.map +1 -1
  57. package/lib/components/Option/useOption.js +115 -113
  58. package/lib/components/Option/useOption.js.map +1 -1
  59. package/lib/components/Option/useOptionStyles.styles.js +1 -1
  60. package/lib/components/Option/useOptionStyles.styles.js.map +1 -1
  61. package/lib/components/OptionGroup/OptionGroup.js +5 -7
  62. package/lib/components/OptionGroup/OptionGroup.js.map +1 -1
  63. package/lib/components/OptionGroup/OptionGroup.types.js +1 -2
  64. package/lib/components/OptionGroup/OptionGroup.types.js.map +1 -1
  65. package/lib/components/OptionGroup/index.js +0 -1
  66. package/lib/components/OptionGroup/index.js.map +1 -1
  67. package/lib/components/OptionGroup/renderOptionGroup.js +4 -9
  68. package/lib/components/OptionGroup/renderOptionGroup.js.map +1 -1
  69. package/lib/components/OptionGroup/useOptionGroup.js +21 -25
  70. package/lib/components/OptionGroup/useOptionGroup.js.map +1 -1
  71. package/lib/components/OptionGroup/useOptionGroupStyles.styles.js.map +1 -1
  72. package/lib/contexts/ComboboxContext.js +16 -17
  73. package/lib/contexts/ComboboxContext.js.map +1 -1
  74. package/lib/contexts/ListboxContext.js +12 -13
  75. package/lib/contexts/ListboxContext.js.map +1 -1
  76. package/lib/contexts/useComboboxContextValues.js +16 -28
  77. package/lib/contexts/useComboboxContextValues.js.map +1 -1
  78. package/lib/contexts/useListboxContextValues.js +17 -26
  79. package/lib/contexts/useListboxContextValues.js.map +1 -1
  80. package/lib/index.js +0 -1
  81. package/lib/index.js.map +1 -1
  82. package/lib/utils/ComboboxBase.types.js +0 -1
  83. package/lib/utils/ComboboxBase.types.js.map +1 -1
  84. package/lib/utils/OptionCollection.types.js +1 -2
  85. package/lib/utils/OptionCollection.types.js.map +1 -1
  86. package/lib/utils/Selection.types.js +0 -1
  87. package/lib/utils/Selection.types.js.map +1 -1
  88. package/lib/utils/dropdownKeyActions.js +66 -77
  89. package/lib/utils/dropdownKeyActions.js.map +1 -1
  90. package/lib/utils/internalTokens.js +3 -4
  91. package/lib/utils/internalTokens.js.map +1 -1
  92. package/lib/utils/useComboboxBaseState.js +94 -96
  93. package/lib/utils/useComboboxBaseState.js.map +1 -1
  94. package/lib/utils/useComboboxPopup.js +33 -30
  95. package/lib/utils/useComboboxPopup.js.map +1 -1
  96. package/lib/utils/useOptionCollection.js +65 -64
  97. package/lib/utils/useOptionCollection.js.map +1 -1
  98. package/lib/utils/useScrollOptionsIntoView.js +25 -32
  99. package/lib/utils/useScrollOptionsIntoView.js.map +1 -1
  100. package/lib/utils/useSelection.js +57 -49
  101. package/lib/utils/useSelection.js.map +1 -1
  102. package/lib/utils/useTriggerListboxSlots.js +105 -119
  103. package/lib/utils/useTriggerListboxSlots.js.map +1 -1
  104. package/lib-commonjs/Combobox.js +0 -3
  105. package/lib-commonjs/Combobox.js.map +1 -1
  106. package/lib-commonjs/Dropdown.js +0 -3
  107. package/lib-commonjs/Dropdown.js.map +1 -1
  108. package/lib-commonjs/Listbox.js +0 -3
  109. package/lib-commonjs/Listbox.js.map +1 -1
  110. package/lib-commonjs/Option.js +0 -3
  111. package/lib-commonjs/Option.js.map +1 -1
  112. package/lib-commonjs/OptionGroup.js +0 -3
  113. package/lib-commonjs/OptionGroup.js.map +1 -1
  114. package/lib-commonjs/Selection.js +6 -0
  115. package/lib-commonjs/Selection.js.map +1 -0
  116. package/lib-commonjs/components/Combobox/Combobox.js +1 -3
  117. package/lib-commonjs/components/Combobox/Combobox.js.map +1 -1
  118. package/lib-commonjs/components/Combobox/Combobox.types.js +0 -3
  119. package/lib-commonjs/components/Combobox/Combobox.types.js.map +1 -1
  120. package/lib-commonjs/components/Combobox/index.js +0 -3
  121. package/lib-commonjs/components/Combobox/index.js.map +1 -1
  122. package/lib-commonjs/components/Combobox/renderCombobox.js +1 -3
  123. package/lib-commonjs/components/Combobox/renderCombobox.js.map +1 -1
  124. package/lib-commonjs/components/Combobox/useCombobox.js +1 -3
  125. package/lib-commonjs/components/Combobox/useCombobox.js.map +1 -1
  126. package/lib-commonjs/components/Combobox/useComboboxStyles.styles.js +0 -2
  127. package/lib-commonjs/components/Combobox/useComboboxStyles.styles.js.map +1 -1
  128. package/lib-commonjs/components/Dropdown/Dropdown.js +1 -3
  129. package/lib-commonjs/components/Dropdown/Dropdown.js.map +1 -1
  130. package/lib-commonjs/components/Dropdown/Dropdown.types.js +0 -3
  131. package/lib-commonjs/components/Dropdown/Dropdown.types.js.map +1 -1
  132. package/lib-commonjs/components/Dropdown/index.js +0 -3
  133. package/lib-commonjs/components/Dropdown/index.js.map +1 -1
  134. package/lib-commonjs/components/Dropdown/renderDropdown.js +1 -3
  135. package/lib-commonjs/components/Dropdown/renderDropdown.js.map +1 -1
  136. package/lib-commonjs/components/Dropdown/useDropdown.js +1 -3
  137. package/lib-commonjs/components/Dropdown/useDropdown.js.map +1 -1
  138. package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.js +0 -2
  139. package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.js.map +1 -1
  140. package/lib-commonjs/components/Listbox/Listbox.js +1 -3
  141. package/lib-commonjs/components/Listbox/Listbox.js.map +1 -1
  142. package/lib-commonjs/components/Listbox/Listbox.types.js +0 -3
  143. package/lib-commonjs/components/Listbox/Listbox.types.js.map +1 -1
  144. package/lib-commonjs/components/Listbox/index.js +0 -3
  145. package/lib-commonjs/components/Listbox/index.js.map +1 -1
  146. package/lib-commonjs/components/Listbox/renderListbox.js +1 -3
  147. package/lib-commonjs/components/Listbox/renderListbox.js.map +1 -1
  148. package/lib-commonjs/components/Listbox/useListbox.js +1 -3
  149. package/lib-commonjs/components/Listbox/useListbox.js.map +1 -1
  150. package/lib-commonjs/components/Listbox/useListboxStyles.styles.js +0 -2
  151. package/lib-commonjs/components/Listbox/useListboxStyles.styles.js.map +1 -1
  152. package/lib-commonjs/components/Option/Option.js +1 -3
  153. package/lib-commonjs/components/Option/Option.js.map +1 -1
  154. package/lib-commonjs/components/Option/Option.types.js +0 -3
  155. package/lib-commonjs/components/Option/Option.types.js.map +1 -1
  156. package/lib-commonjs/components/Option/index.js +0 -3
  157. package/lib-commonjs/components/Option/index.js.map +1 -1
  158. package/lib-commonjs/components/Option/renderOption.js +1 -3
  159. package/lib-commonjs/components/Option/renderOption.js.map +1 -1
  160. package/lib-commonjs/components/Option/useOption.js +1 -3
  161. package/lib-commonjs/components/Option/useOption.js.map +1 -1
  162. package/lib-commonjs/components/Option/useOptionStyles.styles.js +1 -3
  163. package/lib-commonjs/components/Option/useOptionStyles.styles.js.map +1 -1
  164. package/lib-commonjs/components/OptionGroup/OptionGroup.js +1 -3
  165. package/lib-commonjs/components/OptionGroup/OptionGroup.js.map +1 -1
  166. package/lib-commonjs/components/OptionGroup/OptionGroup.types.js +0 -3
  167. package/lib-commonjs/components/OptionGroup/OptionGroup.types.js.map +1 -1
  168. package/lib-commonjs/components/OptionGroup/index.js +0 -3
  169. package/lib-commonjs/components/OptionGroup/index.js.map +1 -1
  170. package/lib-commonjs/components/OptionGroup/renderOptionGroup.js +1 -3
  171. package/lib-commonjs/components/OptionGroup/renderOptionGroup.js.map +1 -1
  172. package/lib-commonjs/components/OptionGroup/useOptionGroup.js +1 -3
  173. package/lib-commonjs/components/OptionGroup/useOptionGroup.js.map +1 -1
  174. package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.styles.js +0 -2
  175. package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.styles.js.map +1 -1
  176. package/lib-commonjs/contexts/ComboboxContext.js +2 -4
  177. package/lib-commonjs/contexts/ComboboxContext.js.map +1 -1
  178. package/lib-commonjs/contexts/ListboxContext.js +2 -4
  179. package/lib-commonjs/contexts/ListboxContext.js.map +1 -1
  180. package/lib-commonjs/contexts/useComboboxContextValues.js +1 -3
  181. package/lib-commonjs/contexts/useComboboxContextValues.js.map +1 -1
  182. package/lib-commonjs/contexts/useListboxContextValues.js +1 -3
  183. package/lib-commonjs/contexts/useListboxContextValues.js.map +1 -1
  184. package/lib-commonjs/index.js +0 -3
  185. package/lib-commonjs/index.js.map +1 -1
  186. package/lib-commonjs/utils/ComboboxBase.types.js +0 -3
  187. package/lib-commonjs/utils/ComboboxBase.types.js.map +1 -1
  188. package/lib-commonjs/utils/OptionCollection.types.js +0 -3
  189. package/lib-commonjs/utils/OptionCollection.types.js.map +1 -1
  190. package/lib-commonjs/utils/Selection.types.js +0 -3
  191. package/lib-commonjs/utils/Selection.types.js.map +1 -1
  192. package/lib-commonjs/utils/dropdownKeyActions.js +1 -3
  193. package/lib-commonjs/utils/dropdownKeyActions.js.map +1 -1
  194. package/lib-commonjs/utils/internalTokens.js +1 -3
  195. package/lib-commonjs/utils/internalTokens.js.map +1 -1
  196. package/lib-commonjs/utils/useComboboxBaseState.js +1 -3
  197. package/lib-commonjs/utils/useComboboxBaseState.js.map +1 -1
  198. package/lib-commonjs/utils/useComboboxPopup.js +1 -3
  199. package/lib-commonjs/utils/useComboboxPopup.js.map +1 -1
  200. package/lib-commonjs/utils/useOptionCollection.js +1 -3
  201. package/lib-commonjs/utils/useOptionCollection.js.map +1 -1
  202. package/lib-commonjs/utils/useScrollOptionsIntoView.js +1 -3
  203. package/lib-commonjs/utils/useScrollOptionsIntoView.js.map +1 -1
  204. package/lib-commonjs/utils/useSelection.js +1 -3
  205. package/lib-commonjs/utils/useSelection.js.map +1 -1
  206. package/lib-commonjs/utils/useTriggerListboxSlots.js +5 -7
  207. package/lib-commonjs/utils/useTriggerListboxSlots.js.map +1 -1
  208. package/package.json +12 -12
@@ -16,258 +16,235 @@ import { Listbox } from '../Listbox/Listbox';
16
16
  *
17
17
  * @param props - props from this instance of Combobox
18
18
  * @param ref - reference to root HTMLElement of Combobox
19
- */
20
- export const useCombobox_unstable = (props, ref) => {
21
- var _props_input;
22
- // Merge props from surrounding <Field>, if any
23
- props = useFieldControlProps_unstable(props, {
24
- supportsLabelFor: true,
25
- supportsRequired: true,
26
- supportsSize: true
27
- });
28
- const baseState = useComboboxBaseState({
29
- ...props,
30
- editable: true
31
- });
32
- const {
33
- activeOption,
34
- clearSelection,
35
- getIndexOfId,
36
- getOptionsMatchingText,
37
- hasFocus,
38
- open,
39
- selectOption,
40
- selectedOptions,
41
- setActiveOption,
42
- setFocusVisible,
43
- setOpen,
44
- setValue,
45
- value
46
- } = baseState;
47
- const {
48
- disabled,
49
- freeform,
50
- inlinePopup,
51
- multiselect
52
- } = props;
53
- const comboId = useId('combobox-');
54
- const {
55
- primary: triggerNativeProps,
56
- root: rootNativeProps
57
- } = getPartitionedNativeProps({
58
- props,
59
- primarySlotTagName: 'input',
60
- excludedPropNames: ['children', 'size']
61
- });
62
- const rootRef = React.useRef(null);
63
- const triggerRef = React.useRef(null);
64
- // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set
65
- // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows
66
- // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888
67
- const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);
68
- // save the typing vs. navigating options state, as the space key should behave differently in each case
69
- // we do not want to update the combobox when this changes, just save the value between renders
70
- const isTyping = React.useRef(false);
71
- // calculate listbox width style based on trigger width
72
- const [popupDimensions, setPopupDimensions] = React.useState();
73
- React.useEffect(() => {
74
- // only recalculate width when opening
75
- if (open) {
76
- var _rootRef_current;
77
- const width = `${(_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.clientWidth}px`;
78
- if (width !== (popupDimensions === null || popupDimensions === void 0 ? void 0 : popupDimensions.width)) {
79
- setPopupDimensions({
80
- width
81
- });
82
- }
83
- }
84
- }, [open, popupDimensions]);
85
- // set active option and selection based on typing
86
- const getOptionFromInput = inputValue => {
87
- const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();
88
- if (!searchString || searchString.length === 0) {
89
- return;
90
- }
91
- const matcher = optionText => optionText.toLowerCase().indexOf(searchString) === 0;
92
- const matches = getOptionsMatchingText(matcher);
93
- // return first matching option after the current active option, looping back to the top
94
- if (matches.length > 1 && activeOption) {
95
- const startIndex = getIndexOfId(activeOption.id);
96
- const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);
97
- return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];
98
- }
99
- var _matches_;
100
- return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;
101
- };
102
- /* Handle typed input */ // reset any typed value when an option is selected
103
- baseState.selectOption = (ev, option) => {
104
- setValue(undefined);
105
- selectOption(ev, option);
106
- };
107
- const onTriggerBlur = ev => {
108
- // handle selection and updating value if freeform is false
109
- if (!baseState.open && !freeform) {
110
- // select matching option, if the value fully matches
111
- if (value && activeOption && value.trim().toLowerCase() === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.text.toLowerCase())) {
112
- baseState.selectOption(ev, activeOption);
113
- }
114
- // reset typed value when the input loses focus while collapsed, unless freeform is true
115
- setValue(undefined);
116
- }
117
- };
118
- baseState.setOpen = (ev, newState) => {
119
- if (disabled) {
120
- return;
121
- }
122
- if (!newState && !freeform) {
123
- setValue(undefined);
124
- }
125
- setOpen(ev, newState);
126
- };
127
- // update value and active option based on input
128
- const onTriggerChange = ev => {
129
- const inputValue = ev.target.value;
130
- // update uncontrolled value
131
- baseState.setValue(inputValue);
132
- // handle updating active option based on input
133
- const matchingOption = getOptionFromInput(inputValue);
134
- setActiveOption(matchingOption);
135
- setFocusVisible(true);
136
- // clear selection for single-select if the input value no longer matches the selection
137
- if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {
138
- clearSelection(ev);
139
- }
140
- };
141
- // resolve input and listbox slot props
142
- let triggerSlot;
143
- let listboxSlot;
144
- triggerSlot = resolveShorthand(props.input, {
145
- required: true,
146
- defaultProps: {
147
- ref: useMergedRefs((_props_input = props.input) === null || _props_input === void 0 ? void 0 : _props_input.ref, triggerRef),
148
- type: 'text',
149
- value: value !== null && value !== void 0 ? value : '',
150
- ...triggerNativeProps
151
- }
152
- });
153
- const resolvedPropsOnKeyDown = triggerSlot.onKeyDown;
154
- triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);
155
- triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);
156
- // only resolve listbox slot if needed
157
- listboxSlot = open || hasFocus ? resolveShorthand(props.listbox, {
158
- required: true,
159
- defaultProps: {
160
- children: props.children,
161
- style: popupDimensions
162
- }
163
- }) : undefined;
164
- [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);
165
- [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);
166
- if (hideActiveDescendant) {
167
- triggerSlot['aria-activedescendant'] = undefined;
168
- }
169
- const state = {
170
- components: {
171
- root: 'div',
172
- input: 'input',
173
- expandIcon: 'span',
174
- listbox: Listbox
175
- },
176
- root: resolveShorthand(props.root, {
177
- required: true,
178
- defaultProps: {
179
- 'aria-owns': !inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,
180
- ...rootNativeProps
181
- }
182
- }),
183
- input: triggerSlot,
184
- listbox: listboxSlot,
185
- expandIcon: resolveShorthand(props.expandIcon, {
186
- required: true,
187
- defaultProps: {
188
- 'aria-expanded': open,
189
- children: /*#__PURE__*/React.createElement(ChevronDownIcon, null),
190
- role: 'button'
191
- }
192
- }),
193
- ...baseState
194
- };
195
- state.root.ref = useMergedRefs(state.root.ref, rootRef);
196
- /* Set input.onKeyDown here, so we can override the default behavior for spacebar */
197
- const defaultOnTriggerKeyDown = state.input.onKeyDown;
198
- state.input.onKeyDown = useEventCallback(ev => {
199
- if (!open && getDropdownActionFromKey(ev) === 'Type') {
200
- baseState.setOpen(ev, true);
201
- }
202
- // clear activedescendant when moving the text insertion cursor
203
- if (ev.key === ArrowLeft || ev.key === ArrowRight) {
204
- setHideActiveDescendant(true);
205
- } else {
206
- setHideActiveDescendant(false);
207
- }
208
- // update typing state to true if the user is typing
209
- const action = getDropdownActionFromKey(ev, {
210
- open,
211
- multiselect
19
+ */ export const useCombobox_unstable = (props, ref)=>{
20
+ var _props_input;
21
+ // Merge props from surrounding <Field>, if any
22
+ props = useFieldControlProps_unstable(props, {
23
+ supportsLabelFor: true,
24
+ supportsRequired: true,
25
+ supportsSize: true
212
26
  });
213
- if (action === 'Type') {
214
- isTyping.current = true;
215
- } else if (action === 'Open' && ev.key !== ' ' || action === 'Next' || action === 'Previous' || action === 'First' || action === 'Last' || action === 'PageUp' || action === 'PageDown') {
216
- isTyping.current = false;
217
- }
218
- // allow space to insert a character if freeform & the last action was typing, or if the popup is closed
219
- if (freeform && (isTyping.current || !open) && ev.key === ' ') {
220
- resolvedPropsOnKeyDown === null || resolvedPropsOnKeyDown === void 0 ? void 0 : resolvedPropsOnKeyDown(ev);
221
- return;
222
- }
223
- // if we're not allowing space to type, continue with default behavior
224
- defaultOnTriggerKeyDown === null || defaultOnTriggerKeyDown === void 0 ? void 0 : defaultOnTriggerKeyDown(ev);
225
- });
226
- /* handle open/close + focus change when clicking expandIcon */
227
- const {
228
- onMouseDown: onIconMouseDown,
229
- onClick: onIconClick
230
- } = state.expandIcon || {};
231
- const onExpandIconMouseDown = useEventCallback(mergeCallbacks(onIconMouseDown, () => {
232
- // do not dismiss on blur when closing via clicking the icon
233
- if (open) {
234
- baseState.ignoreNextBlur.current = true;
27
+ const baseState = useComboboxBaseState({
28
+ ...props,
29
+ editable: true
30
+ });
31
+ const { activeOption , clearSelection , getIndexOfId , getOptionsMatchingText , hasFocus , open , selectOption , selectedOptions , setActiveOption , setFocusVisible , setOpen , setValue , value } = baseState;
32
+ const { disabled , freeform , inlinePopup , multiselect } = props;
33
+ const comboId = useId('combobox-');
34
+ const { primary: triggerNativeProps , root: rootNativeProps } = getPartitionedNativeProps({
35
+ props,
36
+ primarySlotTagName: 'input',
37
+ excludedPropNames: [
38
+ 'children',
39
+ 'size'
40
+ ]
41
+ });
42
+ const rootRef = React.useRef(null);
43
+ const triggerRef = React.useRef(null);
44
+ // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set
45
+ // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows
46
+ // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888
47
+ const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);
48
+ // save the typing vs. navigating options state, as the space key should behave differently in each case
49
+ // we do not want to update the combobox when this changes, just save the value between renders
50
+ const isTyping = React.useRef(false);
51
+ // calculate listbox width style based on trigger width
52
+ const [popupDimensions, setPopupDimensions] = React.useState();
53
+ React.useEffect(()=>{
54
+ // only recalculate width when opening
55
+ if (open) {
56
+ var _rootRef_current;
57
+ const width = `${(_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.clientWidth}px`;
58
+ if (width !== (popupDimensions === null || popupDimensions === void 0 ? void 0 : popupDimensions.width)) {
59
+ setPopupDimensions({
60
+ width
61
+ });
62
+ }
63
+ }
64
+ }, [
65
+ open,
66
+ popupDimensions
67
+ ]);
68
+ // set active option and selection based on typing
69
+ const getOptionFromInput = (inputValue)=>{
70
+ const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();
71
+ if (!searchString || searchString.length === 0) {
72
+ return;
73
+ }
74
+ const matcher = (optionText)=>optionText.toLowerCase().indexOf(searchString) === 0;
75
+ const matches = getOptionsMatchingText(matcher);
76
+ // return first matching option after the current active option, looping back to the top
77
+ if (matches.length > 1 && activeOption) {
78
+ const startIndex = getIndexOfId(activeOption.id);
79
+ const nextMatch = matches.find((option)=>getIndexOfId(option.id) >= startIndex);
80
+ return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];
81
+ }
82
+ var _matches_;
83
+ return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;
84
+ };
85
+ /* Handle typed input */ // reset any typed value when an option is selected
86
+ baseState.selectOption = (ev, option)=>{
87
+ setValue(undefined);
88
+ selectOption(ev, option);
89
+ };
90
+ const onTriggerBlur = (ev)=>{
91
+ // handle selection and updating value if freeform is false
92
+ if (!baseState.open && !freeform) {
93
+ // select matching option, if the value fully matches
94
+ if (value && activeOption && value.trim().toLowerCase() === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.text.toLowerCase())) {
95
+ baseState.selectOption(ev, activeOption);
96
+ }
97
+ // reset typed value when the input loses focus while collapsed, unless freeform is true
98
+ setValue(undefined);
99
+ }
100
+ };
101
+ baseState.setOpen = (ev, newState)=>{
102
+ if (disabled) {
103
+ return;
104
+ }
105
+ if (!newState && !freeform) {
106
+ setValue(undefined);
107
+ }
108
+ setOpen(ev, newState);
109
+ };
110
+ // update value and active option based on input
111
+ const onTriggerChange = (ev)=>{
112
+ const inputValue = ev.target.value;
113
+ // update uncontrolled value
114
+ baseState.setValue(inputValue);
115
+ // handle updating active option based on input
116
+ const matchingOption = getOptionFromInput(inputValue);
117
+ setActiveOption(matchingOption);
118
+ setFocusVisible(true);
119
+ // clear selection for single-select if the input value no longer matches the selection
120
+ if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {
121
+ clearSelection(ev);
122
+ }
123
+ };
124
+ // resolve input and listbox slot props
125
+ let triggerSlot;
126
+ let listboxSlot;
127
+ triggerSlot = resolveShorthand(props.input, {
128
+ required: true,
129
+ defaultProps: {
130
+ ref: useMergedRefs((_props_input = props.input) === null || _props_input === void 0 ? void 0 : _props_input.ref, triggerRef),
131
+ type: 'text',
132
+ value: value !== null && value !== void 0 ? value : '',
133
+ ...triggerNativeProps
134
+ }
135
+ });
136
+ const resolvedPropsOnKeyDown = triggerSlot.onKeyDown;
137
+ triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);
138
+ triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);
139
+ // only resolve listbox slot if needed
140
+ listboxSlot = open || hasFocus ? resolveShorthand(props.listbox, {
141
+ required: true,
142
+ defaultProps: {
143
+ children: props.children,
144
+ style: popupDimensions
145
+ }
146
+ }) : undefined;
147
+ [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);
148
+ [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);
149
+ if (hideActiveDescendant) {
150
+ triggerSlot['aria-activedescendant'] = undefined;
235
151
  }
236
- }));
237
- const onExpandIconClick = useEventCallback(mergeCallbacks(onIconClick, event => {
238
- var _triggerRef_current;
239
- // open and set focus
240
- state.setOpen(event, !state.open);
241
- (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
242
- // set focus visible=false, since this can only be done with the mouse/pointer
243
- setFocusVisible(false);
244
- }));
245
- if (state.expandIcon) {
246
- state.expandIcon.onMouseDown = onExpandIconMouseDown;
247
- state.expandIcon.onClick = onExpandIconClick;
248
- // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,
249
- // using the following steps:
250
- // 1. If there is an aria-label, it is "Open [aria-label]"
251
- // 2. If there is an aria-labelledby, it is "Open [aria-labelledby target]" (using aria-labelledby + ids)
252
- // 3. If there is no aria-label/ledby attr, it falls back to "Open"
253
- // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179
254
- const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];
255
- const defaultOpenString = 'Open'; // this is english-only since it is the fallback
256
- if (!hasExpandLabel) {
257
- if (props['aria-labelledby']) {
258
- var _state_expandIcon_id;
259
- const chevronId = (_state_expandIcon_id = state.expandIcon.id) !== null && _state_expandIcon_id !== void 0 ? _state_expandIcon_id : `${comboId}-chevron`;
260
- const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;
261
- state.expandIcon['aria-label'] = defaultOpenString;
262
- state.expandIcon.id = chevronId;
263
- state.expandIcon['aria-labelledby'] = chevronLabelledBy;
264
- } else if (props['aria-label']) {
265
- state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;
266
- } else {
267
- state.expandIcon['aria-label'] = defaultOpenString;
268
- }
152
+ const state = {
153
+ components: {
154
+ root: 'div',
155
+ input: 'input',
156
+ expandIcon: 'span',
157
+ listbox: Listbox
158
+ },
159
+ root: resolveShorthand(props.root, {
160
+ required: true,
161
+ defaultProps: {
162
+ 'aria-owns': !inlinePopup ? listboxSlot === null || listboxSlot === void 0 ? void 0 : listboxSlot.id : undefined,
163
+ ...rootNativeProps
164
+ }
165
+ }),
166
+ input: triggerSlot,
167
+ listbox: listboxSlot,
168
+ expandIcon: resolveShorthand(props.expandIcon, {
169
+ required: true,
170
+ defaultProps: {
171
+ 'aria-expanded': open,
172
+ children: /*#__PURE__*/ React.createElement(ChevronDownIcon, null),
173
+ role: 'button'
174
+ }
175
+ }),
176
+ ...baseState
177
+ };
178
+ state.root.ref = useMergedRefs(state.root.ref, rootRef);
179
+ /* Set input.onKeyDown here, so we can override the default behavior for spacebar */ const defaultOnTriggerKeyDown = state.input.onKeyDown;
180
+ state.input.onKeyDown = useEventCallback((ev)=>{
181
+ if (!open && getDropdownActionFromKey(ev) === 'Type') {
182
+ baseState.setOpen(ev, true);
183
+ }
184
+ // clear activedescendant when moving the text insertion cursor
185
+ if (ev.key === ArrowLeft || ev.key === ArrowRight) {
186
+ setHideActiveDescendant(true);
187
+ } else {
188
+ setHideActiveDescendant(false);
189
+ }
190
+ // update typing state to true if the user is typing
191
+ const action = getDropdownActionFromKey(ev, {
192
+ open,
193
+ multiselect
194
+ });
195
+ if (action === 'Type') {
196
+ isTyping.current = true;
197
+ } else if (action === 'Open' && ev.key !== ' ' || action === 'Next' || action === 'Previous' || action === 'First' || action === 'Last' || action === 'PageUp' || action === 'PageDown') {
198
+ isTyping.current = false;
199
+ }
200
+ // allow space to insert a character if freeform & the last action was typing, or if the popup is closed
201
+ if (freeform && (isTyping.current || !open) && ev.key === ' ') {
202
+ resolvedPropsOnKeyDown === null || resolvedPropsOnKeyDown === void 0 ? void 0 : resolvedPropsOnKeyDown(ev);
203
+ return;
204
+ }
205
+ // if we're not allowing space to type, continue with default behavior
206
+ defaultOnTriggerKeyDown === null || defaultOnTriggerKeyDown === void 0 ? void 0 : defaultOnTriggerKeyDown(ev);
207
+ });
208
+ /* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown , onClick: onIconClick } = state.expandIcon || {};
209
+ const onExpandIconMouseDown = useEventCallback(mergeCallbacks(onIconMouseDown, ()=>{
210
+ // do not dismiss on blur when closing via clicking the icon
211
+ if (open) {
212
+ baseState.ignoreNextBlur.current = true;
213
+ }
214
+ }));
215
+ const onExpandIconClick = useEventCallback(mergeCallbacks(onIconClick, (event)=>{
216
+ var _triggerRef_current;
217
+ // open and set focus
218
+ state.setOpen(event, !state.open);
219
+ (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
220
+ // set focus visible=false, since this can only be done with the mouse/pointer
221
+ setFocusVisible(false);
222
+ }));
223
+ if (state.expandIcon) {
224
+ state.expandIcon.onMouseDown = onExpandIconMouseDown;
225
+ state.expandIcon.onClick = onExpandIconClick;
226
+ // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,
227
+ // using the following steps:
228
+ // 1. If there is an aria-label, it is "Open [aria-label]"
229
+ // 2. If there is an aria-labelledby, it is "Open [aria-labelledby target]" (using aria-labelledby + ids)
230
+ // 3. If there is no aria-label/ledby attr, it falls back to "Open"
231
+ // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179
232
+ const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];
233
+ const defaultOpenString = 'Open'; // this is english-only since it is the fallback
234
+ if (!hasExpandLabel) {
235
+ if (props['aria-labelledby']) {
236
+ var _state_expandIcon_id;
237
+ const chevronId = (_state_expandIcon_id = state.expandIcon.id) !== null && _state_expandIcon_id !== void 0 ? _state_expandIcon_id : `${comboId}-chevron`;
238
+ const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;
239
+ state.expandIcon['aria-label'] = defaultOpenString;
240
+ state.expandIcon.id = chevronId;
241
+ state.expandIcon['aria-labelledby'] = chevronLabelledBy;
242
+ } else if (props['aria-label']) {
243
+ state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;
244
+ } else {
245
+ state.expandIcon['aria-label'] = defaultOpenString;
246
+ }
247
+ }
269
248
  }
270
- }
271
- return state;
249
+ return state;
272
250
  };
273
- //# sourceMappingURL=useCombobox.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","useFieldControlProps_unstable","ArrowLeft","ArrowRight","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","resolveShorthand","mergeCallbacks","useEventCallback","useId","useMergedRefs","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useCombobox_unstable","props","ref","_props_input","supportsLabelFor","supportsRequired","supportsSize","baseState","editable","activeOption","clearSelection","getIndexOfId","getOptionsMatchingText","hasFocus","open","selectOption","selectedOptions","setActiveOption","setFocusVisible","setOpen","setValue","value","disabled","freeform","inlinePopup","multiselect","comboId","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","triggerRef","hideActiveDescendant","setHideActiveDescendant","useState","isTyping","popupDimensions","setPopupDimensions","useEffect","_rootRef_current","width","current","clientWidth","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","_matches_","undefined","ev","onTriggerBlur","text","newState","onTriggerChange","target","matchingOption","triggerSlot","listboxSlot","input","required","defaultProps","type","resolvedPropsOnKeyDown","onKeyDown","onChange","onBlur","listbox","children","style","state","components","expandIcon","createElement","role","defaultOnTriggerKeyDown","key","action","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","_triggerRef_current","focus","hasExpandLabel","defaultOpenString","_state_expandIcon_id","chevronId","chevronLabelledBy"],"sources":["../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n mergeCallbacks,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\n\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n const baseState = useComboboxBaseState({ ...props, editable: true });\n const {\n activeOption,\n clearSelection,\n getIndexOfId,\n getOptionsMatchingText,\n hasFocus,\n open,\n selectOption,\n selectedOptions,\n setActiveOption,\n setFocusVisible,\n setOpen,\n setValue,\n value,\n } = baseState;\n const { disabled, freeform, inlinePopup, multiselect } = props;\n const comboId = useId('combobox-');\n\n const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['children', 'size'],\n });\n\n const rootRef = React.useRef<HTMLDivElement>(null);\n const triggerRef = React.useRef<HTMLInputElement>(null);\n\n // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n // save the typing vs. navigating options state, as the space key should behave differently in each case\n // we do not want to update the combobox when this changes, just save the value between renders\n const isTyping = React.useRef(false);\n\n // calculate listbox width style based on trigger width\n const [popupDimensions, setPopupDimensions] = React.useState<{ width: string }>();\n React.useEffect(() => {\n // only recalculate width when opening\n if (open) {\n const width = `${rootRef.current?.clientWidth}px`;\n if (width !== popupDimensions?.width) {\n setPopupDimensions({ width });\n }\n }\n }, [open, popupDimensions]);\n\n // set active option and selection based on typing\n const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n const searchString = inputValue?.trim().toLowerCase();\n\n if (!searchString || searchString.length === 0) {\n return;\n }\n\n const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n const matches = getOptionsMatchingText(matcher);\n\n // return first matching option after the current active option, looping back to the top\n if (matches.length > 1 && activeOption) {\n const startIndex = getIndexOfId(activeOption.id);\n const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n return nextMatch ?? matches[0];\n }\n\n return matches[0] ?? undefined;\n };\n\n /* Handle typed input */\n\n // reset any typed value when an option is selected\n baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n setValue(undefined);\n selectOption(ev, option);\n };\n\n const onTriggerBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n // handle selection and updating value if freeform is false\n if (!baseState.open && !freeform) {\n // select matching option, if the value fully matches\n if (value && activeOption && value.trim().toLowerCase() === activeOption?.text.toLowerCase()) {\n baseState.selectOption(ev, activeOption);\n }\n\n // reset typed value when the input loses focus while collapsed, unless freeform is true\n setValue(undefined);\n }\n };\n\n baseState.setOpen = (ev, newState: boolean) => {\n if (disabled) {\n return;\n }\n\n if (!newState && !freeform) {\n setValue(undefined);\n }\n\n setOpen(ev, newState);\n };\n\n // update value and active option based on input\n const onTriggerChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = ev.target.value;\n // update uncontrolled value\n baseState.setValue(inputValue);\n\n // handle updating active option based on input\n const matchingOption = getOptionFromInput(inputValue);\n setActiveOption(matchingOption);\n\n setFocusVisible(true);\n\n // clear selection for single-select if the input value no longer matches the selection\n if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n clearSelection(ev);\n }\n };\n\n // resolve input and listbox slot props\n let triggerSlot: Slot<'input'>;\n let listboxSlot: Slot<typeof Listbox> | undefined;\n\n triggerSlot = resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n ref: useMergedRefs(props.input?.ref, triggerRef),\n type: 'text',\n value: value ?? '',\n ...triggerNativeProps,\n },\n });\n\n const resolvedPropsOnKeyDown = triggerSlot.onKeyDown;\n triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);\n\n // only resolve listbox slot if needed\n listboxSlot =\n open || hasFocus\n ? resolveShorthand(props.listbox, {\n required: true,\n defaultProps: {\n children: props.children,\n style: popupDimensions,\n },\n })\n : undefined;\n\n [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n if (hideActiveDescendant) {\n triggerSlot['aria-activedescendant'] = undefined;\n }\n\n const state: ComboboxState = {\n components: {\n root: 'div',\n input: 'input',\n expandIcon: 'span',\n listbox: Listbox,\n },\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: {\n 'aria-owns': !inlinePopup ? listboxSlot?.id : undefined,\n ...rootNativeProps,\n },\n }),\n input: triggerSlot,\n listbox: listboxSlot,\n expandIcon: resolveShorthand(props.expandIcon, {\n required: true,\n defaultProps: {\n 'aria-expanded': open,\n children: <ChevronDownIcon />,\n role: 'button',\n },\n }),\n ...baseState,\n };\n\n state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n /* Set input.onKeyDown here, so we can override the default behavior for spacebar */\n const defaultOnTriggerKeyDown = state.input.onKeyDown;\n state.input.onKeyDown = useEventCallback((ev: React.KeyboardEvent<HTMLInputElement>) => {\n if (!open && getDropdownActionFromKey(ev) === 'Type') {\n baseState.setOpen(ev, true);\n }\n\n // clear activedescendant when moving the text insertion cursor\n if (ev.key === ArrowLeft || ev.key === ArrowRight) {\n setHideActiveDescendant(true);\n } else {\n setHideActiveDescendant(false);\n }\n\n // update typing state to true if the user is typing\n const action = getDropdownActionFromKey(ev, { open, multiselect });\n if (action === 'Type') {\n isTyping.current = true;\n }\n // otherwise, update the typing state to false if opening or navigating dropdown options\n // other actions, like closing the dropdown, should not impact typing state.\n else if (\n (action === 'Open' && ev.key !== ' ') ||\n action === 'Next' ||\n action === 'Previous' ||\n action === 'First' ||\n action === 'Last' ||\n action === 'PageUp' ||\n action === 'PageDown'\n ) {\n isTyping.current = false;\n }\n\n // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n if (freeform && (isTyping.current || !open) && ev.key === ' ') {\n resolvedPropsOnKeyDown?.(ev);\n return;\n }\n\n // if we're not allowing space to type, continue with default behavior\n defaultOnTriggerKeyDown?.(ev);\n });\n\n /* handle open/close + focus change when clicking expandIcon */\n const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};\n const onExpandIconMouseDown = useEventCallback(\n mergeCallbacks(onIconMouseDown, () => {\n // do not dismiss on blur when closing via clicking the icon\n if (open) {\n baseState.ignoreNextBlur.current = true;\n }\n }),\n );\n\n const onExpandIconClick = useEventCallback(\n mergeCallbacks(onIconClick, (event: React.MouseEvent<HTMLSpanElement>) => {\n // open and set focus\n state.setOpen(event, !state.open);\n triggerRef.current?.focus();\n\n // set focus visible=false, since this can only be done with the mouse/pointer\n setFocusVisible(false);\n }),\n );\n\n if (state.expandIcon) {\n state.expandIcon.onMouseDown = onExpandIconMouseDown;\n state.expandIcon.onClick = onExpandIconClick;\n\n // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n // using the following steps:\n // 1. If there is an aria-label, it is \"Open [aria-label]\"\n // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];\n const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n if (!hasExpandLabel) {\n if (props['aria-labelledby']) {\n const chevronId = state.expandIcon.id ?? `${comboId}-chevron`;\n const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n\n state.expandIcon['aria-label'] = defaultOpenString;\n state.expandIcon.id = chevronId;\n state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n } else if (props['aria-label']) {\n state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n } else {\n state.expandIcon['aria-label'] = defaultOpenString;\n }\n }\n }\n\n return state;\n};\n"],"mappings":"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"}
1
+ {"version":3,"sources":["useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport {\n getPartitionedNativeProps,\n resolveShorthand,\n mergeCallbacks,\n useEventCallback,\n useId,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { SelectionEvents } from '../../utils/Selection.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { ComboboxProps, ComboboxState } from './Combobox.types';\n\n/**\n * Create the state required to render Combobox.\n *\n * The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n *\n * @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n */\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n const baseState = useComboboxBaseState({ ...props, editable: true });\n const {\n activeOption,\n clearSelection,\n getIndexOfId,\n getOptionsMatchingText,\n hasFocus,\n open,\n selectOption,\n selectedOptions,\n setActiveOption,\n setFocusVisible,\n setOpen,\n setValue,\n value,\n } = baseState;\n const { disabled, freeform, inlinePopup, multiselect } = props;\n const comboId = useId('combobox-');\n\n const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['children', 'size'],\n });\n\n const rootRef = React.useRef<HTMLDivElement>(null);\n const triggerRef = React.useRef<HTMLInputElement>(null);\n\n // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n\n // save the typing vs. navigating options state, as the space key should behave differently in each case\n // we do not want to update the combobox when this changes, just save the value between renders\n const isTyping = React.useRef(false);\n\n // calculate listbox width style based on trigger width\n const [popupDimensions, setPopupDimensions] = React.useState<{ width: string }>();\n React.useEffect(() => {\n // only recalculate width when opening\n if (open) {\n const width = `${rootRef.current?.clientWidth}px`;\n if (width !== popupDimensions?.width) {\n setPopupDimensions({ width });\n }\n }\n }, [open, popupDimensions]);\n\n // set active option and selection based on typing\n const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n const searchString = inputValue?.trim().toLowerCase();\n\n if (!searchString || searchString.length === 0) {\n return;\n }\n\n const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n const matches = getOptionsMatchingText(matcher);\n\n // return first matching option after the current active option, looping back to the top\n if (matches.length > 1 && activeOption) {\n const startIndex = getIndexOfId(activeOption.id);\n const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n return nextMatch ?? matches[0];\n }\n\n return matches[0] ?? undefined;\n };\n\n /* Handle typed input */\n\n // reset any typed value when an option is selected\n baseState.selectOption = (ev: SelectionEvents, option: OptionValue) => {\n setValue(undefined);\n selectOption(ev, option);\n };\n\n const onTriggerBlur = (ev: React.FocusEvent<HTMLInputElement>) => {\n // handle selection and updating value if freeform is false\n if (!baseState.open && !freeform) {\n // select matching option, if the value fully matches\n if (value && activeOption && value.trim().toLowerCase() === activeOption?.text.toLowerCase()) {\n baseState.selectOption(ev, activeOption);\n }\n\n // reset typed value when the input loses focus while collapsed, unless freeform is true\n setValue(undefined);\n }\n };\n\n baseState.setOpen = (ev, newState: boolean) => {\n if (disabled) {\n return;\n }\n\n if (!newState && !freeform) {\n setValue(undefined);\n }\n\n setOpen(ev, newState);\n };\n\n // update value and active option based on input\n const onTriggerChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n const inputValue = ev.target.value;\n // update uncontrolled value\n baseState.setValue(inputValue);\n\n // handle updating active option based on input\n const matchingOption = getOptionFromInput(inputValue);\n setActiveOption(matchingOption);\n\n setFocusVisible(true);\n\n // clear selection for single-select if the input value no longer matches the selection\n if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n clearSelection(ev);\n }\n };\n\n // resolve input and listbox slot props\n let triggerSlot: Slot<'input'>;\n let listboxSlot: Slot<typeof Listbox> | undefined;\n\n triggerSlot = resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n ref: useMergedRefs(props.input?.ref, triggerRef),\n type: 'text',\n value: value ?? '',\n ...triggerNativeProps,\n },\n });\n\n const resolvedPropsOnKeyDown = triggerSlot.onKeyDown;\n triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);\n triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);\n\n // only resolve listbox slot if needed\n listboxSlot =\n open || hasFocus\n ? resolveShorthand(props.listbox, {\n required: true,\n defaultProps: {\n children: props.children,\n style: popupDimensions,\n },\n })\n : undefined;\n\n [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n if (hideActiveDescendant) {\n triggerSlot['aria-activedescendant'] = undefined;\n }\n\n const state: ComboboxState = {\n components: {\n root: 'div',\n input: 'input',\n expandIcon: 'span',\n listbox: Listbox,\n },\n root: resolveShorthand(props.root, {\n required: true,\n defaultProps: {\n 'aria-owns': !inlinePopup ? listboxSlot?.id : undefined,\n ...rootNativeProps,\n },\n }),\n input: triggerSlot,\n listbox: listboxSlot,\n expandIcon: resolveShorthand(props.expandIcon, {\n required: true,\n defaultProps: {\n 'aria-expanded': open,\n children: <ChevronDownIcon />,\n role: 'button',\n },\n }),\n ...baseState,\n };\n\n state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n /* Set input.onKeyDown here, so we can override the default behavior for spacebar */\n const defaultOnTriggerKeyDown = state.input.onKeyDown;\n state.input.onKeyDown = useEventCallback((ev: React.KeyboardEvent<HTMLInputElement>) => {\n if (!open && getDropdownActionFromKey(ev) === 'Type') {\n baseState.setOpen(ev, true);\n }\n\n // clear activedescendant when moving the text insertion cursor\n if (ev.key === ArrowLeft || ev.key === ArrowRight) {\n setHideActiveDescendant(true);\n } else {\n setHideActiveDescendant(false);\n }\n\n // update typing state to true if the user is typing\n const action = getDropdownActionFromKey(ev, { open, multiselect });\n if (action === 'Type') {\n isTyping.current = true;\n }\n // otherwise, update the typing state to false if opening or navigating dropdown options\n // other actions, like closing the dropdown, should not impact typing state.\n else if (\n (action === 'Open' && ev.key !== ' ') ||\n action === 'Next' ||\n action === 'Previous' ||\n action === 'First' ||\n action === 'Last' ||\n action === 'PageUp' ||\n action === 'PageDown'\n ) {\n isTyping.current = false;\n }\n\n // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n if (freeform && (isTyping.current || !open) && ev.key === ' ') {\n resolvedPropsOnKeyDown?.(ev);\n return;\n }\n\n // if we're not allowing space to type, continue with default behavior\n defaultOnTriggerKeyDown?.(ev);\n });\n\n /* handle open/close + focus change when clicking expandIcon */\n const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};\n const onExpandIconMouseDown = useEventCallback(\n mergeCallbacks(onIconMouseDown, () => {\n // do not dismiss on blur when closing via clicking the icon\n if (open) {\n baseState.ignoreNextBlur.current = true;\n }\n }),\n );\n\n const onExpandIconClick = useEventCallback(\n mergeCallbacks(onIconClick, (event: React.MouseEvent<HTMLSpanElement>) => {\n // open and set focus\n state.setOpen(event, !state.open);\n triggerRef.current?.focus();\n\n // set focus visible=false, since this can only be done with the mouse/pointer\n setFocusVisible(false);\n }),\n );\n\n if (state.expandIcon) {\n state.expandIcon.onMouseDown = onExpandIconMouseDown;\n state.expandIcon.onClick = onExpandIconClick;\n\n // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n // using the following steps:\n // 1. If there is an aria-label, it is \"Open [aria-label]\"\n // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];\n const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n if (!hasExpandLabel) {\n if (props['aria-labelledby']) {\n const chevronId = state.expandIcon.id ?? `${comboId}-chevron`;\n const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n\n state.expandIcon['aria-label'] = defaultOpenString;\n state.expandIcon.id = chevronId;\n state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n } else if (props['aria-label']) {\n state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n } else {\n state.expandIcon['aria-label'] = defaultOpenString;\n }\n }\n }\n\n return state;\n};\n"],"names":["React","useFieldControlProps_unstable","ArrowLeft","ArrowRight","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","resolveShorthand","mergeCallbacks","useEventCallback","useId","useMergedRefs","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useCombobox_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","baseState","editable","activeOption","clearSelection","getIndexOfId","getOptionsMatchingText","hasFocus","open","selectOption","selectedOptions","setActiveOption","setFocusVisible","setOpen","setValue","value","disabled","freeform","inlinePopup","multiselect","comboId","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","triggerRef","hideActiveDescendant","setHideActiveDescendant","useState","isTyping","popupDimensions","setPopupDimensions","useEffect","width","current","clientWidth","getOptionFromInput","inputValue","searchString","trim","toLowerCase","length","matcher","optionText","indexOf","matches","startIndex","id","nextMatch","find","option","undefined","ev","onTriggerBlur","text","newState","onTriggerChange","target","matchingOption","triggerSlot","listboxSlot","input","required","defaultProps","type","resolvedPropsOnKeyDown","onKeyDown","onChange","onBlur","listbox","children","style","state","components","expandIcon","role","defaultOnTriggerKeyDown","key","action","onMouseDown","onIconMouseDown","onClick","onIconClick","onExpandIconMouseDown","ignoreNextBlur","onExpandIconClick","event","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy"],"mappings":"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"}