@react-aria/combobox 3.8.5-nightly.4552 → 3.8.5-nightly.4558

package/dist/useComboBox.main.js

@@ -0,0 +1,292 @@
+var $8d1e5da058b86bb9$exports = require("./intlStrings.main.js");
+var $BGXP4$reactarialiveannouncer = require("@react-aria/live-announcer");
+var $BGXP4$reactariaoverlays = require("@react-aria/overlays");
+var $BGXP4$reactarialistbox = require("@react-aria/listbox");
+var $BGXP4$reactariautils = require("@react-aria/utils");
+var $BGXP4$react = require("react");
+var $BGXP4$reactstatelycollections = require("@react-stately/collections");
+var $BGXP4$reactariaselection = require("@react-aria/selection");
+var $BGXP4$reactstatelyform = require("@react-stately/form");
+var $BGXP4$reactariai18n = require("@react-aria/i18n");
+var $BGXP4$reactariamenu = require("@react-aria/menu");
+var $BGXP4$reactariatextfield = require("@react-aria/textfield");
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "useComboBox", () => $242452271d1e4c0e$export$8c18d1b4f7232bbf);
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+function $242452271d1e4c0e$export$8c18d1b4f7232bbf(props, state) {
+    let { buttonRef: buttonRef, popoverRef: popoverRef, inputRef: inputRef, listBoxRef: listBoxRef, keyboardDelegate: keyboardDelegate, shouldFocusWrap: // completionMode = 'suggest',
+    shouldFocusWrap, isReadOnly: isReadOnly, isDisabled: isDisabled } = props;
+    let stringFormatter = (0, $BGXP4$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($8d1e5da058b86bb9$exports))), "@react-aria/combobox");
+    let { menuTriggerProps: menuTriggerProps, menuProps: menuProps } = (0, $BGXP4$reactariamenu.useMenuTrigger)({
+        type: "listbox",
+        isDisabled: isDisabled || isReadOnly
+    }, state, buttonRef);
+    // Set listbox id so it can be used when calling getItemId later
+    (0, $BGXP4$reactarialistbox.listData).set(state, {
+        id: menuProps.id
+    });
+    // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).
+    // When virtualized, the layout object will be passed in as a prop and override this.
+    let delegate = (0, $BGXP4$react.useMemo)(()=>keyboardDelegate || new (0, $BGXP4$reactariaselection.ListKeyboardDelegate)(state.collection, state.disabledKeys, listBoxRef), [
+        keyboardDelegate,
+        state.collection,
+        state.disabledKeys,
+        listBoxRef
+    ]);
+    // Use useSelectableCollection to get the keyboard handlers to apply to the textfield
+    let { collectionProps: collectionProps } = (0, $BGXP4$reactariaselection.useSelectableCollection)({
+        selectionManager: state.selectionManager,
+        keyboardDelegate: delegate,
+        disallowTypeAhead: true,
+        disallowEmptySelection: true,
+        shouldFocusWrap: shouldFocusWrap,
+        ref: inputRef,
+        // Prevent item scroll behavior from being applied here, should be handled in the user's Popover + ListBox component
+        isVirtualized: true
+    });
+    let router = (0, $BGXP4$reactariautils.useRouter)();
+    // For textfield specific keydown operations
+    let onKeyDown = (e)=>{
+        switch(e.key){
+            case "Enter":
+            case "Tab":
+                // Prevent form submission if menu is open since we may be selecting a option
+                if (state.isOpen && e.key === "Enter") e.preventDefault();
+                // If the focused item is a link, trigger opening it. Items that are links are not selectable.
+                if (state.isOpen && state.selectionManager.focusedKey != null && state.selectionManager.isLink(state.selectionManager.focusedKey)) {
+                    if (e.key === "Enter") {
+                        let item = listBoxRef.current.querySelector(`[data-key="${CSS.escape(state.selectionManager.focusedKey.toString())}"]`);
+                        if (item instanceof HTMLAnchorElement) {
+                            let collectionItem = state.collection.getItem(state.selectionManager.focusedKey);
+                            router.open(item, e, collectionItem.props.href, collectionItem.props.routerOptions);
+                        }
+                    }
+                    state.close();
+                } else state.commit();
+                break;
+            case "Escape":
+                if (state.selectedKey !== null || state.inputValue === "" || props.allowsCustomValue) e.continuePropagation();
+                state.revert();
+                break;
+            case "ArrowDown":
+                state.open("first", "manual");
+                break;
+            case "ArrowUp":
+                state.open("last", "manual");
+                break;
+            case "ArrowLeft":
+            case "ArrowRight":
+                state.selectionManager.setFocusedKey(null);
+                break;
+        }
+    };
+    let onBlur = (e)=>{
+        var _popoverRef_current;
+        let blurFromButton = (buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) && buttonRef.current === e.relatedTarget;
+        let blurIntoPopover = (_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.contains(e.relatedTarget);
+        // Ignore blur if focused moved to the button(if exists) or into the popover.
+        if (blurFromButton || blurIntoPopover) return;
+        if (props.onBlur) props.onBlur(e);
+        state.setFocused(false);
+    };
+    let onFocus = (e)=>{
+        if (state.isFocused) return;
+        if (props.onFocus) props.onFocus(e);
+        state.setFocused(true);
+    };
+    let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
+    let { labelProps: labelProps, inputProps: inputProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $BGXP4$reactariatextfield.useTextField)({
+        ...props,
+        onChange: state.setInputValue,
+        onKeyDown: !isReadOnly ? (0, $BGXP4$reactariautils.chain)(state.isOpen && collectionProps.onKeyDown, onKeyDown, props.onKeyDown) : props.onKeyDown,
+        onBlur: onBlur,
+        value: state.inputValue,
+        onFocus: onFocus,
+        autoComplete: "off",
+        validate: undefined,
+        [(0, $BGXP4$reactstatelyform.privateValidationStateProp)]: state
+    }, inputRef);
+    // Press handlers for the ComboBox button
+    let onPress = (e)=>{
+        if (e.pointerType === "touch") {
+            // Focus the input field in case it isn't focused yet
+            inputRef.current.focus();
+            state.toggle(null, "manual");
+        }
+    };
+    let onPressStart = (e)=>{
+        if (e.pointerType !== "touch") {
+            inputRef.current.focus();
+            state.toggle(e.pointerType === "keyboard" || e.pointerType === "virtual" ? "first" : null, "manual");
+        }
+    };
+    let triggerLabelProps = (0, $BGXP4$reactariautils.useLabels)({
+        id: menuTriggerProps.id,
+        "aria-label": stringFormatter.format("buttonLabel"),
+        "aria-labelledby": props["aria-labelledby"] || labelProps.id
+    });
+    let listBoxProps = (0, $BGXP4$reactariautils.useLabels)({
+        id: menuProps.id,
+        "aria-label": stringFormatter.format("listboxLabel"),
+        "aria-labelledby": props["aria-labelledby"] || labelProps.id
+    });
+    // If a touch happens on direct center of ComboBox input, might be virtual click from iPad so open ComboBox menu
+    let lastEventTime = (0, $BGXP4$react.useRef)(0);
+    let onTouchEnd = (e)=>{
+        if (isDisabled || isReadOnly) return;
+        // Sometimes VoiceOver on iOS fires two touchend events in quick succession. Ignore the second one.
+        if (e.timeStamp - lastEventTime.current < 500) {
+            e.preventDefault();
+            inputRef.current.focus();
+            return;
+        }
+        let rect = e.target.getBoundingClientRect();
+        let touch = e.changedTouches[0];
+        let centerX = Math.ceil(rect.left + .5 * rect.width);
+        let centerY = Math.ceil(rect.top + .5 * rect.height);
+        if (touch.clientX === centerX && touch.clientY === centerY) {
+            e.preventDefault();
+            inputRef.current.focus();
+            state.toggle(null, "manual");
+            lastEventTime.current = e.timeStamp;
+        }
+    };
+    // VoiceOver has issues with announcing aria-activedescendant properly on change
+    // (especially on iOS). We use a live region announcer to announce focus changes
+    // manually. In addition, section titles are announced when navigating into a new section.
+    let focusedItem = state.selectionManager.focusedKey != null && state.isOpen ? state.collection.getItem(state.selectionManager.focusedKey) : undefined;
+    var _focusedItem_parentKey;
+    let sectionKey = (_focusedItem_parentKey = focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.parentKey) !== null && _focusedItem_parentKey !== void 0 ? _focusedItem_parentKey : null;
+    var _state_selectionManager_focusedKey;
+    let itemKey = (_state_selectionManager_focusedKey = state.selectionManager.focusedKey) !== null && _state_selectionManager_focusedKey !== void 0 ? _state_selectionManager_focusedKey : null;
+    let lastSection = (0, $BGXP4$react.useRef)(sectionKey);
+    let lastItem = (0, $BGXP4$react.useRef)(itemKey);
+    (0, $BGXP4$react.useEffect)(()=>{
+        if ((0, $BGXP4$reactariautils.isAppleDevice)() && focusedItem != null && itemKey !== lastItem.current) {
+            let isSelected = state.selectionManager.isSelected(itemKey);
+            let section = sectionKey != null ? state.collection.getItem(sectionKey) : null;
+            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 : "") || "";
+            let announcement = stringFormatter.format("focusAnnouncement", {
+                isGroupChange: section && sectionKey !== lastSection.current,
+                groupTitle: sectionTitle,
+                groupCount: section ? [
+                    ...(0, $BGXP4$reactstatelycollections.getChildNodes)(section, state.collection)
+                ].length : 0,
+                optionText: focusedItem["aria-label"] || focusedItem.textValue || "",
+                isSelected: isSelected
+            });
+            (0, $BGXP4$reactarialiveannouncer.announce)(announcement);
+        }
+        lastSection.current = sectionKey;
+        lastItem.current = itemKey;
+    });
+    // Announce the number of available suggestions when it changes
+    let optionCount = (0, $BGXP4$reactstatelycollections.getItemCount)(state.collection);
+    let lastSize = (0, $BGXP4$react.useRef)(optionCount);
+    let lastOpen = (0, $BGXP4$react.useRef)(state.isOpen);
+    (0, $BGXP4$react.useEffect)(()=>{
+        // Only announce the number of options available when the menu opens if there is no
+        // focused item, otherwise screen readers will typically read e.g. "1 of 6".
+        // The exception is VoiceOver since this isn't included in the message above.
+        let didOpenWithoutFocusedItem = state.isOpen !== lastOpen.current && (state.selectionManager.focusedKey == null || (0, $BGXP4$reactariautils.isAppleDevice)());
+        if (state.isOpen && (didOpenWithoutFocusedItem || optionCount !== lastSize.current)) {
+            let announcement = stringFormatter.format("countAnnouncement", {
+                optionCount: optionCount
+            });
+            (0, $BGXP4$reactarialiveannouncer.announce)(announcement);
+        }
+        lastSize.current = optionCount;
+        lastOpen.current = state.isOpen;
+    });
+    // Announce when a selection occurs for VoiceOver. Other screen readers typically do this automatically.
+    let lastSelectedKey = (0, $BGXP4$react.useRef)(state.selectedKey);
+    (0, $BGXP4$react.useEffect)(()=>{
+        if ((0, $BGXP4$reactariautils.isAppleDevice)() && state.isFocused && state.selectedItem && state.selectedKey !== lastSelectedKey.current) {
+            let optionText = state.selectedItem["aria-label"] || state.selectedItem.textValue || "";
+            let announcement = stringFormatter.format("selectedAnnouncement", {
+                optionText: optionText
+            });
+            (0, $BGXP4$reactarialiveannouncer.announce)(announcement);
+        }
+        lastSelectedKey.current = state.selectedKey;
+    });
+    (0, $BGXP4$react.useEffect)(()=>{
+        if (state.isOpen) return (0, $BGXP4$reactariaoverlays.ariaHideOutside)([
+            inputRef.current,
+            popoverRef.current
+        ]);
+    }, [
+        state.isOpen,
+        inputRef,
+        popoverRef
+    ]);
+    return {
+        labelProps: labelProps,
+        buttonProps: {
+            ...menuTriggerProps,
+            ...triggerLabelProps,
+            excludeFromTabOrder: true,
+            onPress: onPress,
+            onPressStart: onPressStart,
+            isDisabled: isDisabled || isReadOnly
+        },
+        inputProps: (0, $BGXP4$reactariautils.mergeProps)(inputProps, {
+            role: "combobox",
+            "aria-expanded": menuTriggerProps["aria-expanded"],
+            "aria-controls": state.isOpen ? menuProps.id : undefined,
+            // TODO: readd proper logic for completionMode = complete (aria-autocomplete: both)
+            "aria-autocomplete": "list",
+            "aria-activedescendant": focusedItem ? (0, $BGXP4$reactarialistbox.getItemId)(state, focusedItem.key) : undefined,
+            onTouchEnd: onTouchEnd,
+            // This disable's iOS's autocorrect suggestions, since the combo box provides its own suggestions.
+            autoCorrect: "off",
+            // This disable's the macOS Safari spell check auto corrections.
+            spellCheck: "false"
+        }),
+        listBoxProps: (0, $BGXP4$reactariautils.mergeProps)(menuProps, listBoxProps, {
+            autoFocus: state.focusStrategy,
+            shouldUseVirtualFocus: true,
+            shouldSelectOnPressUp: true,
+            shouldFocusOnHover: true,
+            linkBehavior: "selection"
+        }),
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails
+    };
+}
+
+
+//# sourceMappingURL=useComboBox.main.js.map

