@react-aria/combobox 3.9.1-nightly.4624 → 3.9.2-nightly.4629

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 (8) hide show
  1. package/dist/types.d.ts.map +1 -1
  2. package/dist/useComboBox.main.js +39 -38
  3. package/dist/useComboBox.main.js.map +1 -1
  4. package/dist/useComboBox.mjs +39 -38
  5. package/dist/useComboBox.module.js +39 -38
  6. package/dist/useComboBox.module.js.map +1 -1
  7. package/package.json +16 -16
  8. package/src/useComboBox.ts +3 -0
package/dist/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;;;;AA8BA,qCAAqC,CAAC,CAAE,SAAQ,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,UAAU,CAAC;IACpF,qCAAqC;IACrC,QAAQ,EAAE,UAAU,gBAAgB,CAAC,CAAC;IACtC,wCAAwC;IACxC,UAAU,EAAE,UAAU,OAAO,CAAC,CAAC;IAC/B,gCAAgC;IAChC,UAAU,EAAE,UAAU,WAAW,CAAC,CAAC;IACnC,+DAA+D;IAC/D,SAAS,CAAC,EAAE,UAAU,OAAO,CAAC,CAAC;IAC/B,6EAA6E;IAC7E,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC;AAED,8BAA8B,CAAC,CAAE,SAAQ,gBAAgB;IACvD,mCAAmC;IACnC,UAAU,EAAE,aAAa,CAAC;IAC1B,6CAA6C;IAC7C,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,6EAA6E;IAC7E,YAAY,EAAE,mBAAmB,CAAC,CAAC,CAAC;IACpC,0FAA0F;IAC1F,WAAW,EAAE,eAAe,CAAC;IAC7B,2DAA2D;IAC3D,gBAAgB,EAAE,aAAa,CAAC;IAChC,6DAA6D;IAC7D,iBAAiB,EAAE,aAAa,CAAA;CACjC;AAED;;;;;GAKG;AACH,4BAA4B,CAAC,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CA0StG;AC7VD,YAAY,EAAC,iBAAiB,EAAC,MAAM,uBAAuB,CAAC","sources":["packages/@react-aria/combobox/src/packages/@react-aria/combobox/src/useComboBox.ts","packages/@react-aria/combobox/src/packages/@react-aria/combobox/src/index.ts","packages/@react-aria/combobox/src/index.ts"],"sourcesContent":[null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {useComboBox} from './useComboBox';\nexport type {AriaComboBoxOptions, ComboBoxAria} from './useComboBox';\nexport type {AriaComboBoxProps} from '@react-types/combobox';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
1
+ {"mappings":";;;;;;AA8BA,qCAAqC,CAAC,CAAE,SAAQ,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,UAAU,CAAC;IACpF,qCAAqC;IACrC,QAAQ,EAAE,UAAU,gBAAgB,CAAC,CAAC;IACtC,wCAAwC;IACxC,UAAU,EAAE,UAAU,OAAO,CAAC,CAAC;IAC/B,gCAAgC;IAChC,UAAU,EAAE,UAAU,WAAW,CAAC,CAAC;IACnC,+DAA+D;IAC/D,SAAS,CAAC,EAAE,UAAU,OAAO,CAAC,CAAC;IAC/B,6EAA6E;IAC7E,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC;AAED,8BAA8B,CAAC,CAAE,SAAQ,gBAAgB;IACvD,mCAAmC;IACnC,UAAU,EAAE,aAAa,CAAC;IAC1B,6CAA6C;IAC7C,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IAClD,6EAA6E;IAC7E,YAAY,EAAE,mBAAmB,CAAC,CAAC,CAAC;IACpC,0FAA0F;IAC1F,WAAW,EAAE,eAAe,CAAC;IAC7B,2DAA2D;IAC3D,gBAAgB,EAAE,aAAa,CAAC;IAChC,6DAA6D;IAC7D,iBAAiB,EAAE,aAAa,CAAA;CACjC;AAED;;;;;GAKG;AACH,4BAA4B,CAAC,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CA6StG;AChWD,YAAY,EAAC,iBAAiB,EAAC,MAAM,uBAAuB,CAAC","sources":["packages/@react-aria/combobox/src/packages/@react-aria/combobox/src/useComboBox.ts","packages/@react-aria/combobox/src/packages/@react-aria/combobox/src/index.ts","packages/@react-aria/combobox/src/index.ts"],"sourcesContent":[null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {useComboBox} from './useComboBox';\nexport type {AriaComboBoxOptions, ComboBoxAria} from './useComboBox';\nexport type {AriaComboBoxProps} from '@react-types/combobox';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
package/dist/useComboBox.main.js CHANGED
@@ -46,9 +46,9 @@ $parcel$export(module.exports, "useComboBox", () => $242452271d1e4c0e$export$8c1
46
46
  function $242452271d1e4c0e$export$8c18d1b4f7232bbf(props, state) {
47
47
  let { buttonRef: buttonRef, popoverRef: popoverRef, inputRef: inputRef, listBoxRef: listBoxRef, keyboardDelegate: keyboardDelegate, shouldFocusWrap: // completionMode = 'suggest',
48
48
  shouldFocusWrap, isReadOnly: isReadOnly, isDisabled: isDisabled } = props;
49
- let stringFormatter = (0, $BGXP4$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($8d1e5da058b86bb9$exports))), "@react-aria/combobox");
49
+ let stringFormatter = (0, $BGXP4$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($8d1e5da058b86bb9$exports))), '@react-aria/combobox');
50
50
  let { menuTriggerProps: menuTriggerProps, menuProps: menuProps } = (0, $BGXP4$reactariamenu.useMenuTrigger)({
51
- type: "listbox",
51
+ type: 'listbox',
52
52
  isDisabled: isDisabled || isReadOnly
53
53
  }, state, buttonRef);
54
54
  // Set listbox id so it can be used when calling getItemId later
