for (var _index = baseIndex - 1; _index >= 0; _index--) {
if (!getItemNodeFromIndex(_index).hasAttribute('disabled')) {
return moveAmount > 0 ? getNextNonDisabledIndex(1, 0, itemCount, getItemNodeFromIndex, false) : getNextNonDisabledIndex(-1, itemCount - 1, itemCount, getItemNodeFromIndex, false);
* Checks if event target is within the downshift elements.
* @param {EventTarget} target Target to check.
* @param {HTMLElement[]} downshiftElements The elements that form downshift (list, toggle button etc).
* @param {Window} environment The window context where downshift renders.
* @param {boolean} checkActiveElement Whether to also check activeElement.
* @returns {boolean} Whether or not the target is within downshift elements.
function targetWithinDownshift(target, downshiftElements, environment, checkActiveElement) {
if (checkActiveElement === void 0) {
checkActiveElement = true;
return downshiftElements.some(function (contextNode) {
return contextNode && (isOrContainsNode(contextNode, target, environment) || checkActiveElement && isOrContainsNode(contextNode, environment.document.activeElement, environment));
} // eslint-disable-next-line import/no-mutable-exports
var validateControlledUnchanged = downshift_esm_noop;
/* istanbul ignore next */
var cleanupStatus = debounce(function (documentProp) {
getStatusDiv(documentProp).textContent = '';
* @param {String} status the status message
* @param {Object} documentProp document passed by the user.
function setStatus(status, documentProp) {
var div = getStatusDiv(documentProp);
div.textContent = status;
cleanupStatus(documentProp);
* Get the status node or create it if it does not already exist.
* @param {Object} documentProp document passed by the user.
* @return {HTMLElement} the status node.
function getStatusDiv(documentProp) {
if (documentProp === void 0) {
var statusDiv = documentProp.getElementById('a11y-status-message');
statusDiv = documentProp.createElement('div');
statusDiv.setAttribute('id', 'a11y-status-message');
statusDiv.setAttribute('role', 'status');
statusDiv.setAttribute('aria-live', 'polite');
statusDiv.setAttribute('aria-relevant', 'additions text');
Object.assign(statusDiv.style, {
documentProp.body.appendChild(statusDiv);
var unknown = false ? undefined : 0;
var mouseUp = false ? undefined : 1;
var itemMouseEnter = false ? undefined : 2;
var keyDownArrowUp = false ? undefined : 3;
var keyDownArrowDown = false ? undefined : 4;
var keyDownEscape = false ? undefined : 5;
var keyDownEnter = false ? undefined : 6;
var keyDownHome = false ? undefined : 7;
var keyDownEnd = false ? undefined : 8;
var clickItem = false ? undefined : 9;
var blurInput = false ? undefined : 10;
var changeInput = false ? undefined : 11;
var keyDownSpaceButton = false ? undefined : 12;
var clickButton = false ? undefined : 13;
var blurButton = false ? undefined : 14;
var controlledPropUpdatedSelectedItem = false ? undefined : 15;
var touchEnd = false ? undefined : 16;
var stateChangeTypes$3 = /*#__PURE__*/Object.freeze({
itemMouseEnter: itemMouseEnter,
keyDownArrowUp: keyDownArrowUp,
keyDownArrowDown: keyDownArrowDown,
keyDownEscape: keyDownEscape,
keyDownEnter: keyDownEnter,
keyDownHome: keyDownHome,
changeInput: changeInput,
keyDownSpaceButton: keyDownSpaceButton,
clickButton: clickButton,
controlledPropUpdatedSelectedItem: controlledPropUpdatedSelectedItem,
var _excluded$4 = ["refKey", "ref"],
_excluded2$3 = ["onClick", "onPress", "onKeyDown", "onKeyUp", "onBlur"],
_excluded3$2 = ["onKeyDown", "onBlur", "onChange", "onInput", "onChangeText"],
_excluded4$1 = ["refKey", "ref"],
_excluded5$1 = ["onMouseMove", "onMouseDown", "onClick", "onPress", "index", "item"];
var downshift_esm_Downshift = /*#__PURE__*/function () {
var Downshift = /*#__PURE__*/function (_Component) {
inheritsLoose_inheritsLoose(Downshift, _Component);
function Downshift(_props) {
_this = _Component.call(this, _props) || this; // fancy destructuring + defaults + aliases
// this basically says each value of state should either be set to
// the initial value or the default value if the initial value is not provided
_this.id = _this.props.id || "downshift-" + downshift_esm_generateId();
_this.menuId = _this.props.menuId || _this.id + "-menu";
_this.labelId = _this.props.labelId || _this.id + "-label";
_this.inputId = _this.props.inputId || _this.id + "-input";
_this.getItemId = _this.props.getItemId || function (index) {
return _this.id + "-item-" + index;
_this.previousResultCount = 0;
_this.internalSetTimeout = function (fn, time) {
var id = setTimeout(function () {
_this.timeoutIds = _this.timeoutIds.filter(function (i) {
_this.timeoutIds.push(id);
_this.setItemCount = function (count) {
_this.unsetItemCount = function () {
_this.setHighlightedIndex = function (highlightedIndex, otherStateToSet) {
if (highlightedIndex === void 0) {
highlightedIndex = _this.props.defaultHighlightedIndex;
if (otherStateToSet === void 0) {
otherStateToSet = pickState(otherStateToSet);
_this.internalSetState(extends_extends({
highlightedIndex: highlightedIndex
_this.clearSelection = function (cb) {
highlightedIndex: _this.props.defaultHighlightedIndex,
isOpen: _this.props.defaultIsOpen
_this.selectItem = function (item, otherStateToSet, cb) {
otherStateToSet = pickState(otherStateToSet);
_this.internalSetState(extends_extends({
isOpen: _this.props.defaultIsOpen,
highlightedIndex: _this.props.defaultHighlightedIndex,
inputValue: _this.props.itemToString(item)
}, otherStateToSet), cb);
_this.selectItemAtIndex = function (itemIndex, otherStateToSet, cb) {
var item = _this.items[itemIndex];
_this.selectItem(item, otherStateToSet, cb);
_this.selectHighlightedItem = function (otherStateToSet, cb) {
return _this.selectItemAtIndex(_this.getState().highlightedIndex, otherStateToSet, cb);
_this.internalSetState = function (stateToSet, cb) {
var isItemSelected, onChangeArg;
var onStateChangeArg = {};
var isStateToSetFunction = typeof stateToSet === 'function'; // we want to call `onInputValueChange` before the `setState` call
// so someone controlling the `inputValue` state gets notified of
// the input change as soon as possible. This avoids issues with
// preserving the cursor position.
// See https://github.com/downshift-js/downshift/issues/217 for more info.
if (!isStateToSetFunction && stateToSet.hasOwnProperty('inputValue')) {
_this.props.onInputValueChange(stateToSet.inputValue, extends_extends({}, _this.getStateAndHelpers(), stateToSet));
return _this.setState(function (state) {
state = _this.getState(state);
var newStateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet; // Your own function that could modify the state that will be set.
newStateToSet = _this.props.stateReducer(state, newStateToSet); // checks if an item is selected, regardless of if it's different from
// what was selected before
// used to determine if onSelect and onChange callbacks should be called
isItemSelected = newStateToSet.hasOwnProperty('selectedItem'); // this keeps track of the object we want to call with setState
var nextState = {}; // this is just used to tell whether the state changed
var nextFullState = {}; // we need to call on change if the outside world is controlling any of our state
// and we're trying to update that state. OR if the selection has changed and we're
// trying to update the selection
if (isItemSelected && newStateToSet.selectedItem !== state.selectedItem) {
onChangeArg = newStateToSet.selectedItem;
newStateToSet.type = newStateToSet.type || unknown;
Object.keys(newStateToSet).forEach(function (key) {
// onStateChangeArg should only have the state that is
if (state[key] !== newStateToSet[key]) {
onStateChangeArg[key] = newStateToSet[key];
} // the type is useful for the onStateChangeArg
// but we don't actually want to set it in internal state.
// this is an undocumented feature for now... Not all internalSetState
// calls support it and I'm not certain we want them to yet.
// But it enables users controlling the isOpen state to know when
// the isOpen state changes due to mouseup events which is quite handy.
nextFullState[key] = newStateToSet[key]; // if it's coming from props, then we don't care to set it internally
if (!isControlledProp(_this.props, key)) {
nextState[key] = newStateToSet[key];
}); // if stateToSet is a function, then we weren't able to call onInputValueChange
// earlier, so we'll call it now that we know what the inputValue state will be.
if (isStateToSetFunction && newStateToSet.hasOwnProperty('inputValue')) {
_this.props.onInputValueChange(newStateToSet.inputValue, extends_extends({}, _this.getStateAndHelpers(), newStateToSet));
// call the provided callback if it's a function
cbToCb(cb)(); // only call the onStateChange and onChange callbacks if
// we have relevant information to pass them.
var hasMoreStateThanType = Object.keys(onStateChangeArg).length > 1;
if (hasMoreStateThanType) {
_this.props.onStateChange(onStateChangeArg, _this.getStateAndHelpers());
_this.props.onSelect(stateToSet.selectedItem, _this.getStateAndHelpers());
if (onChangeArg !== undefined) {
_this.props.onChange(onChangeArg, _this.getStateAndHelpers());
} // this is currently undocumented and therefore subject to change
// We'll try to not break it, but just be warned.
_this.props.onUserAction(onStateChangeArg, _this.getStateAndHelpers());
_this.rootRef = function (node) {
return _this._rootNode = node;
_this.getRootProps = function (_temp, _temp2) {
var _ref = _temp === void 0 ? {} : _temp,
_ref$refKey = _ref.refKey,
refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey,
rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref, _excluded$4);
var _ref2 = _temp2 === void 0 ? {} : _temp2,
_ref2$suppressRefErro = _ref2.suppressRefError,
suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro;
// this is used in the render to know whether the user has called getRootProps.
// It uses that to know whether to apply the props automatically
_this.getRootProps.called = true;
_this.getRootProps.refKey = refKey;
_this.getRootProps.suppressRefError = suppressRefError;
var _this$getState = _this.getState(),
isOpen = _this$getState.isOpen;
return extends_extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, _this.rootRef), _extends2.role = 'combobox', _extends2['aria-expanded'] = isOpen, _extends2['aria-haspopup'] = 'listbox', _extends2['aria-owns'] = isOpen ? _this.menuId : null, _extends2['aria-labelledby'] = _this.labelId, _extends2), rest);
_this.keyDownHandlers = {
ArrowDown: function ArrowDown(event) {
if (this.getState().isOpen) {
var amount = event.shiftKey ? 5 : 1;
this.moveHighlightedIndex(amount, {
var itemCount = _this2.getItemCount();
var _this2$getState = _this2.getState(),
highlightedIndex = _this2$getState.highlightedIndex;
var nextHighlightedIndex = getNextWrappingIndex(1, highlightedIndex, itemCount, function (index) {
return _this2.getItemNodeFromIndex(index);
_this2.setHighlightedIndex(nextHighlightedIndex, {
ArrowUp: function ArrowUp(event) {
if (this.getState().isOpen) {
var amount = event.shiftKey ? -5 : -1;
this.moveHighlightedIndex(amount, {
var itemCount = _this3.getItemCount();
var _this3$getState = _this3.getState(),
highlightedIndex = _this3$getState.highlightedIndex;
var nextHighlightedIndex = getNextWrappingIndex(-1, highlightedIndex, itemCount, function (index) {
return _this3.getItemNodeFromIndex(index);
_this3.setHighlightedIndex(nextHighlightedIndex, {
Enter: function Enter(event) {
if (event.which === 229) {
var _this$getState2 = this.getState(),
isOpen = _this$getState2.isOpen,
highlightedIndex = _this$getState2.highlightedIndex;
if (isOpen && highlightedIndex != null) {
var item = this.items[highlightedIndex];
var itemNode = this.getItemNodeFromIndex(highlightedIndex);
if (item == null || itemNode && itemNode.hasAttribute('disabled')) {
this.selectHighlightedItem({
Escape: function Escape(event) {
this.reset(extends_extends({
}, !this.state.isOpen && {
_this.buttonKeyDownHandlers = extends_extends({}, _this.keyDownHandlers, {
_this.inputKeyDownHandlers = extends_extends({}, _this.keyDownHandlers, {
Home: function Home(event) {
var _this$getState3 = this.getState(),
isOpen = _this$getState3.isOpen;
var itemCount = this.getItemCount();
if (itemCount <= 0 || !isOpen) {
} // get next non-disabled starting downwards from 0 if that's disabled.
var newHighlightedIndex = getNextNonDisabledIndex(1, 0, itemCount, function (index) {
return _this4.getItemNodeFromIndex(index);
this.setHighlightedIndex(newHighlightedIndex, {
End: function End(event) {
var _this$getState4 = this.getState(),
isOpen = _this$getState4.isOpen;
var itemCount = this.getItemCount();
if (itemCount <= 0 || !isOpen) {