package/dist/useComboBox.main.js.map

@@ -0,0 +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"}

package/dist/useComboBox.mjs

@@ -0,0 +1,287 @@
+import $dShfP$intlStringsmodulejs from "./intlStrings.mjs";
+import {announce as $dShfP$announce} from "@react-aria/live-announcer";
+import {ariaHideOutside as $dShfP$ariaHideOutside} from "@react-aria/overlays";
+import {listData as $dShfP$listData, getItemId as $dShfP$getItemId} from "@react-aria/listbox";
+import {useRouter as $dShfP$useRouter, chain as $dShfP$chain, useLabels as $dShfP$useLabels, isAppleDevice as $dShfP$isAppleDevice, mergeProps as $dShfP$mergeProps} from "@react-aria/utils";
+import {useMemo as $dShfP$useMemo, useRef as $dShfP$useRef, useEffect as $dShfP$useEffect} from "react";
+import {getChildNodes as $dShfP$getChildNodes, getItemCount as $dShfP$getItemCount} from "@react-stately/collections";
+import {ListKeyboardDelegate as $dShfP$ListKeyboardDelegate, useSelectableCollection as $dShfP$useSelectableCollection} from "@react-aria/selection";
+import {privateValidationStateProp as $dShfP$privateValidationStateProp} from "@react-stately/form";
+import {useLocalizedStringFormatter as $dShfP$useLocalizedStringFormatter} from "@react-aria/i18n";
+import {useMenuTrigger as $dShfP$useMenuTrigger} from "@react-aria/menu";
+import {useTextField as $dShfP$useTextField} from "@react-aria/textfield";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+function $c350ade66beef0af$export$8c18d1b4f7232bbf(props, state) {
+    let { buttonRef: buttonRef, popoverRef: popoverRef, inputRef: inputRef, listBoxRef: listBoxRef, keyboardDelegate: keyboardDelegate, shouldFocusWrap: // completionMode = 'suggest',
+    shouldFocusWrap, isReadOnly: isReadOnly, isDisabled: isDisabled } = props;
+    let stringFormatter = (0, $dShfP$useLocalizedStringFormatter)((0, ($parcel$interopDefault($dShfP$intlStringsmodulejs))), "@react-aria/combobox");
+    let { menuTriggerProps: menuTriggerProps, menuProps: menuProps } = (0, $dShfP$useMenuTrigger)({
+        type: "listbox",
+        isDisabled: isDisabled || isReadOnly
+    }, state, buttonRef);
+    // Set listbox id so it can be used when calling getItemId later
+    (0, $dShfP$listData).set(state, {
+        id: menuProps.id
+    });
+    // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).
+    // When virtualized, the layout object will be passed in as a prop and override this.
+    let delegate = (0, $dShfP$useMemo)(()=>keyboardDelegate || new (0, $dShfP$ListKeyboardDelegate)(state.collection, state.disabledKeys, listBoxRef), [
+        keyboardDelegate,
+        state.collection,
+        state.disabledKeys,
+        listBoxRef
+    ]);
+    // Use useSelectableCollection to get the keyboard handlers to apply to the textfield
+    let { collectionProps: collectionProps } = (0, $dShfP$useSelectableCollection)({
+        selectionManager: state.selectionManager,
+        keyboardDelegate: delegate,
+        disallowTypeAhead: true,
+        disallowEmptySelection: true,
+        shouldFocusWrap: shouldFocusWrap,
+        ref: inputRef,
+        // Prevent item scroll behavior from being applied here, should be handled in the user's Popover + ListBox component
+        isVirtualized: true
+    });
+    let router = (0, $dShfP$useRouter)();
+    // For textfield specific keydown operations
+    let onKeyDown = (e)=>{
+        switch(e.key){
+            case "Enter":
+            case "Tab":
+                // Prevent form submission if menu is open since we may be selecting a option
+                if (state.isOpen && e.key === "Enter") e.preventDefault();
+                // If the focused item is a link, trigger opening it. Items that are links are not selectable.
+                if (state.isOpen && state.selectionManager.focusedKey != null && state.selectionManager.isLink(state.selectionManager.focusedKey)) {
+                    if (e.key === "Enter") {
+                        let item = listBoxRef.current.querySelector(`[data-key="${CSS.escape(state.selectionManager.focusedKey.toString())}"]`);
+                        if (item instanceof HTMLAnchorElement) {
+                            let collectionItem = state.collection.getItem(state.selectionManager.focusedKey);
+                            router.open(item, e, collectionItem.props.href, collectionItem.props.routerOptions);
+                        }
+                    }
+                    state.close();
+                } else state.commit();
+                break;
+            case "Escape":
+                if (state.selectedKey !== null || state.inputValue === "" || props.allowsCustomValue) e.continuePropagation();
+                state.revert();
+                break;
+            case "ArrowDown":
+                state.open("first", "manual");
+                break;
+            case "ArrowUp":
+                state.open("last", "manual");
+                break;
+            case "ArrowLeft":
+            case "ArrowRight":
+                state.selectionManager.setFocusedKey(null);
+                break;
+        }
+    };
+    let onBlur = (e)=>{
+        var _popoverRef_current;
+        let blurFromButton = (buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) && buttonRef.current === e.relatedTarget;
+        let blurIntoPopover = (_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.contains(e.relatedTarget);
+        // Ignore blur if focused moved to the button(if exists) or into the popover.
+        if (blurFromButton || blurIntoPopover) return;
+        if (props.onBlur) props.onBlur(e);
+        state.setFocused(false);
+    };
+    let onFocus = (e)=>{
+        if (state.isFocused) return;
+        if (props.onFocus) props.onFocus(e);
+        state.setFocused(true);
+    };
+    let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
+    let { labelProps: labelProps, inputProps: inputProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $dShfP$useTextField)({
+        ...props,
+        onChange: state.setInputValue,
+        onKeyDown: !isReadOnly ? (0, $dShfP$chain)(state.isOpen && collectionProps.onKeyDown, onKeyDown, props.onKeyDown) : props.onKeyDown,
+        onBlur: onBlur,
+        value: state.inputValue,
+        onFocus: onFocus,
+        autoComplete: "off",
+        validate: undefined,
+        [(0, $dShfP$privateValidationStateProp)]: state
+    }, inputRef);
+    // Press handlers for the ComboBox button
+    let onPress = (e)=>{
+        if (e.pointerType === "touch") {
+            // Focus the input field in case it isn't focused yet
+            inputRef.current.focus();
+            state.toggle(null, "manual");
+        }
+    };
+    let onPressStart = (e)=>{
+        if (e.pointerType !== "touch") {
+            inputRef.current.focus();
+            state.toggle(e.pointerType === "keyboard" || e.pointerType === "virtual" ? "first" : null, "manual");
+        }
+    };
+    let triggerLabelProps = (0, $dShfP$useLabels)({
+        id: menuTriggerProps.id,
+        "aria-label": stringFormatter.format("buttonLabel"),
+        "aria-labelledby": props["aria-labelledby"] || labelProps.id
+    });
+    let listBoxProps = (0, $dShfP$useLabels)({
+        id: menuProps.id,
+        "aria-label": stringFormatter.format("listboxLabel"),
+        "aria-labelledby": props["aria-labelledby"] || labelProps.id
+    });
+    // If a touch happens on direct center of ComboBox input, might be virtual click from iPad so open ComboBox menu
+    let lastEventTime = (0, $dShfP$useRef)(0);
+    let onTouchEnd = (e)=>{
+        if (isDisabled || isReadOnly) return;
+        // Sometimes VoiceOver on iOS fires two touchend events in quick succession. Ignore the second one.
+        if (e.timeStamp - lastEventTime.current < 500) {
+            e.preventDefault();
+            inputRef.current.focus();
+            return;
+        }
+        let rect = e.target.getBoundingClientRect();
+        let touch = e.changedTouches[0];
+        let centerX = Math.ceil(rect.left + .5 * rect.width);
+        let centerY = Math.ceil(rect.top + .5 * rect.height);
+        if (touch.clientX === centerX && touch.clientY === centerY) {
+            e.preventDefault();
+            inputRef.current.focus();
+            state.toggle(null, "manual");
+            lastEventTime.current = e.timeStamp;
+        }
+    };
+    // VoiceOver has issues with announcing aria-activedescendant properly on change
+    // (especially on iOS). We use a live region announcer to announce focus changes
+    // manually. In addition, section titles are announced when navigating into a new section.
+    let focusedItem = state.selectionManager.focusedKey != null && state.isOpen ? state.collection.getItem(state.selectionManager.focusedKey) : undefined;
+    var _focusedItem_parentKey;
+    let sectionKey = (_focusedItem_parentKey = focusedItem === null || focusedItem === void 0 ? void 0 : focusedItem.parentKey) !== null && _focusedItem_parentKey !== void 0 ? _focusedItem_parentKey : null;
+    var _state_selectionManager_focusedKey;
+    let itemKey = (_state_selectionManager_focusedKey = state.selectionManager.focusedKey) !== null && _state_selectionManager_focusedKey !== void 0 ? _state_selectionManager_focusedKey : null;
+    let lastSection = (0, $dShfP$useRef)(sectionKey);
+    let lastItem = (0, $dShfP$useRef)(itemKey);
+    (0, $dShfP$useEffect)(()=>{
+        if ((0, $dShfP$isAppleDevice)() && focusedItem != null && itemKey !== lastItem.current) {
+            let isSelected = state.selectionManager.isSelected(itemKey);
+            let section = sectionKey != null ? state.collection.getItem(sectionKey) : null;
+            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 : "") || "";
+            let announcement = stringFormatter.format("focusAnnouncement", {
+                isGroupChange: section && sectionKey !== lastSection.current,
+                groupTitle: sectionTitle,
+                groupCount: section ? [
+                    ...(0, $dShfP$getChildNodes)(section, state.collection)
+                ].length : 0,
+                optionText: focusedItem["aria-label"] || focusedItem.textValue || "",
+                isSelected: isSelected
+            });
+            (0, $dShfP$announce)(announcement);
+        }
+        lastSection.current = sectionKey;
+        lastItem.current = itemKey;
+    });
+    // Announce the number of available suggestions when it changes
+    let optionCount = (0, $dShfP$getItemCount)(state.collection);
+    let lastSize = (0, $dShfP$useRef)(optionCount);
+    let lastOpen = (0, $dShfP$useRef)(state.isOpen);
+    (0, $dShfP$useEffect)(()=>{
+        // Only announce the number of options available when the menu opens if there is no
+        // focused item, otherwise screen readers will typically read e.g. "1 of 6".
+        // The exception is VoiceOver since this isn't included in the message above.
+        let didOpenWithoutFocusedItem = state.isOpen !== lastOpen.current && (state.selectionManager.focusedKey == null || (0, $dShfP$isAppleDevice)());
+        if (state.isOpen && (didOpenWithoutFocusedItem || optionCount !== lastSize.current)) {
+            let announcement = stringFormatter.format("countAnnouncement", {
+                optionCount: optionCount
+            });
+            (0, $dShfP$announce)(announcement);
+        }
+        lastSize.current = optionCount;
+        lastOpen.current = state.isOpen;
+    });
+    // Announce when a selection occurs for VoiceOver. Other screen readers typically do this automatically.
+    let lastSelectedKey = (0, $dShfP$useRef)(state.selectedKey);
+    (0, $dShfP$useEffect)(()=>{
+        if ((0, $dShfP$isAppleDevice)() && state.isFocused && state.selectedItem && state.selectedKey !== lastSelectedKey.current) {
+            let optionText = state.selectedItem["aria-label"] || state.selectedItem.textValue || "";
+            let announcement = stringFormatter.format("selectedAnnouncement", {
+                optionText: optionText
+            });
+            (0, $dShfP$announce)(announcement);
+        }
+        lastSelectedKey.current = state.selectedKey;
+    });
+    (0, $dShfP$useEffect)(()=>{
+        if (state.isOpen) return (0, $dShfP$ariaHideOutside)([
+            inputRef.current,
+            popoverRef.current
+        ]);
+    }, [
+        state.isOpen,
+        inputRef,
+        popoverRef
+    ]);
+    return {
+        labelProps: labelProps,
+        buttonProps: {
+            ...menuTriggerProps,
+            ...triggerLabelProps,
+            excludeFromTabOrder: true,
+            onPress: onPress,
+            onPressStart: onPressStart,
+            isDisabled: isDisabled || isReadOnly
+        },
+        inputProps: (0, $dShfP$mergeProps)(inputProps, {
+            role: "combobox",
+            "aria-expanded": menuTriggerProps["aria-expanded"],
+            "aria-controls": state.isOpen ? menuProps.id : undefined,
+            // TODO: readd proper logic for completionMode = complete (aria-autocomplete: both)
+            "aria-autocomplete": "list",
+            "aria-activedescendant": focusedItem ? (0, $dShfP$getItemId)(state, focusedItem.key) : undefined,
+            onTouchEnd: onTouchEnd,
+            // This disable's iOS's autocorrect suggestions, since the combo box provides its own suggestions.
+            autoCorrect: "off",
+            // This disable's the macOS Safari spell check auto corrections.
+            spellCheck: "false"
+        }),
+        listBoxProps: (0, $dShfP$mergeProps)(menuProps, listBoxProps, {
+            autoFocus: state.focusStrategy,
+            shouldUseVirtualFocus: true,
+            shouldSelectOnPressUp: true,
+            shouldFocusOnHover: true,
+            linkBehavior: "selection"
+        }),
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        isInvalid: isInvalid,
+        validationErrors: validationErrors,
+        validationDetails: validationDetails
+    };
+}
+
+
+export {$c350ade66beef0af$export$8c18d1b4f7232bbf as useComboBox};
+//# sourceMappingURL=useComboBox.mjs.map