@@ -77,14 +77,15 @@ function $242452271d1e4c0e$export$8c18d1b4f7232bbf(props, state) {
77
77
  let router = (0, $BGXP4$reactariautils.useRouter)();
78
78
  // For textfield specific keydown operations
79
79
  let onKeyDown = (e)=>{
80
+ if (e.nativeEvent.isComposing) return;
80
81
  switch(e.key){
81
- case "Enter":
82
- case "Tab":
82
+ case 'Enter':
83
+ case 'Tab':
83
84
  // Prevent form submission if menu is open since we may be selecting a option
84
- if (state.isOpen && e.key === "Enter") e.preventDefault();
85
+ if (state.isOpen && e.key === 'Enter') e.preventDefault();
85
86
  // If the focused item is a link, trigger opening it. Items that are links are not selectable.
86
87
  if (state.isOpen && state.selectionManager.focusedKey != null && state.selectionManager.isLink(state.selectionManager.focusedKey)) {
87
- if (e.key === "Enter") {
88
+ if (e.key === 'Enter') {
88
89
  let item = listBoxRef.current.querySelector(`[data-key="${CSS.escape(state.selectionManager.focusedKey.toString())}"]`);
89
90
  if (item instanceof HTMLAnchorElement) {
90
91
  let collectionItem = state.collection.getItem(state.selectionManager.focusedKey);
@@ -94,18 +95,18 @@ function $242452271d1e4c0e$export$8c18d1b4f7232bbf(props, state) {
94
95
  state.close();
95
96
  } else state.commit();
96
97
  break;
97
- case "Escape":
98
- if (state.selectedKey !== null || state.inputValue === "" || props.allowsCustomValue) e.continuePropagation();
98
+ case 'Escape':
99
+ if (state.selectedKey !== null || state.inputValue === '' || props.allowsCustomValue) e.continuePropagation();
99
100
  state.revert();
100
101
  break;
101
- case "ArrowDown":
102
- state.open("first", "manual");
102
+ case 'ArrowDown':
103
+ state.open('first', 'manual');
103
104
  break;
104
- case "ArrowUp":
105
- state.open("last", "manual");
105
+ case 'ArrowUp':
106
+ state.open('last', 'manual');
106
107
  break;
107
- case "ArrowLeft":
108
- case "ArrowRight":
108
+ case 'ArrowLeft':
109
+ case 'ArrowRight':
109
110
  state.selectionManager.setFocusedKey(null);
110
111
  break;
111
112
  }
@@ -132,33 +133,33 @@ function $242452271d1e4c0e$export$8c18d1b4f7232bbf(props, state) {
132
133
  onBlur: onBlur,
133
134
  value: state.inputValue,
134
135
  onFocus: onFocus,
135
- autoComplete: "off",
136
+ autoComplete: 'off',
136
137
  validate: undefined,
137
138
  [(0, $BGXP4$reactstatelyform.privateValidationStateProp)]: state
138
139
  }, inputRef);
139
140
  // Press handlers for the ComboBox button
140
141
  let onPress = (e)=>{
141
- if (e.pointerType === "touch") {
142
+ if (e.pointerType === 'touch') {
142
143
  // Focus the input field in case it isn't focused yet
143
144
  inputRef.current.focus();
144
- state.toggle(null, "manual");
145
+ state.toggle(null, 'manual');
145
146
  }
146
147
  };
147
148
  let onPressStart = (e)=>{
148
- if (e.pointerType !== "touch") {
149
+ if (e.pointerType !== 'touch') {
149
150
  inputRef.current.focus();
150
- state.toggle(e.pointerType === "keyboard" || e.pointerType === "virtual" ? "first" : null, "manual");
151
+ state.toggle(e.pointerType === 'keyboard' || e.pointerType === 'virtual' ? 'first' : null, 'manual');
151
152
  }
152
153
  };
153
154
  let triggerLabelProps = (0, $BGXP4$reactariautils.useLabels)({
154
155
  id: menuTriggerProps.id,
155
- "aria-label": stringFormatter.format("buttonLabel"),
156
- "aria-labelledby": props["aria-labelledby"] || labelProps.id
156
+ 'aria-label': stringFormatter.format('buttonLabel'),
157
+ 'aria-labelledby': props['aria-labelledby'] || labelProps.id
157
158
  });
158
159
  let listBoxProps = (0, $BGXP4$reactariautils.useLabels)({
159
160
  id: menuProps.id,
160
- "aria-label": stringFormatter.format("listboxLabel"),
161
- "aria-labelledby": props["aria-labelledby"] || labelProps.id
161
+ 'aria-label': stringFormatter.format('listboxLabel'),
162
+ 'aria-labelledby': props['aria-labelledby'] || labelProps.id
162
163
  });
163
164
  // If a touch happens on direct center of ComboBox input, might be virtual click from iPad so open ComboBox menu
164
165
  let lastEventTime = (0, $BGXP4$react.useRef)(0);
@@ -177,7 +178,7 @@ function $242452271d1e4c0e$export$8c18d1b4f7232bbf(props, state) {
177
178
  if (touch.clientX === centerX && touch.clientY === centerY) {
178
179
  e.preventDefault();
179
180
  inputRef.current.focus();
180
- state.toggle(null, "manual");
181
+ state.toggle(null, 'manual');
181
182
  lastEventTime.current = e.timeStamp;
182
183
  }
183
184
  };
@@ -195,14 +196,14 @@ function $242452271d1e4c0e$export$8c18d1b4f7232bbf(props, state) {
195
196
  if ((0, $BGXP4$reactariautils.isAppleDevice)() && focusedItem != null && itemKey !== lastItem.current) {
196
197
  let isSelected = state.selectionManager.isSelected(itemKey);
197
198
  let section = sectionKey != null ? state.collection.getItem(sectionKey) : null;
198
- let sectionTitle = (section === null || section === void 0 ? void 0 : section["aria-label"]) || (typeof (section === null || section === void 0 ? void 0 : section.rendered) === "string" ? section.rendered : "") || "";
199
- let announcement = stringFormatter.format("focusAnnouncement", {
199
+ let sectionTitle = (section === null || section === void 0 ? void 0 : section['aria-label']) || (typeof (section === null || section === void 0 ? void 0 : section.rendered) === 'string' ? section.rendered : '') || '';
200
+ let announcement = stringFormatter.format('focusAnnouncement', {
200
201
  isGroupChange: section && sectionKey !== lastSection.current,
201
202
  groupTitle: sectionTitle,
202
203
  groupCount: section ? [
203
204
  ...(0, $BGXP4$reactstatelycollections.getChildNodes)(section, state.collection)
204
205
  ].length : 0,
205
- optionText: focusedItem["aria-label"] || focusedItem.textValue || "",
206
+ optionText: focusedItem['aria-label'] || focusedItem.textValue || '',
206
207
  isSelected: isSelected
207
208
  });
208
209
  (0, $BGXP4$reactarialiveannouncer.announce)(announcement);
@@ -220,7 +221,7 @@ function $242452271d1e4c0e$export$8c18d1b4f7232bbf(props, state) {
220
221
  // The exception is VoiceOver since this isn't included in the message above.
221
222
  let didOpenWithoutFocusedItem = state.isOpen !== lastOpen.current && (state.selectionManager.focusedKey == null || (0, $BGXP4$reactariautils.isAppleDevice)());
222
223
  if (state.isOpen && (didOpenWithoutFocusedItem || optionCount !== lastSize.current)) {
223
- let announcement = stringFormatter.format("countAnnouncement", {
224
+ let announcement = stringFormatter.format('countAnnouncement', {
224
225
  optionCount: optionCount
225
226
  });
226
227
  (0, $BGXP4$reactarialiveannouncer.announce)(announcement);
@@ -232,8 +233,8 @@ function $242452271d1e4c0e$export$8c18d1b4f7232bbf(props, state) {
232
233
  let lastSelectedKey = (0, $BGXP4$react.useRef)(state.selectedKey);
233
234
  (0, $BGXP4$react.useEffect)(()=>{
234
235
  if ((0, $BGXP4$reactariautils.isAppleDevice)() && state.isFocused && state.selectedItem && state.selectedKey !== lastSelectedKey.current) {
235
- let optionText = state.selectedItem["aria-label"] || state.selectedItem.textValue || "";
236
- let announcement = stringFormatter.format("selectedAnnouncement", {
236
+ let optionText = state.selectedItem['aria-label'] || state.selectedItem.textValue || '';
237
+ let announcement = stringFormatter.format('selectedAnnouncement', {
237
238
  optionText: optionText
238
239
  });
239
240
  (0, $BGXP4$reactarialiveannouncer.announce)(announcement);
@@ -261,24 +262,24 @@ function $242452271d1e4c0e$export$8c18d1b4f7232bbf(props, state) {
261
262
  isDisabled: isDisabled || isReadOnly
262
263
  },
263
264
  inputProps: (0, $BGXP4$reactariautils.mergeProps)(inputProps, {
264
- role: "combobox",
265
- "aria-expanded": menuTriggerProps["aria-expanded"],
266
- "aria-controls": state.isOpen ? menuProps.id : undefined,
265
+ role: 'combobox',
266
+ 'aria-expanded': menuTriggerProps['aria-expanded'],
267
+ 'aria-controls': state.isOpen ? menuProps.id : undefined,
267
268
  // TODO: readd proper logic for completionMode = complete (aria-autocomplete: both)
268
- "aria-autocomplete": "list",
269
- "aria-activedescendant": focusedItem ? (0, $BGXP4$reactarialistbox.getItemId)(state, focusedItem.key) : undefined,
269
+ 'aria-autocomplete': 'list',
270
+ 'aria-activedescendant': focusedItem ? (0, $BGXP4$reactarialistbox.getItemId)(state, focusedItem.key) : undefined,
270
271
  onTouchEnd: onTouchEnd,
271
272
  // This disable's iOS's autocorrect suggestions, since the combo box provides its own suggestions.
272
- autoCorrect: "off",
273
+ autoCorrect: 'off',
273
274
  // This disable's the macOS Safari spell check auto corrections.
274
- spellCheck: "false"
275
+ spellCheck: 'false'
275
276
  }),
276
277
  listBoxProps: (0, $BGXP4$reactariautils.mergeProps)(menuProps, listBoxProps, {
277
278
  autoFocus: state.focusStrategy,
278
279
  shouldUseVirtualFocus: true,
279
280
  shouldSelectOnPressUp: true,
280
281
  shouldFocusOnHover: true,
281
- linkBehavior: "selection"
282
+ linkBehavior: 'selection'
282
283
  }),
283
284
  descriptionProps: descriptionProps,
284
285
  errorMessageProps: errorMessageProps,
package/dist/useComboBox.main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-aria/combobox/src/useComboBox.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {announce} from '@react-aria/live-announcer';\nimport {AriaButtonProps} from '@react-types/button';\nimport {AriaComboBoxProps} from '@react-types/combobox';\nimport {ariaHideOutside} from '@react-aria/overlays';\nimport {AriaListBoxOptions, getItemId, listData} from '@react-aria/listbox';\nimport {BaseEvent, DOMAttributes, KeyboardDelegate, PressEvent, RouterOptions, ValidationResult} from '@react-types/shared';\nimport {chain, isAppleDevice, mergeProps, useLabels, useRouter} from '@react-aria/utils';\nimport {ComboBoxState} from '@react-stately/combobox';\nimport {FocusEvent, InputHTMLAttributes, KeyboardEvent, RefObject, TouchEvent, useEffect, useMemo, useRef} from 'react';\nimport {getChildNodes, getItemCount} from '@react-stately/collections';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListKeyboardDelegate, useSelectableCollection} from '@react-aria/selection';\nimport {privateValidationStateProp} from '@react-stately/form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenuTrigger} from '@react-aria/menu';\nimport {useTextField} from '@react-aria/textfield';\n\nexport interface AriaComboBoxOptions<T> extends Omit<AriaComboBoxProps<T>, 'children'> {\n /** The ref for the input element. */\n inputRef: RefObject<HTMLInputElement>,\n /** The ref for the list box popover. */\n popoverRef: RefObject<Element>,\n /** The ref for the list box. */\n listBoxRef: RefObject<HTMLElement>,\n /** The ref for the optional list box popup trigger button. */\n buttonRef?: RefObject<Element>,\n /** An optional keyboard delegate implementation, to override the default. */\n keyboardDelegate?: KeyboardDelegate\n}\n\nexport interface ComboBoxAria<T> extends ValidationResult {\n /** Props for the label element. */\n labelProps: DOMAttributes,\n /** Props for the combo box input element. */\n inputProps: InputHTMLAttributes<HTMLInputElement>,\n /** Props for the list box, to be passed to [useListBox](useListBox.html). */\n listBoxProps: AriaListBoxOptions<T>,\n /** Props for the optional trigger button, to be passed to [useButton](useButton.html). */\n buttonProps: AriaButtonProps,\n /** Props for the combo box description element, if any. */\n descriptionProps: DOMAttributes,\n /** Props for the combo box error message element, if any. */\n errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a combo box component.\n * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.\n * @param props - Props for the combo box.\n * @param state - State for the select, as returned by `useComboBoxState`.\n */\nexport function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxState<T>): ComboBoxAria<T> {\n let {\n buttonRef,\n popoverRef,\n inputRef,\n listBoxRef,\n keyboardDelegate,\n // completionMode = 'suggest',\n shouldFocusWrap,\n isReadOnly,\n isDisabled\n } = props;\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/combobox');\n let {menuTriggerProps, menuProps} = useMenuTrigger<T>(\n {\n type: 'listbox',\n isDisabled: isDisabled || isReadOnly\n },\n state,\n buttonRef\n );\n\n // Set listbox id so it can be used when calling getItemId later\n listData.set(state, {id: menuProps.id});\n\n // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).\n // When virtualized, the layout object will be passed in as a prop and override this.\n let delegate = useMemo(() =>\n keyboardDelegate ||\n new ListKeyboardDelegate(state.collection, state.disabledKeys, listBoxRef)\n , [keyboardDelegate, state.collection, state.disabledKeys, listBoxRef]);\n\n // Use useSelectableCollection to get the keyboard handlers to apply to the textfield\n let {collectionProps} = useSelectableCollection({\n selectionManager: state.selectionManager,\n keyboardDelegate: delegate,\n disallowTypeAhead: true,\n disallowEmptySelection: true,\n shouldFocusWrap,\n ref: inputRef,\n // Prevent item scroll behavior from being applied here, should be handled in the user's Popover + ListBox component\n isVirtualized: true\n });\n\n let router = useRouter();\n\n // For textfield specific keydown operations\n let onKeyDown = (e: BaseEvent<KeyboardEvent<any>>) => {\n switch (e.key) {\n case 'Enter':\n case 'Tab':\n // Prevent form submission if menu is open since we may be selecting a option\n if (state.isOpen && e.key === 'Enter') {\n e.preventDefault();\n }\n\n // If the focused item is a link, trigger opening it. Items that are links are not selectable.\n if (state.isOpen && state.selectionManager.focusedKey != null && state.selectionManager.isLink(state.selectionManager.focusedKey)) {\n if (e.key === 'Enter') {\n let item = listBoxRef.current.querySelector(`[data-key=\"${CSS.escape(state.selectionManager.focusedKey.toString())}\"]`);\n if (item instanceof HTMLAnchorElement) {\n let collectionItem = state.collection.getItem(state.selectionManager.focusedKey);\n router.open(item, e, collectionItem.props.href, collectionItem.props.routerOptions as RouterOptions);\n }\n }\n\n state.close();\n } else {\n state.commit();\n }\n break;\n case 'Escape':\n if (\n state.selectedKey !== null ||\n state.inputValue === '' ||\n props.allowsCustomValue\n ) {\n e.continuePropagation();\n }\n state.revert();\n break;\n case 'ArrowDown':\n state.open('first', 'manual');\n break;\n case 'ArrowUp':\n state.open('last', 'manual');\n break;\n case 'ArrowLeft':\n case 'ArrowRight':\n state.selectionManager.setFocusedKey(null);\n break;\n }\n };\n\n let onBlur = (e: FocusEvent<HTMLInputElement>) => {\n let blurFromButton = buttonRef?.current && buttonRef.current === e.relatedTarget;\n let blurIntoPopover = popoverRef.current?.contains(e.relatedTarget);\n // Ignore blur if focused moved to the button(if exists) or into the popover.\n if (blurFromButton || blurIntoPopover) {\n return;\n }\n\n if (props.onBlur) {\n props.onBlur(e);\n }\n\n state.setFocused(false);\n };\n\n let onFocus = (e: FocusEvent<HTMLInputElement>) => {\n if (state.isFocused) {\n return;\n }\n\n if (props.onFocus) {\n props.onFocus(e);\n }\n\n state.setFocused(true);\n };\n\n let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField({\n ...props,\n onChange: state.setInputValue,\n onKeyDown: !isReadOnly ? chain(state.isOpen && collectionProps.onKeyDown, onKeyDown, props.onKeyDown) : props.onKeyDown,\n onBlur,\n value: state.inputValue,\n onFocus,\n autoComplete: 'off',\n validate: undefined,\n [privateValidationStateProp]: state\n }, inputRef);\n\n // Press handlers for the ComboBox button\n let onPress = (e: PressEvent) => {\n if (e.pointerType === 'touch') {\n // Focus the input field in case it isn't focused yet\n inputRef.current.focus();\n state.toggle(null, 'manual');\n }\n };\n\n let onPressStart = (e: PressEvent) => {\n if (e.pointerType !== 'touch') {\n inputRef.current.focus();\n state.toggle((e.pointerType === 'keyboard' || e.pointerType === 'virtual') ? 'first' : null, 'manual');\n }\n };\n\n let triggerLabelProps = useLabels({\n id: menuTriggerProps.id,\n 'aria-label': stringFormatter.format('buttonLabel'),\n 'aria-labelledby': props['aria-labelledby'] || labelProps.id\n });\n\n let listBoxProps = useLabels({\n id: menuProps.id,\n 'aria-label': stringFormatter.format('listboxLabel'),\n 'aria-labelledby': props['aria-labelledby'] || labelProps.id\n });\n\n // If a touch happens on direct center of ComboBox input, might be virtual click from iPad so open ComboBox menu\n let lastEventTime = useRef(0);\n let onTouchEnd = (e: TouchEvent) => {\n if (isDisabled || isReadOnly) {\n return;\n }\n\n // Sometimes VoiceOver on iOS fires two touchend events in quick succession. Ignore the second one.\n if (e.timeStamp - lastEventTime.current < 500) {\n e.preventDefault();\n inputRef.current.focus();\n return;\n }\n\n let rect = (e.target as Element).getBoundingClientRect();\n let touch = e.changedTouches[0];\n\n let centerX = Math.ceil(rect.left + .5 * rect.width);\n let centerY = Math.ceil(rect.top + .5 * rect.height);\n\n if (touch.clientX === centerX && touch.clientY === centerY) {\n e.preventDefault();\n inputRef.current.focus();\n state.toggle(null, 'manual');\n\n lastEventTime.current = e.timeStamp;\n }\n };\n\n // VoiceOver has issues with announcing aria-activedescendant properly on change\n // (especially on iOS). We use a live region announcer to announce focus changes\n // manually. In addition, section titles are announced when navigating into a new section.\n let focusedItem = state.selectionManager.focusedKey != null && state.isOpen\n ? state.collection.getItem(state.selectionManager.focusedKey)\n : undefined;\n let sectionKey = focusedItem?.parentKey ?? null;\n let itemKey = state.selectionManager.focusedKey ?? null;\n let lastSection = useRef(sectionKey);\n let lastItem = useRef(itemKey);\n useEffect(() => {\n if (isAppleDevice() && focusedItem != null && itemKey !== lastItem.current) {\n let isSelected = state.selectionManager.isSelected(itemKey);\n let section = sectionKey != null ? state.collection.getItem(sectionKey) : null;\n let sectionTitle = section?.['aria-label'] || (typeof section?.rendered === 'string' ? section.rendered : '') || '';\n\n let announcement = stringFormatter.format('focusAnnouncement', {\n isGroupChange: section && sectionKey !== lastSection.current,\n groupTitle: sectionTitle,\n groupCount: section ? [...getChildNodes(section, state.collection)].length : 0,\n optionText: focusedItem['aria-label'] || focusedItem.textValue || '',\n isSelected\n });\n\n announce(announcement);\n }\n\n lastSection.current = sectionKey;\n lastItem.current = itemKey;\n });\n\n // Announce the number of available suggestions when it changes\n let optionCount = getItemCount(state.collection);\n let lastSize = useRef(optionCount);\n let lastOpen = useRef(state.isOpen);\n useEffect(() => {\n // Only announce the number of options available when the menu opens if there is no\n // focused item, otherwise screen readers will typically read e.g. \"1 of 6\".\n // The exception is VoiceOver since this isn't included in the message above.\n let didOpenWithoutFocusedItem =\n state.isOpen !== lastOpen.current &&\n (state.selectionManager.focusedKey == null || isAppleDevice());\n\n if (state.isOpen && (didOpenWithoutFocusedItem || optionCount !== lastSize.current)) {\n let announcement = stringFormatter.format('countAnnouncement', {optionCount});\n announce(announcement);\n }\n\n lastSize.current = optionCount;\n lastOpen.current = state.isOpen;\n });\n\n // Announce when a selection occurs for VoiceOver. Other screen readers typically do this automatically.\n let lastSelectedKey = useRef(state.selectedKey);\n useEffect(() => {\n if (isAppleDevice() && state.isFocused && state.selectedItem && state.selectedKey !== lastSelectedKey.current) {\n let optionText = state.selectedItem['aria-label'] || state.selectedItem.textValue || '';\n let announcement = stringFormatter.format('selectedAnnouncement', {optionText});\n announce(announcement);\n }\n\n lastSelectedKey.current = state.selectedKey;\n });\n\n useEffect(() => {\n if (state.isOpen) {\n return ariaHideOutside([inputRef.current, popoverRef.current]);\n }\n }, [state.isOpen, inputRef, popoverRef]);\n\n return {\n labelProps,\n buttonProps: {\n ...menuTriggerProps,\n ...triggerLabelProps,\n excludeFromTabOrder: true,\n onPress,\n onPressStart,\n isDisabled: isDisabled || isReadOnly\n },\n inputProps: mergeProps(inputProps, {\n role: 'combobox',\n 'aria-expanded': menuTriggerProps['aria-expanded'],\n 'aria-controls': state.isOpen ? menuProps.id : undefined,\n // TODO: readd proper logic for completionMode = complete (aria-autocomplete: both)\n 'aria-autocomplete': 'list',\n 'aria-activedescendant': focusedItem ? getItemId(state, focusedItem.key) : undefined,\n onTouchEnd,\n // This disable's iOS's autocorrect suggestions, since the combo box provides its own suggestions.\n autoCorrect: 'off',\n // This disable's the macOS Safari spell check auto corrections.\n spellCheck: 'false'\n }),\n listBoxProps: mergeProps(menuProps, listBoxProps, {\n autoFocus: state.focusStrategy,\n shouldUseVirtualFocus: true,\n shouldSelectOnPressUp: true,\n shouldFocusOnHover: true,\n linkBehavior: 'selection' as const\n }),\n descriptionProps,\n errorMessageProps,\n isInvalid,\n validationErrors,\n validationDetails\n };\n}\n"],"names":[],"version":3,"file":"useComboBox.main.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-aria/combobox/src/useComboBox.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {announce} from '@react-aria/live-announcer';\nimport {AriaButtonProps} from '@react-types/button';\nimport {AriaComboBoxProps} from '@react-types/combobox';\nimport {ariaHideOutside} from '@react-aria/overlays';\nimport {AriaListBoxOptions, getItemId, listData} from '@react-aria/listbox';\nimport {BaseEvent, DOMAttributes, KeyboardDelegate, PressEvent, RouterOptions, ValidationResult} from '@react-types/shared';\nimport {chain, isAppleDevice, mergeProps, useLabels, useRouter} from '@react-aria/utils';\nimport {ComboBoxState} from '@react-stately/combobox';\nimport {FocusEvent, InputHTMLAttributes, KeyboardEvent, RefObject, TouchEvent, useEffect, useMemo, useRef} from 'react';\nimport {getChildNodes, getItemCount} from '@react-stately/collections';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListKeyboardDelegate, useSelectableCollection} from '@react-aria/selection';\nimport {privateValidationStateProp} from '@react-stately/form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenuTrigger} from '@react-aria/menu';\nimport {useTextField} from '@react-aria/textfield';\n\nexport interface AriaComboBoxOptions<T> extends Omit<AriaComboBoxProps<T>, 'children'> {\n /** The ref for the input element. */\n inputRef: RefObject<HTMLInputElement>,\n /** The ref for the list box popover. */\n popoverRef: RefObject<Element>,\n /** The ref for the list box. */\n listBoxRef: RefObject<HTMLElement>,\n /** The ref for the optional list box popup trigger button. */\n buttonRef?: RefObject<Element>,\n /** An optional keyboard delegate implementation, to override the default. */\n keyboardDelegate?: KeyboardDelegate\n}\n\nexport interface ComboBoxAria<T> extends ValidationResult {\n /** Props for the label element. */\n labelProps: DOMAttributes,\n /** Props for the combo box input element. */\n inputProps: InputHTMLAttributes<HTMLInputElement>,\n /** Props for the list box, to be passed to [useListBox](useListBox.html). */\n listBoxProps: AriaListBoxOptions<T>,\n /** Props for the optional trigger button, to be passed to [useButton](useButton.html). */\n buttonProps: AriaButtonProps,\n /** Props for the combo box description element, if any. */\n descriptionProps: DOMAttributes,\n /** Props for the combo box error message element, if any. */\n errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a combo box component.\n * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.\n * @param props - Props for the combo box.\n * @param state - State for the select, as returned by `useComboBoxState`.\n */\nexport function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxState<T>): ComboBoxAria<T> {\n let {\n buttonRef,\n popoverRef,\n inputRef,\n listBoxRef,\n keyboardDelegate,\n // completionMode = 'suggest',\n shouldFocusWrap,\n isReadOnly,\n isDisabled\n } = props;\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/combobox');\n let {menuTriggerProps, menuProps} = useMenuTrigger<T>(\n {\n type: 'listbox',\n isDisabled: isDisabled || isReadOnly\n },\n state,\n buttonRef\n );\n\n // Set listbox id so it can be used when calling getItemId later\n listData.set(state, {id: menuProps.id});\n\n // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).\n // When virtualized, the layout object will be passed in as a prop and override this.\n let delegate = useMemo(() =>\n keyboardDelegate ||\n new ListKeyboardDelegate(state.collection, state.disabledKeys, listBoxRef)\n , [keyboardDelegate, state.collection, state.disabledKeys, listBoxRef]);\n\n // Use useSelectableCollection to get the keyboard handlers to apply to the textfield\n let {collectionProps} = useSelectableCollection({\n selectionManager: state.selectionManager,\n keyboardDelegate: delegate,\n disallowTypeAhead: true,\n disallowEmptySelection: true,\n shouldFocusWrap,\n ref: inputRef,\n // Prevent item scroll behavior from being applied here, should be handled in the user's Popover + ListBox component\n isVirtualized: true\n });\n\n let router = useRouter();\n\n // For textfield specific keydown operations\n let onKeyDown = (e: BaseEvent<KeyboardEvent<any>>) => {\n if (e.nativeEvent.isComposing) {\n return;\n }\n switch (e.key) {\n case 'Enter':\n case 'Tab':\n // Prevent form submission if menu is open since we may be selecting a option\n if (state.isOpen && e.key === 'Enter') {\n e.preventDefault();\n }\n\n // If the focused item is a link, trigger opening it. Items that are links are not selectable.\n if (state.isOpen && state.selectionManager.focusedKey != null && state.selectionManager.isLink(state.selectionManager.focusedKey)) {\n if (e.key === 'Enter') {\n let item = listBoxRef.current.querySelector(`[data-key=\"${CSS.escape(state.selectionManager.focusedKey.toString())}\"]`);\n if (item instanceof HTMLAnchorElement) {\n let collectionItem = state.collection.getItem(state.selectionManager.focusedKey);\n router.open(item, e, collectionItem.props.href, collectionItem.props.routerOptions as RouterOptions);\n }\n }\n\n state.close();\n } else {\n state.commit();\n }\n break;\n case 'Escape':\n if (\n state.selectedKey !== null ||\n state.inputValue === '' ||\n props.allowsCustomValue\n ) {\n e.continuePropagation();\n }\n state.revert();\n break;\n case 'ArrowDown':\n state.open('first', 'manual');\n break;\n case 'ArrowUp':\n state.open('last', 'manual');\n break;\n case 'ArrowLeft':\n case 'ArrowRight':\n state.selectionManager.setFocusedKey(null);\n break;\n }\n };\n\n let onBlur = (e: FocusEvent<HTMLInputElement>) => {\n let blurFromButton = buttonRef?.current && buttonRef.current === e.relatedTarget;\n let blurIntoPopover = popoverRef.current?.contains(e.relatedTarget);\n // Ignore blur if focused moved to the button(if exists) or into the popover.\n if (blurFromButton || blurIntoPopover) {\n return;\n }\n\n if (props.onBlur) {\n props.onBlur(e);\n }\n\n state.setFocused(false);\n };\n\n let onFocus = (e: FocusEvent<HTMLInputElement>) => {\n if (state.isFocused) {\n return;\n }\n\n if (props.onFocus) {\n props.onFocus(e);\n }\n\n state.setFocused(true);\n };\n\n let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField({\n ...props,\n onChange: state.setInputValue,\n onKeyDown: !isReadOnly ? chain(state.isOpen && collectionProps.onKeyDown, onKeyDown, props.onKeyDown) : props.onKeyDown,\n onBlur,\n value: state.inputValue,\n onFocus,\n autoComplete: 'off',\n validate: undefined,\n [privateValidationStateProp]: state\n }, inputRef);\n\n // Press handlers for the ComboBox button\n let onPress = (e: PressEvent) => {\n if (e.pointerType === 'touch') {\n // Focus the input field in case it isn't focused yet\n inputRef.current.focus();\n state.toggle(null, 'manual');\n }\n };\n\n let onPressStart = (e: PressEvent) => {\n if (e.pointerType !== 'touch') {\n inputRef.current.focus();\n state.toggle((e.pointerType === 'keyboard' || e.pointerType === 'virtual') ? 'first' : null, 'manual');\n }\n };\n\n let triggerLabelProps = useLabels({\n id: menuTriggerProps.id,\n 'aria-label': stringFormatter.format('buttonLabel'),\n 'aria-labelledby': props['aria-labelledby'] || labelProps.id\n });\n\n let listBoxProps = useLabels({\n id: menuProps.id,\n 'aria-label': stringFormatter.format('listboxLabel'),\n 'aria-labelledby': props['aria-labelledby'] || labelProps.id\n });\n\n // If a touch happens on direct center of ComboBox input, might be virtual click from iPad so open ComboBox menu\n let lastEventTime = useRef(0);\n let onTouchEnd = (e: TouchEvent) => {\n if (isDisabled || isReadOnly) {\n return;\n }\n\n // Sometimes VoiceOver on iOS fires two touchend events in quick succession. Ignore the second one.\n if (e.timeStamp - lastEventTime.current < 500) {\n e.preventDefault();\n inputRef.current.focus();\n return;\n }\n\n let rect = (e.target as Element).getBoundingClientRect();\n let touch = e.changedTouches[0];\n\n let centerX = Math.ceil(rect.left + .5 * rect.width);\n let centerY = Math.ceil(rect.top + .5 * rect.height);\n\n if (touch.clientX === centerX && touch.clientY === centerY) {\n e.preventDefault();\n inputRef.current.focus();\n state.toggle(null, 'manual');\n\n lastEventTime.current = e.timeStamp;\n }\n };\n\n // VoiceOver has issues with announcing aria-activedescendant properly on change\n // (especially on iOS). We use a live region announcer to announce focus changes\n // manually. In addition, section titles are announced when navigating into a new section.\n let focusedItem = state.selectionManager.focusedKey != null && state.isOpen\n ? state.collection.getItem(state.selectionManager.focusedKey)\n : undefined;\n let sectionKey = focusedItem?.parentKey ?? null;\n let itemKey = state.selectionManager.focusedKey ?? null;\n let lastSection = useRef(sectionKey);\n let lastItem = useRef(itemKey);\n useEffect(() => {\n if (isAppleDevice() && focusedItem != null && itemKey !== lastItem.current) {\n let isSelected = state.selectionManager.isSelected(itemKey);\n let section = sectionKey != null ? state.collection.getItem(sectionKey) : null;\n let sectionTitle = section?.['aria-label'] || (typeof section?.rendered === 'string' ? section.rendered : '') || '';\n\n let announcement = stringFormatter.format('focusAnnouncement', {\n isGroupChange: section && sectionKey !== lastSection.current,\n groupTitle: sectionTitle,\n groupCount: section ? [...getChildNodes(section, state.collection)].length : 0,\n optionText: focusedItem['aria-label'] || focusedItem.textValue || '',\n isSelected\n });\n\n announce(announcement);\n }\n\n lastSection.current = sectionKey;\n lastItem.current = itemKey;\n });\n\n // Announce the number of available suggestions when it changes\n let optionCount = getItemCount(state.collection);\n let lastSize = useRef(optionCount);\n let lastOpen = useRef(state.isOpen);\n useEffect(() => {\n // Only announce the number of options available when the menu opens if there is no\n // focused item, otherwise screen readers will typically read e.g. \"1 of 6\".\n // The exception is VoiceOver since this isn't included in the message above.\n let didOpenWithoutFocusedItem =\n state.isOpen !== lastOpen.current &&\n (state.selectionManager.focusedKey == null || isAppleDevice());\n\n if (state.isOpen && (didOpenWithoutFocusedItem || optionCount !== lastSize.current)) {\n let announcement = stringFormatter.format('countAnnouncement', {optionCount});\n announce(announcement);\n }\n\n lastSize.current = optionCount;\n lastOpen.current = state.isOpen;\n });\n\n // Announce when a selection occurs for VoiceOver. Other screen readers typically do this automatically.\n let lastSelectedKey = useRef(state.selectedKey);\n useEffect(() => {\n if (isAppleDevice() && state.isFocused && state.selectedItem && state.selectedKey !== lastSelectedKey.current) {\n let optionText = state.selectedItem['aria-label'] || state.selectedItem.textValue || '';\n let announcement = stringFormatter.format('selectedAnnouncement', {optionText});\n announce(announcement);\n }\n\n lastSelectedKey.current = state.selectedKey;\n });\n\n useEffect(() => {\n if (state.isOpen) {\n return ariaHideOutside([inputRef.current, popoverRef.current]);\n }\n }, [state.isOpen, inputRef, popoverRef]);\n\n return {\n labelProps,\n buttonProps: {\n ...menuTriggerProps,\n ...triggerLabelProps,\n excludeFromTabOrder: true,\n onPress,\n onPressStart,\n isDisabled: isDisabled || isReadOnly\n },\n inputProps: mergeProps(inputProps, {\n role: 'combobox',\n 'aria-expanded': menuTriggerProps['aria-expanded'],\n 'aria-controls': state.isOpen ? menuProps.id : undefined,\n // TODO: readd proper logic for completionMode = complete (aria-autocomplete: both)\n 'aria-autocomplete': 'list',\n 'aria-activedescendant': focusedItem ? getItemId(state, focusedItem.key) : undefined,\n onTouchEnd,\n // This disable's iOS's autocorrect suggestions, since the combo box provides its own suggestions.\n autoCorrect: 'off',\n // This disable's the macOS Safari spell check auto corrections.\n spellCheck: 'false'\n }),\n listBoxProps: mergeProps(menuProps, listBoxProps, {\n autoFocus: state.focusStrategy,\n shouldUseVirtualFocus: true,\n shouldSelectOnPressUp: true,\n shouldFocusOnHover: true,\n linkBehavior: 'selection' as const\n }),\n descriptionProps,\n errorMessageProps,\n isInvalid,\n validationErrors,\n validationDetails\n };\n}\n"],"names":[],"version":3,"file":"useComboBox.main.js.map"}
package/dist/useComboBox.mjs CHANGED
@@ -40,9 +40,9 @@ function $parcel$interopDefault(a) {
40
40
  function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
41
41
  let { buttonRef: buttonRef, popoverRef: popoverRef, inputRef: inputRef, listBoxRef: listBoxRef, keyboardDelegate: keyboardDelegate, shouldFocusWrap: // completionMode = 'suggest',
42
42
  shouldFocusWrap, isReadOnly: isReadOnly, isDisabled: isDisabled } = props;
43
- let stringFormatter = (0, $dShfP$useLocalizedStringFormatter)((0, ($parcel$interopDefault($dShfP$intlStringsmodulejs))), "@react-aria/combobox");
43
+ let stringFormatter = (0, $dShfP$useLocalizedStringFormatter)((0, ($parcel$interopDefault($dShfP$intlStringsmodulejs))), '@react-aria/combobox');
44
44
  let { menuTriggerProps: menuTriggerProps, menuProps: menuProps } = (0, $dShfP$useMenuTrigger)({
45
- type: "listbox",
45
+ type: 'listbox',
46
46
  isDisabled: isDisabled || isReadOnly
47
47
  }, state, buttonRef);
48
48
  // Set listbox id so it can be used when calling getItemId later
@@ -71,14 +71,15 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
71
71
  let router = (0, $dShfP$useRouter)();
72
72
  // For textfield specific keydown operations
73
73
  let onKeyDown = (e)=>{
74
+ if (e.nativeEvent.isComposing) return;
74
75
  switch(e.key){
75
- case "Enter":
76
- case "Tab":
76
+ case 'Enter':
77
+ case 'Tab':
77
78
  // Prevent form submission if menu is open since we may be selecting a option
78
- if (state.isOpen && e.key === "Enter") e.preventDefault();
79
+ if (state.isOpen && e.key === 'Enter') e.preventDefault();
79
80
  // If the focused item is a link, trigger opening it. Items that are links are not selectable.
80
81
  if (state.isOpen && state.selectionManager.focusedKey != null && state.selectionManager.isLink(state.selectionManager.focusedKey)) {
81
- if (e.key === "Enter") {
82
+ if (e.key === 'Enter') {
82
83
  let item = listBoxRef.current.querySelector(`[data-key="${CSS.escape(state.selectionManager.focusedKey.toString())}"]`);
83
84
  if (item instanceof HTMLAnchorElement) {
84
85
  let collectionItem = state.collection.getItem(state.selectionManager.focusedKey);
@@ -88,18 +89,18 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
88
89
  state.close();
89
90
  } else state.commit();
90
91
  break;
91
- case "Escape":
92
- if (state.selectedKey !== null || state.inputValue === "" || props.allowsCustomValue) e.continuePropagation();
92
+ case 'Escape':
93
+ if (state.selectedKey !== null || state.inputValue === '' || props.allowsCustomValue) e.continuePropagation();
93
94
  state.revert();
94
95
  break;
95
- case "ArrowDown":
96
- state.open("first", "manual");
96
+ case 'ArrowDown':
97
+ state.open('first', 'manual');
97
98
  break;
98
- case "ArrowUp":
99
- state.open("last", "manual");
99
+ case 'ArrowUp':
100
+ state.open('last', 'manual');
100
101
  break;
101
- case "ArrowLeft":
102
- case "ArrowRight":
102
+ case 'ArrowLeft':
103
+ case 'ArrowRight':
103
104
  state.selectionManager.setFocusedKey(null);
104
105
  break;
105
106
  }
@@ -126,33 +127,33 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
126
127
  onBlur: onBlur,
127
128
  value: state.inputValue,
128
129
  onFocus: onFocus,
129
- autoComplete: "off",
130
+ autoComplete: 'off',
130
131
  validate: undefined,
131
132
  [(0, $dShfP$privateValidationStateProp)]: state
132
133
  }, inputRef);
133
134
  // Press handlers for the ComboBox button
134
135
  let onPress = (e)=>{
135
- if (e.pointerType === "touch") {
136
+ if (e.pointerType === 'touch') {
136
137
  // Focus the input field in case it isn't focused yet
137
138
  inputRef.current.focus();
138
- state.toggle(null, "manual");
139
+ state.toggle(null, 'manual');
139
140
  }
140
141
  };
141
142
  let onPressStart = (e)=>{
142
- if (e.pointerType !== "touch") {
143
+ if (e.pointerType !== 'touch') {
143
144
  inputRef.current.focus();
144
- state.toggle(e.pointerType === "keyboard" || e.pointerType === "virtual" ? "first" : null, "manual");
145
+ state.toggle(e.pointerType === 'keyboard' || e.pointerType === 'virtual' ? 'first' : null, 'manual');
145
146
  }
146
147
  };
147
148
  let triggerLabelProps = (0, $dShfP$useLabels)({
148
149
  id: menuTriggerProps.id,
149
- "aria-label": stringFormatter.format("buttonLabel"),
150
- "aria-labelledby": props["aria-labelledby"] || labelProps.id
150
+ 'aria-label': stringFormatter.format('buttonLabel'),
151
+ 'aria-labelledby': props['aria-labelledby'] || labelProps.id
151
152
  });
152
153
  let listBoxProps = (0, $dShfP$useLabels)({
153
154
  id: menuProps.id,
154
- "aria-label": stringFormatter.format("listboxLabel"),
155
- "aria-labelledby": props["aria-labelledby"] || labelProps.id
155
+ 'aria-label': stringFormatter.format('listboxLabel'),
156
+ 'aria-labelledby': props['aria-labelledby'] || labelProps.id
156
157
  });
157
158
  // If a touch happens on direct center of ComboBox input, might be virtual click from iPad so open ComboBox menu
158
159
  let lastEventTime = (0, $dShfP$useRef)(0);
@@ -171,7 +172,7 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
171
172
  if (touch.clientX === centerX && touch.clientY === centerY) {
172
173
  e.preventDefault();
173
174
  inputRef.current.focus();
174
- state.toggle(null, "manual");
175
+ state.toggle(null, 'manual');
175
176
  lastEventTime.current = e.timeStamp;
176
177
  }
177
178
  };
@@ -189,14 +190,14 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
189
190
  if ((0, $dShfP$isAppleDevice)() && focusedItem != null && itemKey !== lastItem.current) {
190
191
  let isSelected = state.selectionManager.isSelected(itemKey);
191
192
  let section = sectionKey != null ? state.collection.getItem(sectionKey) : null;
192
- let sectionTitle = (section === null || section === void 0 ? void 0 : section["aria-label"]) || (typeof (section === null || section === void 0 ? void 0 : section.rendered) === "string" ? section.rendered : "") || "";
193
- let announcement = stringFormatter.format("focusAnnouncement", {
193
+ let sectionTitle = (section === null || section === void 0 ? void 0 : section['aria-label']) || (typeof (section === null || section === void 0 ? void 0 : section.rendered) === 'string' ? section.rendered : '') || '';
194
+ let announcement = stringFormatter.format('focusAnnouncement', {
194
195
  isGroupChange: section && sectionKey !== lastSection.current,
195
196
  groupTitle: sectionTitle,
196
197
  groupCount: section ? [
197
198
  ...(0, $dShfP$getChildNodes)(section, state.collection)
198
199
  ].length : 0,
199
- optionText: focusedItem["aria-label"] || focusedItem.textValue || "",
200
+ optionText: focusedItem['aria-label'] || focusedItem.textValue || '',
200
201
  isSelected: isSelected
201
202
  });
202
203
  (0, $dShfP$announce)(announcement);
@@ -214,7 +215,7 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
214
215
  // The exception is VoiceOver since this isn't included in the message above.
215
216
  let didOpenWithoutFocusedItem = state.isOpen !== lastOpen.current && (state.selectionManager.focusedKey == null || (0, $dShfP$isAppleDevice)());
216
217
  if (state.isOpen && (didOpenWithoutFocusedItem || optionCount !== lastSize.current)) {
217
- let announcement = stringFormatter.format("countAnnouncement", {
218
+ let announcement = stringFormatter.format('countAnnouncement', {
218
219
  optionCount: optionCount
219
220
  });
220
221
  (0, $dShfP$announce)(announcement);
@@ -226,8 +227,8 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
226
227
  let lastSelectedKey = (0, $dShfP$useRef)(state.selectedKey);
227
228
  (0, $dShfP$useEffect)(()=>{
228
229
  if ((0, $dShfP$isAppleDevice)() && state.isFocused && state.selectedItem && state.selectedKey !== lastSelectedKey.current) {
229
- let optionText = state.selectedItem["aria-label"] || state.selectedItem.textValue || "";
230
- let announcement = stringFormatter.format("selectedAnnouncement", {
230
+ let optionText = state.selectedItem['aria-label'] || state.selectedItem.textValue || '';
231
+ let announcement = stringFormatter.format('selectedAnnouncement', {
231
232
  optionText: optionText
232
233
  });
233
234
  (0, $dShfP$announce)(announcement);
@@ -255,24 +256,24 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
255
256
  isDisabled: isDisabled || isReadOnly
256
257
  },
257
258
  inputProps: (0, $dShfP$mergeProps)(inputProps, {
258
- role: "combobox",
259
- "aria-expanded": menuTriggerProps["aria-expanded"],
260
- "aria-controls": state.isOpen ? menuProps.id : undefined,
259
+ role: 'combobox',
260
+ 'aria-expanded': menuTriggerProps['aria-expanded'],
261
+ 'aria-controls': state.isOpen ? menuProps.id : undefined,
261
262
  // TODO: readd proper logic for completionMode = complete (aria-autocomplete: both)
262
- "aria-autocomplete": "list",
263
- "aria-activedescendant": focusedItem ? (0, $dShfP$getItemId)(state, focusedItem.key) : undefined,
263
+ 'aria-autocomplete': 'list',
264
+ 'aria-activedescendant': focusedItem ? (0, $dShfP$getItemId)(state, focusedItem.key) : undefined,
264
265
  onTouchEnd: onTouchEnd,
265
266
  // This disable's iOS's autocorrect suggestions, since the combo box provides its own suggestions.
266
- autoCorrect: "off",
267
+ autoCorrect: 'off',
267
268
  // This disable's the macOS Safari spell check auto corrections.
268
- spellCheck: "false"
269
+ spellCheck: 'false'
269
270
  }),
270
271
  listBoxProps: (0, $dShfP$mergeProps)(menuProps, listBoxProps, {
271
272
  autoFocus: state.focusStrategy,
272
273
  shouldUseVirtualFocus: true,
273
274
  shouldSelectOnPressUp: true,
274
275
  shouldFocusOnHover: true,
275
- linkBehavior: "selection"
276
+ linkBehavior: 'selection'
276
277
  }),
277
278
  descriptionProps: descriptionProps,
278
279
  errorMessageProps: errorMessageProps,
package/dist/useComboBox.module.js CHANGED
@@ -40,9 +40,9 @@ function $parcel$interopDefault(a) {
40
40
  function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
41
41
  let { buttonRef: buttonRef, popoverRef: popoverRef, inputRef: inputRef, listBoxRef: listBoxRef, keyboardDelegate: keyboardDelegate, shouldFocusWrap: // completionMode = 'suggest',
42
42
  shouldFocusWrap, isReadOnly: isReadOnly, isDisabled: isDisabled } = props;
43
- let stringFormatter = (0, $dShfP$useLocalizedStringFormatter)((0, ($parcel$interopDefault($dShfP$intlStringsmodulejs))), "@react-aria/combobox");
43
+ let stringFormatter = (0, $dShfP$useLocalizedStringFormatter)((0, ($parcel$interopDefault($dShfP$intlStringsmodulejs))), '@react-aria/combobox');
44
44
  let { menuTriggerProps: menuTriggerProps, menuProps: menuProps } = (0, $dShfP$useMenuTrigger)({
45
- type: "listbox",
45
+ type: 'listbox',
46
46
  isDisabled: isDisabled || isReadOnly
47
47
  }, state, buttonRef);
48
48
  // Set listbox id so it can be used when calling getItemId later
@@ -71,14 +71,15 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
71
71
  let router = (0, $dShfP$useRouter)();
72
72
  // For textfield specific keydown operations
73
73
  let onKeyDown = (e)=>{
74
+ if (e.nativeEvent.isComposing) return;
74
75
  switch(e.key){
75
- case "Enter":
76
- case "Tab":
76
+ case 'Enter':
77
+ case 'Tab':
77
78
  // Prevent form submission if menu is open since we may be selecting a option
78
- if (state.isOpen && e.key === "Enter") e.preventDefault();
79
+ if (state.isOpen && e.key === 'Enter') e.preventDefault();
79
80
  // If the focused item is a link, trigger opening it. Items that are links are not selectable.
80
81
  if (state.isOpen && state.selectionManager.focusedKey != null && state.selectionManager.isLink(state.selectionManager.focusedKey)) {
81
- if (e.key === "Enter") {
82
+ if (e.key === 'Enter') {
82
83
  let item = listBoxRef.current.querySelector(`[data-key="${CSS.escape(state.selectionManager.focusedKey.toString())}"]`);
83
84
  if (item instanceof HTMLAnchorElement) {
84
85
  let collectionItem = state.collection.getItem(state.selectionManager.focusedKey);
@@ -88,18 +89,18 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
88
89
  state.close();
89
90
  } else state.commit();
90
91
  break;
91
- case "Escape":
92
- if (state.selectedKey !== null || state.inputValue === "" || props.allowsCustomValue) e.continuePropagation();
92
+ case 'Escape':
93
+ if (state.selectedKey !== null || state.inputValue === '' || props.allowsCustomValue) e.continuePropagation();
93
94
  state.revert();
94
95
  break;
95
- case "ArrowDown":
96
- state.open("first", "manual");
96
+ case 'ArrowDown':
97
+ state.open('first', 'manual');
97
98
  break;
98
- case "ArrowUp":
99
- state.open("last", "manual");
99
+ case 'ArrowUp':
100
+ state.open('last', 'manual');
100
101
  break;
101
- case "ArrowLeft":
102
- case "ArrowRight":
102
+ case 'ArrowLeft':
103
+ case 'ArrowRight':
103
104
  state.selectionManager.setFocusedKey(null);
104
105
  break;
105
106
  }
@@ -126,33 +127,33 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
126
127
  onBlur: onBlur,
127
128
  value: state.inputValue,
128
129
  onFocus: onFocus,
129
- autoComplete: "off",
130
+ autoComplete: 'off',
130
131
  validate: undefined,
131
132
  [(0, $dShfP$privateValidationStateProp)]: state
132
133
  }, inputRef);
133
134
  // Press handlers for the ComboBox button
134
135
  let onPress = (e)=>{
135
- if (e.pointerType === "touch") {
136
+ if (e.pointerType === 'touch') {
136
137
  // Focus the input field in case it isn't focused yet
137
138
  inputRef.current.focus();
138
- state.toggle(null, "manual");
139
+ state.toggle(null, 'manual');
139
140
  }
140
141
  };
141
142
  let onPressStart = (e)=>{
142
- if (e.pointerType !== "touch") {
143
+ if (e.pointerType !== 'touch') {
143
144
  inputRef.current.focus();
144
- state.toggle(e.pointerType === "keyboard" || e.pointerType === "virtual" ? "first" : null, "manual");
145
+ state.toggle(e.pointerType === 'keyboard' || e.pointerType === 'virtual' ? 'first' : null, 'manual');
145
146
  }
146
147
  };
147
148
  let triggerLabelProps = (0, $dShfP$useLabels)({
148
149
  id: menuTriggerProps.id,
149
- "aria-label": stringFormatter.format("buttonLabel"),
150
- "aria-labelledby": props["aria-labelledby"] || labelProps.id
150
+ 'aria-label': stringFormatter.format('buttonLabel'),
151
+ 'aria-labelledby': props['aria-labelledby'] || labelProps.id
151
152
  });
152
153
  let listBoxProps = (0, $dShfP$useLabels)({
153
154
  id: menuProps.id,
154
- "aria-label": stringFormatter.format("listboxLabel"),
155
- "aria-labelledby": props["aria-labelledby"] || labelProps.id
155
+ 'aria-label': stringFormatter.format('listboxLabel'),
156
+ 'aria-labelledby': props['aria-labelledby'] || labelProps.id
156
157
  });
157
158
  // If a touch happens on direct center of ComboBox input, might be virtual click from iPad so open ComboBox menu
158
159
  let lastEventTime = (0, $dShfP$useRef)(0);
@@ -171,7 +172,7 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
171
172
  if (touch.clientX === centerX && touch.clientY === centerY) {
172
173
  e.preventDefault();
173
174
  inputRef.current.focus();
174
- state.toggle(null, "manual");
175
+ state.toggle(null, 'manual');
175
176
  lastEventTime.current = e.timeStamp;
176
177
  }
177
178
  };
@@ -189,14 +190,14 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
189
190
  if ((0, $dShfP$isAppleDevice)() && focusedItem != null && itemKey !== lastItem.current) {
190
191
  let isSelected = state.selectionManager.isSelected(itemKey);
191
192
  let section = sectionKey != null ? state.collection.getItem(sectionKey) : null;
192
- let sectionTitle = (section === null || section === void 0 ? void 0 : section["aria-label"]) || (typeof (section === null || section === void 0 ? void 0 : section.rendered) === "string" ? section.rendered : "") || "";
193
- let announcement = stringFormatter.format("focusAnnouncement", {
193
+ let sectionTitle = (section === null || section === void 0 ? void 0 : section['aria-label']) || (typeof (section === null || section === void 0 ? void 0 : section.rendered) === 'string' ? section.rendered : '') || '';
194
+ let announcement = stringFormatter.format('focusAnnouncement', {
194
195
  isGroupChange: section && sectionKey !== lastSection.current,
195
196
  groupTitle: sectionTitle,
196
197
  groupCount: section ? [
197
198
  ...(0, $dShfP$getChildNodes)(section, state.collection)
198
199
  ].length : 0,
199
- optionText: focusedItem["aria-label"] || focusedItem.textValue || "",
200
+ optionText: focusedItem['aria-label'] || focusedItem.textValue || '',
200
201
  isSelected: isSelected
201
202
  });
202
203
  (0, $dShfP$announce)(announcement);
@@ -214,7 +215,7 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
214
215
  // The exception is VoiceOver since this isn't included in the message above.
215
216
  let didOpenWithoutFocusedItem = state.isOpen !== lastOpen.current && (state.selectionManager.focusedKey == null || (0, $dShfP$isAppleDevice)());
216
217
  if (state.isOpen && (didOpenWithoutFocusedItem || optionCount !== lastSize.current)) {
217
- let announcement = stringFormatter.format("countAnnouncement", {
218
+ let announcement = stringFormatter.format('countAnnouncement', {
218
219
  optionCount: optionCount
219
220
  });
220
221
  (0, $dShfP$announce)(announcement);
@@ -226,8 +227,8 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
226
227
  let lastSelectedKey = (0, $dShfP$useRef)(state.selectedKey);
227
228
  (0, $dShfP$useEffect)(()=>{
228
229
  if ((0, $dShfP$isAppleDevice)() && state.isFocused && state.selectedItem && state.selectedKey !== lastSelectedKey.current) {
229
- let optionText = state.selectedItem["aria-label"] || state.selectedItem.textValue || "";
230
- let announcement = stringFormatter.format("selectedAnnouncement", {
230
+ let optionText = state.selectedItem['aria-label'] || state.selectedItem.textValue || '';
231
+ let announcement = stringFormatter.format('selectedAnnouncement', {
231
232
  optionText: optionText
232
233
  });
233
234
  (0, $dShfP$announce)(announcement);
@@ -255,24 +256,24 @@ function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
255
256
  isDisabled: isDisabled || isReadOnly
256
257
  },
257
258
  inputProps: (0, $dShfP$mergeProps)(inputProps, {
258
- role: "combobox",
259
- "aria-expanded": menuTriggerProps["aria-expanded"],
260
- "aria-controls": state.isOpen ? menuProps.id : undefined,
259
+ role: 'combobox',
260
+ 'aria-expanded': menuTriggerProps['aria-expanded'],
261
+ 'aria-controls': state.isOpen ? menuProps.id : undefined,
261
262
  // TODO: readd proper logic for completionMode = complete (aria-autocomplete: both)
262
- "aria-autocomplete": "list",
263
- "aria-activedescendant": focusedItem ? (0, $dShfP$getItemId)(state, focusedItem.key) : undefined,
263
+ 'aria-autocomplete': 'list',
264
+ 'aria-activedescendant': focusedItem ? (0, $dShfP$getItemId)(state, focusedItem.key) : undefined,
264
265
  onTouchEnd: onTouchEnd,
265
266
  // This disable's iOS's autocorrect suggestions, since the combo box provides its own suggestions.
266
- autoCorrect: "off",
267
+ autoCorrect: 'off',
267
268
  // This disable's the macOS Safari spell check auto corrections.
268
- spellCheck: "false"
269
+ spellCheck: 'false'
269
270
  }),
270
271
  listBoxProps: (0, $dShfP$mergeProps)(menuProps, listBoxProps, {
271
272
  autoFocus: state.focusStrategy,
272
273
  shouldUseVirtualFocus: true,
273
274
  shouldSelectOnPressUp: true,
274
275
  shouldFocusOnHover: true,
275
- linkBehavior: "selection"
276
+ linkBehavior: 'selection'
276
277
  }),
277
278
  descriptionProps: descriptionProps,
278
279
  errorMessageProps: errorMessageProps,
package/dist/useComboBox.module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-aria/combobox/src/useComboBox.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {announce} from '@react-aria/live-announcer';\nimport {AriaButtonProps} from '@react-types/button';\nimport {AriaComboBoxProps} from '@react-types/combobox';\nimport {ariaHideOutside} from '@react-aria/overlays';\nimport {AriaListBoxOptions, getItemId, listData} from '@react-aria/listbox';\nimport {BaseEvent, DOMAttributes, KeyboardDelegate, PressEvent, RouterOptions, ValidationResult} from '@react-types/shared';\nimport {chain, isAppleDevice, mergeProps, useLabels, useRouter} from '@react-aria/utils';\nimport {ComboBoxState} from '@react-stately/combobox';\nimport {FocusEvent, InputHTMLAttributes, KeyboardEvent, RefObject, TouchEvent, useEffect, useMemo, useRef} from 'react';\nimport {getChildNodes, getItemCount} from '@react-stately/collections';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListKeyboardDelegate, useSelectableCollection} from '@react-aria/selection';\nimport {privateValidationStateProp} from '@react-stately/form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenuTrigger} from '@react-aria/menu';\nimport {useTextField} from '@react-aria/textfield';\n\nexport interface AriaComboBoxOptions<T> extends Omit<AriaComboBoxProps<T>, 'children'> {\n /** The ref for the input element. */\n inputRef: RefObject<HTMLInputElement>,\n /** The ref for the list box popover. */\n popoverRef: RefObject<Element>,\n /** The ref for the list box. */\n listBoxRef: RefObject<HTMLElement>,\n /** The ref for the optional list box popup trigger button. */\n buttonRef?: RefObject<Element>,\n /** An optional keyboard delegate implementation, to override the default. */\n keyboardDelegate?: KeyboardDelegate\n}\n\nexport interface ComboBoxAria<T> extends ValidationResult {\n /** Props for the label element. */\n labelProps: DOMAttributes,\n /** Props for the combo box input element. */\n inputProps: InputHTMLAttributes<HTMLInputElement>,\n /** Props for the list box, to be passed to [useListBox](useListBox.html). */\n listBoxProps: AriaListBoxOptions<T>,\n /** Props for the optional trigger button, to be passed to [useButton](useButton.html). */\n buttonProps: AriaButtonProps,\n /** Props for the combo box description element, if any. */\n descriptionProps: DOMAttributes,\n /** Props for the combo box error message element, if any. */\n errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a combo box component.\n * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.\n * @param props - Props for the combo box.\n * @param state - State for the select, as returned by `useComboBoxState`.\n */\nexport function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxState<T>): ComboBoxAria<T> {\n let {\n buttonRef,\n popoverRef,\n inputRef,\n listBoxRef,\n keyboardDelegate,\n // completionMode = 'suggest',\n shouldFocusWrap,\n isReadOnly,\n isDisabled\n } = props;\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/combobox');\n let {menuTriggerProps, menuProps} = useMenuTrigger<T>(\n {\n type: 'listbox',\n isDisabled: isDisabled || isReadOnly\n },\n state,\n buttonRef\n );\n\n // Set listbox id so it can be used when calling getItemId later\n listData.set(state, {id: menuProps.id});\n\n // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).\n // When virtualized, the layout object will be passed in as a prop and override this.\n let delegate = useMemo(() =>\n keyboardDelegate ||\n new ListKeyboardDelegate(state.collection, state.disabledKeys, listBoxRef)\n , [keyboardDelegate, state.collection, state.disabledKeys, listBoxRef]);\n\n // Use useSelectableCollection to get the keyboard handlers to apply to the textfield\n let {collectionProps} = useSelectableCollection({\n selectionManager: state.selectionManager,\n keyboardDelegate: delegate,\n disallowTypeAhead: true,\n disallowEmptySelection: true,\n shouldFocusWrap,\n ref: inputRef,\n // Prevent item scroll behavior from being applied here, should be handled in the user's Popover + ListBox component\n isVirtualized: true\n });\n\n let router = useRouter();\n\n // For textfield specific keydown operations\n let onKeyDown = (e: BaseEvent<KeyboardEvent<any>>) => {\n switch (e.key) {\n case 'Enter':\n case 'Tab':\n // Prevent form submission if menu is open since we may be selecting a option\n if (state.isOpen && e.key === 'Enter') {\n e.preventDefault();\n }\n\n // If the focused item is a link, trigger opening it. Items that are links are not selectable.\n if (state.isOpen && state.selectionManager.focusedKey != null && state.selectionManager.isLink(state.selectionManager.focusedKey)) {\n if (e.key === 'Enter') {\n let item = listBoxRef.current.querySelector(`[data-key=\"${CSS.escape(state.selectionManager.focusedKey.toString())}\"]`);\n if (item instanceof HTMLAnchorElement) {\n let collectionItem = state.collection.getItem(state.selectionManager.focusedKey);\n router.open(item, e, collectionItem.props.href, collectionItem.props.routerOptions as RouterOptions);\n }\n }\n\n state.close();\n } else {\n state.commit();\n }\n break;\n case 'Escape':\n if (\n state.selectedKey !== null ||\n state.inputValue === '' ||\n props.allowsCustomValue\n ) {\n e.continuePropagation();\n }\n state.revert();\n break;\n case 'ArrowDown':\n state.open('first', 'manual');\n break;\n case 'ArrowUp':\n state.open('last', 'manual');\n break;\n case 'ArrowLeft':\n case 'ArrowRight':\n state.selectionManager.setFocusedKey(null);\n break;\n }\n };\n\n let onBlur = (e: FocusEvent<HTMLInputElement>) => {\n let blurFromButton = buttonRef?.current && buttonRef.current === e.relatedTarget;\n let blurIntoPopover = popoverRef.current?.contains(e.relatedTarget);\n // Ignore blur if focused moved to the button(if exists) or into the popover.\n if (blurFromButton || blurIntoPopover) {\n return;\n }\n\n if (props.onBlur) {\n props.onBlur(e);\n }\n\n state.setFocused(false);\n };\n\n let onFocus = (e: FocusEvent<HTMLInputElement>) => {\n if (state.isFocused) {\n return;\n }\n\n if (props.onFocus) {\n props.onFocus(e);\n }\n\n state.setFocused(true);\n };\n\n let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField({\n ...props,\n onChange: state.setInputValue,\n onKeyDown: !isReadOnly ? chain(state.isOpen && collectionProps.onKeyDown, onKeyDown, props.onKeyDown) : props.onKeyDown,\n onBlur,\n value: state.inputValue,\n onFocus,\n autoComplete: 'off',\n validate: undefined,\n [privateValidationStateProp]: state\n }, inputRef);\n\n // Press handlers for the ComboBox button\n let onPress = (e: PressEvent) => {\n if (e.pointerType === 'touch') {\n // Focus the input field in case it isn't focused yet\n inputRef.current.focus();\n state.toggle(null, 'manual');\n }\n };\n\n let onPressStart = (e: PressEvent) => {\n if (e.pointerType !== 'touch') {\n inputRef.current.focus();\n state.toggle((e.pointerType === 'keyboard' || e.pointerType === 'virtual') ? 'first' : null, 'manual');\n }\n };\n\n let triggerLabelProps = useLabels({\n id: menuTriggerProps.id,\n 'aria-label': stringFormatter.format('buttonLabel'),\n 'aria-labelledby': props['aria-labelledby'] || labelProps.id\n });\n\n let listBoxProps = useLabels({\n id: menuProps.id,\n 'aria-label': stringFormatter.format('listboxLabel'),\n 'aria-labelledby': props['aria-labelledby'] || labelProps.id\n });\n\n // If a touch happens on direct center of ComboBox input, might be virtual click from iPad so open ComboBox menu\n let lastEventTime = useRef(0);\n let onTouchEnd = (e: TouchEvent) => {\n if (isDisabled || isReadOnly) {\n return;\n }\n\n // Sometimes VoiceOver on iOS fires two touchend events in quick succession. Ignore the second one.\n if (e.timeStamp - lastEventTime.current < 500) {\n e.preventDefault();\n inputRef.current.focus();\n return;\n }\n\n let rect = (e.target as Element).getBoundingClientRect();\n let touch = e.changedTouches[0];\n\n let centerX = Math.ceil(rect.left + .5 * rect.width);\n let centerY = Math.ceil(rect.top + .5 * rect.height);\n\n if (touch.clientX === centerX && touch.clientY === centerY) {\n e.preventDefault();\n inputRef.current.focus();\n state.toggle(null, 'manual');\n\n lastEventTime.current = e.timeStamp;\n }\n };\n\n // VoiceOver has issues with announcing aria-activedescendant properly on change\n // (especially on iOS). We use a live region announcer to announce focus changes\n // manually. In addition, section titles are announced when navigating into a new section.\n let focusedItem = state.selectionManager.focusedKey != null && state.isOpen\n ? state.collection.getItem(state.selectionManager.focusedKey)\n : undefined;\n let sectionKey = focusedItem?.parentKey ?? null;\n let itemKey = state.selectionManager.focusedKey ?? null;\n let lastSection = useRef(sectionKey);\n let lastItem = useRef(itemKey);\n useEffect(() => {\n if (isAppleDevice() && focusedItem != null && itemKey !== lastItem.current) {\n let isSelected = state.selectionManager.isSelected(itemKey);\n let section = sectionKey != null ? state.collection.getItem(sectionKey) : null;\n let sectionTitle = section?.['aria-label'] || (typeof section?.rendered === 'string' ? section.rendered : '') || '';\n\n let announcement = stringFormatter.format('focusAnnouncement', {\n isGroupChange: section && sectionKey !== lastSection.current,\n groupTitle: sectionTitle,\n groupCount: section ? [...getChildNodes(section, state.collection)].length : 0,\n optionText: focusedItem['aria-label'] || focusedItem.textValue || '',\n isSelected\n });\n\n announce(announcement);\n }\n\n lastSection.current = sectionKey;\n lastItem.current = itemKey;\n });\n\n // Announce the number of available suggestions when it changes\n let optionCount = getItemCount(state.collection);\n let lastSize = useRef(optionCount);\n let lastOpen = useRef(state.isOpen);\n useEffect(() => {\n // Only announce the number of options available when the menu opens if there is no\n // focused item, otherwise screen readers will typically read e.g. \"1 of 6\".\n // The exception is VoiceOver since this isn't included in the message above.\n let didOpenWithoutFocusedItem =\n state.isOpen !== lastOpen.current &&\n (state.selectionManager.focusedKey == null || isAppleDevice());\n\n if (state.isOpen && (didOpenWithoutFocusedItem || optionCount !== lastSize.current)) {\n let announcement = stringFormatter.format('countAnnouncement', {optionCount});\n announce(announcement);\n }\n\n lastSize.current = optionCount;\n lastOpen.current = state.isOpen;\n });\n\n // Announce when a selection occurs for VoiceOver. Other screen readers typically do this automatically.\n let lastSelectedKey = useRef(state.selectedKey);\n useEffect(() => {\n if (isAppleDevice() && state.isFocused && state.selectedItem && state.selectedKey !== lastSelectedKey.current) {\n let optionText = state.selectedItem['aria-label'] || state.selectedItem.textValue || '';\n let announcement = stringFormatter.format('selectedAnnouncement', {optionText});\n announce(announcement);\n }\n\n lastSelectedKey.current = state.selectedKey;\n });\n\n useEffect(() => {\n if (state.isOpen) {\n return ariaHideOutside([inputRef.current, popoverRef.current]);\n }\n }, [state.isOpen, inputRef, popoverRef]);\n\n return {\n labelProps,\n buttonProps: {\n ...menuTriggerProps,\n ...triggerLabelProps,\n excludeFromTabOrder: true,\n onPress,\n onPressStart,\n isDisabled: isDisabled || isReadOnly\n },\n inputProps: mergeProps(inputProps, {\n role: 'combobox',\n 'aria-expanded': menuTriggerProps['aria-expanded'],\n 'aria-controls': state.isOpen ? menuProps.id : undefined,\n // TODO: readd proper logic for completionMode = complete (aria-autocomplete: both)\n 'aria-autocomplete': 'list',\n 'aria-activedescendant': focusedItem ? getItemId(state, focusedItem.key) : undefined,\n onTouchEnd,\n // This disable's iOS's autocorrect suggestions, since the combo box provides its own suggestions.\n autoCorrect: 'off',\n // This disable's the macOS Safari spell check auto corrections.\n spellCheck: 'false'\n }),\n listBoxProps: mergeProps(menuProps, listBoxProps, {\n autoFocus: state.focusStrategy,\n shouldUseVirtualFocus: true,\n shouldSelectOnPressUp: true,\n shouldFocusOnHover: true,\n linkBehavior: 'selection' as const\n }),\n descriptionProps,\n errorMessageProps,\n isInvalid,\n validationErrors,\n validationDetails\n };\n}\n"],"names":[],"version":3,"file":"useComboBox.module.js.map"}
1
+ {"mappings":"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","sources":["packages/@react-aria/combobox/src/useComboBox.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {announce} from '@react-aria/live-announcer';\nimport {AriaButtonProps} from '@react-types/button';\nimport {AriaComboBoxProps} from '@react-types/combobox';\nimport {ariaHideOutside} from '@react-aria/overlays';\nimport {AriaListBoxOptions, getItemId, listData} from '@react-aria/listbox';\nimport {BaseEvent, DOMAttributes, KeyboardDelegate, PressEvent, RouterOptions, ValidationResult} from '@react-types/shared';\nimport {chain, isAppleDevice, mergeProps, useLabels, useRouter} from '@react-aria/utils';\nimport {ComboBoxState} from '@react-stately/combobox';\nimport {FocusEvent, InputHTMLAttributes, KeyboardEvent, RefObject, TouchEvent, useEffect, useMemo, useRef} from 'react';\nimport {getChildNodes, getItemCount} from '@react-stately/collections';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListKeyboardDelegate, useSelectableCollection} from '@react-aria/selection';\nimport {privateValidationStateProp} from '@react-stately/form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMenuTrigger} from '@react-aria/menu';\nimport {useTextField} from '@react-aria/textfield';\n\nexport interface AriaComboBoxOptions<T> extends Omit<AriaComboBoxProps<T>, 'children'> {\n /** The ref for the input element. */\n inputRef: RefObject<HTMLInputElement>,\n /** The ref for the list box popover. */\n popoverRef: RefObject<Element>,\n /** The ref for the list box. */\n listBoxRef: RefObject<HTMLElement>,\n /** The ref for the optional list box popup trigger button. */\n buttonRef?: RefObject<Element>,\n /** An optional keyboard delegate implementation, to override the default. */\n keyboardDelegate?: KeyboardDelegate\n}\n\nexport interface ComboBoxAria<T> extends ValidationResult {\n /** Props for the label element. */\n labelProps: DOMAttributes,\n /** Props for the combo box input element. */\n inputProps: InputHTMLAttributes<HTMLInputElement>,\n /** Props for the list box, to be passed to [useListBox](useListBox.html). */\n listBoxProps: AriaListBoxOptions<T>,\n /** Props for the optional trigger button, to be passed to [useButton](useButton.html). */\n buttonProps: AriaButtonProps,\n /** Props for the combo box description element, if any. */\n descriptionProps: DOMAttributes,\n /** Props for the combo box error message element, if any. */\n errorMessageProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a combo box component.\n * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.\n * @param props - Props for the combo box.\n * @param state - State for the select, as returned by `useComboBoxState`.\n */\nexport function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxState<T>): ComboBoxAria<T> {\n let {\n buttonRef,\n popoverRef,\n inputRef,\n listBoxRef,\n keyboardDelegate,\n // completionMode = 'suggest',\n shouldFocusWrap,\n isReadOnly,\n isDisabled\n } = props;\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/combobox');\n let {menuTriggerProps, menuProps} = useMenuTrigger<T>(\n {\n type: 'listbox',\n isDisabled: isDisabled || isReadOnly\n },\n state,\n buttonRef\n );\n\n // Set listbox id so it can be used when calling getItemId later\n listData.set(state, {id: menuProps.id});\n\n // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).\n // When virtualized, the layout object will be passed in as a prop and override this.\n let delegate = useMemo(() =>\n keyboardDelegate ||\n new ListKeyboardDelegate(state.collection, state.disabledKeys, listBoxRef)\n , [keyboardDelegate, state.collection, state.disabledKeys, listBoxRef]);\n\n // Use useSelectableCollection to get the keyboard handlers to apply to the textfield\n let {collectionProps} = useSelectableCollection({\n selectionManager: state.selectionManager,\n keyboardDelegate: delegate,\n disallowTypeAhead: true,\n disallowEmptySelection: true,\n shouldFocusWrap,\n ref: inputRef,\n // Prevent item scroll behavior from being applied here, should be handled in the user's Popover + ListBox component\n isVirtualized: true\n });\n\n let router = useRouter();\n\n // For textfield specific keydown operations\n let onKeyDown = (e: BaseEvent<KeyboardEvent<any>>) => {\n if (e.nativeEvent.isComposing) {\n return;\n }\n switch (e.key) {\n case 'Enter':\n case 'Tab':\n // Prevent form submission if menu is open since we may be selecting a option\n if (state.isOpen && e.key === 'Enter') {\n e.preventDefault();\n }\n\n // If the focused item is a link, trigger opening it. Items that are links are not selectable.\n if (state.isOpen && state.selectionManager.focusedKey != null && state.selectionManager.isLink(state.selectionManager.focusedKey)) {\n if (e.key === 'Enter') {\n let item = listBoxRef.current.querySelector(`[data-key=\"${CSS.escape(state.selectionManager.focusedKey.toString())}\"]`);\n if (item instanceof HTMLAnchorElement) {\n let collectionItem = state.collection.getItem(state.selectionManager.focusedKey);\n router.open(item, e, collectionItem.props.href, collectionItem.props.routerOptions as RouterOptions);\n }\n }\n\n state.close();\n } else {\n state.commit();\n }\n break;\n case 'Escape':\n if (\n state.selectedKey !== null ||\n state.inputValue === '' ||\n props.allowsCustomValue\n ) {\n e.continuePropagation();\n }\n state.revert();\n break;\n case 'ArrowDown':\n state.open('first', 'manual');\n break;\n case 'ArrowUp':\n state.open('last', 'manual');\n break;\n case 'ArrowLeft':\n case 'ArrowRight':\n state.selectionManager.setFocusedKey(null);\n break;\n }\n };\n\n let onBlur = (e: FocusEvent<HTMLInputElement>) => {\n let blurFromButton = buttonRef?.current && buttonRef.current === e.relatedTarget;\n let blurIntoPopover = popoverRef.current?.contains(e.relatedTarget);\n // Ignore blur if focused moved to the button(if exists) or into the popover.\n if (blurFromButton || blurIntoPopover) {\n return;\n }\n\n if (props.onBlur) {\n props.onBlur(e);\n }\n\n state.setFocused(false);\n };\n\n let onFocus = (e: FocusEvent<HTMLInputElement>) => {\n if (state.isFocused) {\n return;\n }\n\n if (props.onFocus) {\n props.onFocus(e);\n }\n\n state.setFocused(true);\n };\n\n let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField({\n ...props,\n onChange: state.setInputValue,\n onKeyDown: !isReadOnly ? chain(state.isOpen && collectionProps.onKeyDown, onKeyDown, props.onKeyDown) : props.onKeyDown,\n onBlur,\n value: state.inputValue,\n onFocus,\n autoComplete: 'off',\n validate: undefined,\n [privateValidationStateProp]: state\n }, inputRef);\n\n // Press handlers for the ComboBox button\n let onPress = (e: PressEvent) => {\n if (e.pointerType === 'touch') {\n // Focus the input field in case it isn't focused yet\n inputRef.current.focus();\n state.toggle(null, 'manual');\n }\n };\n\n let onPressStart = (e: PressEvent) => {\n if (e.pointerType !== 'touch') {\n inputRef.current.focus();\n state.toggle((e.pointerType === 'keyboard' || e.pointerType === 'virtual') ? 'first' : null, 'manual');\n }\n };\n\n let triggerLabelProps = useLabels({\n id: menuTriggerProps.id,\n 'aria-label': stringFormatter.format('buttonLabel'),\n 'aria-labelledby': props['aria-labelledby'] || labelProps.id\n });\n\n let listBoxProps = useLabels({\n id: menuProps.id,\n 'aria-label': stringFormatter.format('listboxLabel'),\n 'aria-labelledby': props['aria-labelledby'] || labelProps.id\n });\n\n // If a touch happens on direct center of ComboBox input, might be virtual click from iPad so open ComboBox menu\n let lastEventTime = useRef(0);\n let onTouchEnd = (e: TouchEvent) => {\n if (isDisabled || isReadOnly) {\n return;\n }\n\n // Sometimes VoiceOver on iOS fires two touchend events in quick succession. Ignore the second one.\n if (e.timeStamp - lastEventTime.current < 500) {\n e.preventDefault();\n inputRef.current.focus();\n return;\n }\n\n let rect = (e.target as Element).getBoundingClientRect();\n let touch = e.changedTouches[0];\n\n let centerX = Math.ceil(rect.left + .5 * rect.width);\n let centerY = Math.ceil(rect.top + .5 * rect.height);\n\n if (touch.clientX === centerX && touch.clientY === centerY) {\n e.preventDefault();\n inputRef.current.focus();\n state.toggle(null, 'manual');\n\n lastEventTime.current = e.timeStamp;\n }\n };\n\n // VoiceOver has issues with announcing aria-activedescendant properly on change\n // (especially on iOS). We use a live region announcer to announce focus changes\n // manually. In addition, section titles are announced when navigating into a new section.\n let focusedItem = state.selectionManager.focusedKey != null && state.isOpen\n ? state.collection.getItem(state.selectionManager.focusedKey)\n : undefined;\n let sectionKey = focusedItem?.parentKey ?? null;\n let itemKey = state.selectionManager.focusedKey ?? null;\n let lastSection = useRef(sectionKey);\n let lastItem = useRef(itemKey);\n useEffect(() => {\n if (isAppleDevice() && focusedItem != null && itemKey !== lastItem.current) {\n let isSelected = state.selectionManager.isSelected(itemKey);\n let section = sectionKey != null ? state.collection.getItem(sectionKey) : null;\n let sectionTitle = section?.['aria-label'] || (typeof section?.rendered === 'string' ? section.rendered : '') || '';\n\n let announcement = stringFormatter.format('focusAnnouncement', {\n isGroupChange: section && sectionKey !== lastSection.current,\n groupTitle: sectionTitle,\n groupCount: section ? [...getChildNodes(section, state.collection)].length : 0,\n optionText: focusedItem['aria-label'] || focusedItem.textValue || '',\n isSelected\n });\n\n announce(announcement);\n }\n\n lastSection.current = sectionKey;\n lastItem.current = itemKey;\n });\n\n // Announce the number of available suggestions when it changes\n let optionCount = getItemCount(state.collection);\n let lastSize = useRef(optionCount);\n let lastOpen = useRef(state.isOpen);\n useEffect(() => {\n // Only announce the number of options available when the menu opens if there is no\n // focused item, otherwise screen readers will typically read e.g. \"1 of 6\".\n // The exception is VoiceOver since this isn't included in the message above.\n let didOpenWithoutFocusedItem =\n state.isOpen !== lastOpen.current &&\n (state.selectionManager.focusedKey == null || isAppleDevice());\n\n if (state.isOpen && (didOpenWithoutFocusedItem || optionCount !== lastSize.current)) {\n let announcement = stringFormatter.format('countAnnouncement', {optionCount});\n announce(announcement);\n }\n\n lastSize.current = optionCount;\n lastOpen.current = state.isOpen;\n });\n\n // Announce when a selection occurs for VoiceOver. Other screen readers typically do this automatically.\n let lastSelectedKey = useRef(state.selectedKey);\n useEffect(() => {\n if (isAppleDevice() && state.isFocused && state.selectedItem && state.selectedKey !== lastSelectedKey.current) {\n let optionText = state.selectedItem['aria-label'] || state.selectedItem.textValue || '';\n let announcement = stringFormatter.format('selectedAnnouncement', {optionText});\n announce(announcement);\n }\n\n lastSelectedKey.current = state.selectedKey;\n });\n\n useEffect(() => {\n if (state.isOpen) {\n return ariaHideOutside([inputRef.current, popoverRef.current]);\n }\n }, [state.isOpen, inputRef, popoverRef]);\n\n return {\n labelProps,\n buttonProps: {\n ...menuTriggerProps,\n ...triggerLabelProps,\n excludeFromTabOrder: true,\n onPress,\n onPressStart,\n isDisabled: isDisabled || isReadOnly\n },\n inputProps: mergeProps(inputProps, {\n role: 'combobox',\n 'aria-expanded': menuTriggerProps['aria-expanded'],\n 'aria-controls': state.isOpen ? menuProps.id : undefined,\n // TODO: readd proper logic for completionMode = complete (aria-autocomplete: both)\n 'aria-autocomplete': 'list',\n 'aria-activedescendant': focusedItem ? getItemId(state, focusedItem.key) : undefined,\n onTouchEnd,\n // This disable's iOS's autocorrect suggestions, since the combo box provides its own suggestions.\n autoCorrect: 'off',\n // This disable's the macOS Safari spell check auto corrections.\n spellCheck: 'false'\n }),\n listBoxProps: mergeProps(menuProps, listBoxProps, {\n autoFocus: state.focusStrategy,\n shouldUseVirtualFocus: true,\n shouldSelectOnPressUp: true,\n shouldFocusOnHover: true,\n linkBehavior: 'selection' as const\n }),\n descriptionProps,\n errorMessageProps,\n isInvalid,\n validationErrors,\n validationDetails\n };\n}\n"],"names":[],"version":3,"file":"useComboBox.module.js.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-aria/combobox",
3
- "version": "3.9.1-nightly.4624+d80999e89",
3
+ "version": "3.9.2-nightly.4629+c34886769",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -22,20 +22,20 @@
22
22
  "url": "https://github.com/adobe/react-spectrum"
23
23
  },
24
24
  "dependencies": {
25
- "@react-aria/i18n": "3.0.0-nightly.2912+d80999e89",
26
- "@react-aria/listbox": "3.12.1-nightly.4624+d80999e89",
27
- "@react-aria/live-announcer": "3.0.0-nightly.2912+d80999e89",
28
- "@react-aria/menu": "3.14.1-nightly.4624+d80999e89",
29
- "@react-aria/overlays": "3.0.0-nightly.2912+d80999e89",
30
- "@react-aria/selection": "3.0.0-nightly.2912+d80999e89",
31
- "@react-aria/textfield": "3.0.0-nightly.2912+d80999e89",
32
- "@react-aria/utils": "3.0.0-nightly.2912+d80999e89",
33
- "@react-stately/collections": "3.0.0-nightly.2912+d80999e89",
34
- "@react-stately/combobox": "3.8.4-nightly.4624+d80999e89",
35
- "@react-stately/form": "3.0.3-nightly.4624+d80999e89",
36
- "@react-types/button": "3.9.4-nightly.4624+d80999e89",
37
- "@react-types/combobox": "3.11.1-nightly.4624+d80999e89",
38
- "@react-types/shared": "3.0.0-nightly.2912+d80999e89",
25
+ "@react-aria/i18n": "3.0.0-nightly.2917+c34886769",
26
+ "@react-aria/listbox": "3.12.2-nightly.4629+c34886769",
27
+ "@react-aria/live-announcer": "3.0.0-nightly.2917+c34886769",
28
+ "@react-aria/menu": "3.14.2-nightly.4629+c34886769",
29
+ "@react-aria/overlays": "3.0.0-nightly.2917+c34886769",
30
+ "@react-aria/selection": "3.0.0-nightly.2917+c34886769",
31
+ "@react-aria/textfield": "3.0.0-nightly.2917+c34886769",
32
+ "@react-aria/utils": "3.0.0-nightly.2917+c34886769",
33
+ "@react-stately/collections": "3.0.0-nightly.2917+c34886769",
34
+ "@react-stately/combobox": "3.8.5-nightly.4629+c34886769",
35
+ "@react-stately/form": "3.0.4-nightly.4629+c34886769",
36
+ "@react-types/button": "3.9.5-nightly.4629+c34886769",
37
+ "@react-types/combobox": "3.11.2-nightly.4629+c34886769",
38
+ "@react-types/shared": "3.0.0-nightly.2917+c34886769",
39
39
  "@swc/helpers": "^0.5.0"
40
40
  },
41
41
  "peerDependencies": {
@@ -45,5 +45,5 @@
45
45
  "publishConfig": {
46
46
  "access": "public"
47
47
  },
48
- "gitHead": "d80999e897b4d4db9fcfb4e9b8fcdc9fdd700882"
48
+ "gitHead": "c34886769d3e69bb56553a02eead6a0fd877e754"
49
49
  }
package/src/useComboBox.ts CHANGED
@@ -111,6 +111,9 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
111
111
 
112
112
  // For textfield specific keydown operations
113
113
  let onKeyDown = (e: BaseEvent<KeyboardEvent<any>>) => {
114
+ if (e.nativeEvent.isComposing) {
115
+ return;
116
+ }
114
117
  switch (e.key) {
115
118
  case 'Enter':
116
119
  case 'Tab':