validatePropTypes$2(userProps, useSelect); // Props defaults and destructuring.
var props = extends_extends({}, defaultProps$2, userProps);
scrollIntoView = props.scrollIntoView,
environment = props.environment,
initialIsOpen = props.initialIsOpen,
defaultIsOpen = props.defaultIsOpen,
itemToString = props.itemToString,
getA11ySelectionMessage = props.getA11ySelectionMessage,
getA11yStatusMessage = props.getA11yStatusMessage; // Initial state depending on controlled props.
var initialState = getInitialState$2(props);
var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, initialState, props),
state = _useControlledReducer[0],
dispatch = _useControlledReducer[1];
var isOpen = state.isOpen,
highlightedIndex = state.highlightedIndex,
selectedItem = state.selectedItem,
inputValue = state.inputValue; // Element efs.
var toggleButtonRef = Object(external_React_["useRef"])(null);
var menuRef = Object(external_React_["useRef"])(null);
var itemRefs = Object(external_React_["useRef"])({}); // used not to trigger menu blur action in some scenarios.
var shouldBlurRef = Object(external_React_["useRef"])(true); // used to keep the inputValue clearTimeout object between renders.
var clearTimeoutRef = Object(external_React_["useRef"])(null); // prevent id re-generation between renders.
var elementIds = useElementIds(props); // used to keep track of how many items we had on previous cycle.
var previousResultCountRef = Object(external_React_["useRef"])();
var isInitialMountRef = Object(external_React_["useRef"])(true); // utility callback to get item element.
var latest = useLatestRef({
var getItemNodeFromIndex = Object(external_React_["useCallback"])(function (index) {
return itemRefs.current[elementIds.getItemId(index)];
}, [elementIds]); // Effects.
// Sets a11y status message on changes in state.
useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], extends_extends({
isInitialMount: isInitialMountRef.current,
previousResultCount: previousResultCountRef.current,
environment: environment,
itemToString: itemToString
}, state)); // Sets a11y status message on changes in selectedItem.
useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], extends_extends({
isInitialMount: isInitialMountRef.current,
previousResultCount: previousResultCountRef.current,
environment: environment,
itemToString: itemToString
}, state)); // Scroll on highlighted item if change comes from keyboard.
var shouldScrollRef = useScrollIntoView({
menuElement: menuRef.current,
highlightedIndex: highlightedIndex,
scrollIntoView: scrollIntoView,
getItemNodeFromIndex: getItemNodeFromIndex
}); // Sets cleanup for the keysSoFar callback, debounded after 500ms.
Object(external_React_["useEffect"])(function () {
// init the clean function here as we need access to dispatch.
clearTimeoutRef.current = debounce(function (outerDispatch) {
type: FunctionSetInputValue$1,
}, 500); // Cancel any pending debounced calls on mount
clearTimeoutRef.current.cancel();
}, []); // Invokes the keysSoFar callback set up above.
Object(external_React_["useEffect"])(function () {
clearTimeoutRef.current(dispatch);
}, [dispatch, inputValue]);
useControlPropsValidator({
isInitialMount: isInitialMountRef.current,
/* Controls the focus on the menu or the toggle button. */
Object(external_React_["useEffect"])(function () {
// Don't focus menu on first render.
if (isInitialMountRef.current) {
// Unless it was initialised as open.
if ((initialIsOpen || defaultIsOpen || isOpen) && menuRef.current) {
} // Focus toggleButton on close, but not if it was closed with (Shift+)Tab.
if (environment.document.activeElement === menuRef.current) {
if (toggleButtonRef.current) {
shouldBlurRef.current = false;
toggleButtonRef.current.focus();
} // eslint-disable-next-line react-hooks/exhaustive-deps
Object(external_React_["useEffect"])(function () {
if (isInitialMountRef.current) {
previousResultCountRef.current = items.length;
}); // Add mouse/touch events to document.
var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, function () {
var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps'); // Make initial ref false.
Object(external_React_["useEffect"])(function () {
isInitialMountRef.current = false;
}, []); // Reset itemRefs on close.
Object(external_React_["useEffect"])(function () {
}, [isOpen]); // Event handler functions.
var toggleButtonKeyDownHandlers = Object(external_React_["useMemo"])(function () {
ArrowDown: function ArrowDown(event) {
type: ToggleButtonKeyDownArrowDown,
getItemNodeFromIndex: getItemNodeFromIndex,
ArrowUp: function ArrowUp(event) {
type: ToggleButtonKeyDownArrowUp,
getItemNodeFromIndex: getItemNodeFromIndex,
}, [dispatch, getItemNodeFromIndex]);
var menuKeyDownHandlers = Object(external_React_["useMemo"])(function () {
ArrowDown: function ArrowDown(event) {
type: MenuKeyDownArrowDown,
getItemNodeFromIndex: getItemNodeFromIndex,
ArrowUp: function ArrowUp(event) {
type: MenuKeyDownArrowUp,
getItemNodeFromIndex: getItemNodeFromIndex,
Home: function Home(event) {
getItemNodeFromIndex: getItemNodeFromIndex
End: function End(event) {
getItemNodeFromIndex: getItemNodeFromIndex
Escape: function Escape() {
Enter: function Enter(event) {
type: MenuKeyDownSpaceButton
}, [dispatch, getItemNodeFromIndex]); // Action functions.
var toggleMenu = Object(external_React_["useCallback"])(function () {
type: FunctionToggleMenu$1
var closeMenu = Object(external_React_["useCallback"])(function () {
type: FunctionCloseMenu$1
var openMenu = Object(external_React_["useCallback"])(function () {
var setHighlightedIndex = Object(external_React_["useCallback"])(function (newHighlightedIndex) {
type: FunctionSetHighlightedIndex$1,
highlightedIndex: newHighlightedIndex
var selectItem = Object(external_React_["useCallback"])(function (newSelectedItem) {
type: FunctionSelectItem$1,
selectedItem: newSelectedItem
var reset = Object(external_React_["useCallback"])(function () {
var setInputValue = Object(external_React_["useCallback"])(function (newInputValue) {
type: FunctionSetInputValue$1,
inputValue: newInputValue
}, [dispatch]); // Getter functions.
var getLabelProps = Object(external_React_["useCallback"])(function (labelProps) {
htmlFor: elementIds.toggleButtonId
var getMenuProps = Object(external_React_["useCallback"])(function (_temp, _temp2) {
var _ref = _temp === void 0 ? {} : _temp,
onMouseLeave = _ref.onMouseLeave,
_ref$refKey = _ref.refKey,
refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
onKeyDown = _ref.onKeyDown,
rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref, _excluded$2);
var _ref2 = _temp2 === void 0 ? {} : _temp2,
_ref2$suppressRefErro = _ref2.suppressRefError,
suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
var latestState = latest.current.state;
var menuHandleKeyDown = function menuHandleKeyDown(event) {
var key = normalizeArrowKey(event);
if (key && menuKeyDownHandlers[key]) {
menuKeyDownHandlers[key](event);
} else if (isAcceptedCharacterKey(key)) {
type: MenuKeyDownCharacter,
getItemNodeFromIndex: getItemNodeFromIndex
var menuHandleBlur = function menuHandleBlur() {
// if the blur was a result of selection, we don't trigger this action.
if (shouldBlurRef.current === false) {
shouldBlurRef.current = true;
var shouldBlur = !mouseAndTouchTrackersRef.current.isMouseDown;
/* istanbul ignore else */
var menuHandleMouseLeave = function menuHandleMouseLeave() {
setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
return extends_extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
menuRef.current = menuNode;
}), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.labelId, _extends2.tabIndex = -1, _extends2), latestState.isOpen && latestState.highlightedIndex > -1 && {
'aria-activedescendant': elementIds.getItemId(latestState.highlightedIndex)
onMouseLeave: callAllEventHandlers(onMouseLeave, menuHandleMouseLeave),
onKeyDown: callAllEventHandlers(onKeyDown, menuHandleKeyDown),
onBlur: callAllEventHandlers(onBlur, menuHandleBlur)
}, [dispatch, latest, menuKeyDownHandlers, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds, getItemNodeFromIndex]);
var getToggleButtonProps = Object(external_React_["useCallback"])(function (_temp3, _temp4) {
var _ref3 = _temp3 === void 0 ? {} : _temp3,
onKeyDown = _ref3.onKeyDown,
_ref3$refKey = _ref3.refKey,
refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref3, _excluded2$2);
var _ref4 = _temp4 === void 0 ? {} : _temp4,
_ref4$suppressRefErro = _ref4.suppressRefError,
suppressRefError = _ref4$suppressRefErro === void 0 ? false : _ref4$suppressRefErro;
var toggleButtonHandleClick = function toggleButtonHandleClick() {
type: ToggleButtonClick$1
var toggleButtonHandleKeyDown = function toggleButtonHandleKeyDown(event) {
var key = normalizeArrowKey(event);
if (key && toggleButtonKeyDownHandlers[key]) {
toggleButtonKeyDownHandlers[key](event);
} else if (isAcceptedCharacterKey(key)) {
type: ToggleButtonKeyDownCharacter,
getItemNodeFromIndex: getItemNodeFromIndex
var toggleProps = extends_extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (toggleButtonNode) {
toggleButtonRef.current = toggleButtonNode;
}), _extends3.id = elementIds.toggleButtonId, _extends3['aria-haspopup'] = 'listbox', _extends3['aria-expanded'] = latest.current.state.isOpen, _extends3['aria-labelledby'] = elementIds.labelId + " " + elementIds.toggleButtonId, _extends3), rest);
toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick);
toggleProps.onKeyDown = callAllEventHandlers(onKeyDown, toggleButtonHandleKeyDown);
setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
}, [dispatch, latest, toggleButtonKeyDownHandlers, setGetterPropCallInfo, elementIds, getItemNodeFromIndex]);
var getItemProps = Object(external_React_["useCallback"])(function (_temp5) {
var _ref5 = _temp5 === void 0 ? {} : _temp5,
onMouseMove = _ref5.onMouseMove,
_ref5$refKey = _ref5.refKey,
refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref5, _excluded3$1);
var _latest$current = latest.current,
latestState = _latest$current.state,
latestProps = _latest$current.props;
var itemHandleMouseMove = function itemHandleMouseMove() {
if (index === latestState.highlightedIndex) {
shouldScrollRef.current = false;
var itemHandleClick = function itemHandleClick() {
var itemIndex = getItemIndex(index, item, latestProps.items);
throw new Error('Pass either item or item index in getItemProps!');
var itemProps = extends_extends((_extends4 = {
'aria-selected': "" + (itemIndex === latestState.highlightedIndex),
id: elementIds.getItemId(itemIndex)
}, _extends4[refKey] = handleRefs(ref, function (itemNode) {
itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
itemProps.onClick = callAllEventHandlers(onClick, itemHandleClick);
}, [dispatch, latest, shouldScrollRef, elementIds]);
getToggleButtonProps: getToggleButtonProps,
getLabelProps: getLabelProps,
getMenuProps: getMenuProps,
getItemProps: getItemProps,
setHighlightedIndex: setHighlightedIndex,
setInputValue: setInputValue,
highlightedIndex: highlightedIndex,
selectedItem: selectedItem,
var InputKeyDownArrowDown = false ? undefined : 0;
var InputKeyDownArrowUp = false ? undefined : 1;
var InputKeyDownEscape = false ? undefined : 2;
var InputKeyDownHome = false ? undefined : 3;
var InputKeyDownEnd = false ? undefined : 4;
var InputKeyDownEnter = false ? undefined : 5;
var InputChange = false ? undefined : 6;
var InputBlur = false ? undefined : 7;
var MenuMouseLeave = false ? undefined : 8;
var ItemMouseMove = false ? undefined : 9;
var ItemClick = false ? undefined : 10;
var ToggleButtonClick = false ? undefined : 11;
var FunctionToggleMenu = false ? undefined : 12;
var FunctionOpenMenu = false ? undefined : 13;
var FunctionCloseMenu = false ? undefined : 14;
var FunctionSetHighlightedIndex = false ? undefined : 15;
var FunctionSelectItem = false ? undefined : 16;
var FunctionSetInputValue = false ? undefined : 17;
var FunctionReset$1 = false ? undefined : 18;
var ControlledPropUpdatedSelectedItem = false ? undefined : 19;
var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({
InputKeyDownArrowDown: InputKeyDownArrowDown,
InputKeyDownArrowUp: InputKeyDownArrowUp,
InputKeyDownEscape: InputKeyDownEscape,
InputKeyDownHome: InputKeyDownHome,
InputKeyDownEnd: InputKeyDownEnd,
InputKeyDownEnter: InputKeyDownEnter,
InputChange: InputChange,