}), _extends3.role = 'option', _extends3['aria-selected'] = "" + (itemIndex === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(itemIndex), _extends3), !rest.disabled && (_ref4 = {
onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove)
}, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), rest);
}, [dispatch, latest, shouldScrollRef, elementIds]);
var getToggleButtonProps = Object(external_React_["useCallback"])(function (_temp4) {
var _ref5 = _temp4 === void 0 ? {} : _temp4,
var _ref5$refKey = _ref5.refKey,
refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref5, _excluded3);
var toggleButtonHandleClick = function toggleButtonHandleClick() {
if (!latest.current.state.isOpen && inputRef.current) {
inputRef.current.focus();
return extends_extends((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (toggleButtonNode) {
toggleButtonRef.current = toggleButtonNode;
}), _extends4.id = elementIds.toggleButtonId, _extends4.tabIndex = -1, _extends4), !rest.disabled && extends_extends({}, {
onClick: callAllEventHandlers(onClick, toggleButtonHandleClick)
}, [dispatch, latest, elementIds]);
var getInputProps = Object(external_React_["useCallback"])(function (_temp5, _temp6) {
var _ref6 = _temp5 === void 0 ? {} : _temp5,
onKeyDown = _ref6.onKeyDown,
onChange = _ref6.onChange,
var _ref6$refKey = _ref6.refKey,
refKey = _ref6$refKey === void 0 ? 'ref' : _ref6$refKey,
rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref6, _excluded4);
var _ref7 = _temp6 === void 0 ? {} : _temp6,
_ref7$suppressRefErro = _ref7.suppressRefError,
suppressRefError = _ref7$suppressRefErro === void 0 ? false : _ref7$suppressRefErro;
setGetterPropCallInfo('getInputProps', suppressRefError, refKey, inputRef);
var latestState = latest.current.state;
var inputHandleKeyDown = function inputHandleKeyDown(event) {
var key = normalizeArrowKey(event);
if (key && inputKeyDownHandlers[key]) {
inputKeyDownHandlers[key](event);
var inputHandleChange = function inputHandleChange(event) {
inputValue: event.target.value
var inputHandleBlur = function inputHandleBlur() {
/* istanbul ignore else */
if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
/* istanbul ignore next (preact) */
var onChangeKey = 'onChange';
eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, inputHandleBlur), _eventHandlers);
return extends_extends((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) {
inputRef.current = inputNode;
}), _extends5.id = elementIds.inputId, _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.menuId, _extends5), latestState.isOpen && latestState.highlightedIndex > -1 && {
'aria-activedescendant': elementIds.getItemId(latestState.highlightedIndex)
'aria-labelledby': elementIds.labelId,
// https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
// revert back since autocomplete="nope" is ignored on latest Chrome and Opera
value: latestState.inputValue
}, [dispatch, inputKeyDownHandlers, latest, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds]);
var getComboboxProps = Object(external_React_["useCallback"])(function (_temp7, _temp8) {
var _ref8 = _temp7 === void 0 ? {} : _temp7,
_ref8$refKey = _ref8.refKey,
refKey = _ref8$refKey === void 0 ? 'ref' : _ref8$refKey,
rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref8, _excluded5);
var _ref9 = _temp8 === void 0 ? {} : _temp8,
_ref9$suppressRefErro = _ref9.suppressRefError,
suppressRefError = _ref9$suppressRefErro === void 0 ? false : _ref9$suppressRefErro;
setGetterPropCallInfo('getComboboxProps', suppressRefError, refKey, comboboxRef);
return extends_extends((_extends6 = {}, _extends6[refKey] = handleRefs(ref, function (comboboxNode) {
comboboxRef.current = comboboxNode;
}), _extends6.role = 'combobox', _extends6['aria-haspopup'] = 'listbox', _extends6['aria-owns'] = elementIds.menuId, _extends6['aria-expanded'] = latest.current.state.isOpen, _extends6), rest);
}, [latest, setGetterPropCallInfo, elementIds]); // returns
var toggleMenu = Object(external_React_["useCallback"])(function () {
var closeMenu = Object(external_React_["useCallback"])(function () {
var openMenu = Object(external_React_["useCallback"])(function () {
var setHighlightedIndex = Object(external_React_["useCallback"])(function (newHighlightedIndex) {
type: FunctionSetHighlightedIndex,
highlightedIndex: newHighlightedIndex
var selectItem = Object(external_React_["useCallback"])(function (newSelectedItem) {
type: FunctionSelectItem,
selectedItem: newSelectedItem
var setInputValue = Object(external_React_["useCallback"])(function (newInputValue) {
type: FunctionSetInputValue,
inputValue: newInputValue
var reset = Object(external_React_["useCallback"])(function () {
getItemProps: getItemProps,
getLabelProps: getLabelProps,
getMenuProps: getMenuProps,
getInputProps: getInputProps,
getComboboxProps: getComboboxProps,
getToggleButtonProps: getToggleButtonProps,
setHighlightedIndex: setHighlightedIndex,
setInputValue: setInputValue,
highlightedIndex: highlightedIndex,
selectedItem: selectedItem,
var defaultStateValues = {
* Returns the initial value for a state key in the following order:
* 1. controlled prop, 2. initial prop, 3. default prop, 4. default
* @param {Object} props Props passed to the hook.
* @param {string} propKey Props key to generate the value for.
* @returns {any} The initial value for that prop.
function getInitialValue(props, propKey) {
return getInitialValue$1(props, propKey, defaultStateValues);
* Returns the default value for a state key in the following order:
* 1. controlled prop, 2. default prop, 3. default value from Downshift.
* @param {Object} props Props passed to the hook.
* @param {string} propKey Props key to generate the value for.
* @returns {any} The initial value for that prop.
function getDefaultValue(props, propKey) {
return getDefaultValue$1(props, propKey, defaultStateValues);
* Gets the initial state based on the provided props. It uses initial, default
* and controlled props related to state in order to compute the initial value.
* @param {Object} props Props passed to the hook.
* @returns {Object} The initial state.
function downshift_esm_getInitialState(props) {
var activeIndex = getInitialValue(props, 'activeIndex');
var selectedItems = getInitialValue(props, 'selectedItems');
activeIndex: activeIndex,
selectedItems: selectedItems
* Returns true if dropdown keydown operation is permitted. Should not be
* allowed on keydown with modifier keys (ctrl, alt, shift, meta), on
* input element with text content that is either highlighted or selection
* cursor is not at the starting position.
* @param {KeyboardEvent} event The event from keydown.
* @returns {boolean} Whether the operation is allowed.
function isKeyDownOperationPermitted(event) {
if (event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) {
var element = event.target;
if (element instanceof HTMLInputElement && // if element is a text input
element.value !== '' && (element.selectionStart !== 0 || element.selectionEnd !== 0)) {
* Returns a message to be added to aria-live region when item is removed.
* @param {Object} selectionParameters Parameters required to build the message.
* @returns {string} The a11y message.
function downshift_esm_getA11yRemovalMessage(selectionParameters) {
var removedSelectedItem = selectionParameters.removedSelectedItem,
itemToStringLocal = selectionParameters.itemToString;
return itemToStringLocal(removedSelectedItem) + " has been removed.";
selectedItems: prop_types_default.a.array,
initialSelectedItems: prop_types_default.a.array,
defaultSelectedItems: prop_types_default.a.array,
itemToString: prop_types_default.a.func,
getA11yRemovalMessage: prop_types_default.a.func,
stateReducer: prop_types_default.a.func,
activeIndex: prop_types_default.a.number,
initialActiveIndex: prop_types_default.a.number,
defaultActiveIndex: prop_types_default.a.number,
onActiveIndexChange: prop_types_default.a.func,
onSelectedItemsChange: prop_types_default.a.func,
keyNavigationNext: prop_types_default.a.string,
keyNavigationPrevious: prop_types_default.a.string,
environment: prop_types_default.a.shape({
addEventListener: prop_types_default.a.func,
removeEventListener: prop_types_default.a.func,
document: prop_types_default.a.shape({
getElementById: prop_types_default.a.func,
activeElement: prop_types_default.a.any,
body: prop_types_default.a.any
var downshift_esm_defaultProps = {
itemToString: defaultProps$3.itemToString,
stateReducer: defaultProps$3.stateReducer,
environment: defaultProps$3.environment,
getA11yRemovalMessage: downshift_esm_getA11yRemovalMessage,
keyNavigationNext: 'ArrowRight',
keyNavigationPrevious: 'ArrowLeft'
}; // eslint-disable-next-line import/no-mutable-exports
var validatePropTypes = downshift_esm_noop;
/* istanbul ignore next */
var SelectedItemClick = false ? undefined : 0;
var SelectedItemKeyDownDelete = false ? undefined : 1;
var SelectedItemKeyDownBackspace = false ? undefined : 2;
var SelectedItemKeyDownNavigationNext = false ? undefined : 3;
var SelectedItemKeyDownNavigationPrevious = false ? undefined : 4;
var DropdownKeyDownNavigationPrevious = false ? undefined : 5;
var DropdownKeyDownBackspace = false ? undefined : 6;
var DropdownClick = false ? undefined : 7;
var FunctionAddSelectedItem = false ? undefined : 8;
var FunctionRemoveSelectedItem = false ? undefined : 9;
var FunctionSetSelectedItems = false ? undefined : 10;
var FunctionSetActiveIndex = false ? undefined : 11;
var FunctionReset = false ? undefined : 12;
var downshift_esm_stateChangeTypes = /*#__PURE__*/Object.freeze({
SelectedItemClick: SelectedItemClick,
SelectedItemKeyDownDelete: SelectedItemKeyDownDelete,
SelectedItemKeyDownBackspace: SelectedItemKeyDownBackspace,
SelectedItemKeyDownNavigationNext: SelectedItemKeyDownNavigationNext,
SelectedItemKeyDownNavigationPrevious: SelectedItemKeyDownNavigationPrevious,
DropdownKeyDownNavigationPrevious: DropdownKeyDownNavigationPrevious,
DropdownKeyDownBackspace: DropdownKeyDownBackspace,
DropdownClick: DropdownClick,
FunctionAddSelectedItem: FunctionAddSelectedItem,
FunctionRemoveSelectedItem: FunctionRemoveSelectedItem,
FunctionSetSelectedItems: FunctionSetSelectedItems,
FunctionSetActiveIndex: FunctionSetActiveIndex,
FunctionReset: FunctionReset
/* eslint-disable complexity */
function downshiftMultipleSelectionReducer(state, action) {
selectedItem = action.selectedItem;
var activeIndex = state.activeIndex,
selectedItems = state.selectedItems;
case SelectedItemKeyDownNavigationPrevious:
activeIndex: activeIndex - 1 < 0 ? 0 : activeIndex - 1
case SelectedItemKeyDownNavigationNext:
activeIndex: activeIndex + 1 >= selectedItems.length ? -1 : activeIndex + 1
case SelectedItemKeyDownBackspace:
case SelectedItemKeyDownDelete:
var newActiveIndex = activeIndex;
if (selectedItems.length === 1) {
} else if (activeIndex === selectedItems.length - 1) {
newActiveIndex = selectedItems.length - 2;
changes = extends_extends({
selectedItems: [].concat(selectedItems.slice(0, activeIndex), selectedItems.slice(activeIndex + 1))
activeIndex: newActiveIndex
case DropdownKeyDownNavigationPrevious:
activeIndex: selectedItems.length - 1
case DropdownKeyDownBackspace:
selectedItems: selectedItems.slice(0, selectedItems.length - 1)
case FunctionAddSelectedItem:
selectedItems: [].concat(selectedItems, [selectedItem])
case FunctionRemoveSelectedItem:
var _newActiveIndex = activeIndex;
var selectedItemIndex = selectedItems.indexOf(selectedItem);
if (selectedItems.length === 1) {
} else if (selectedItemIndex === selectedItems.length - 1) {
_newActiveIndex = selectedItems.length - 2;
changes = extends_extends({
selectedItems: [].concat(selectedItems.slice(0, selectedItemIndex), selectedItems.slice(selectedItemIndex + 1))
activeIndex: _newActiveIndex
case FunctionSetSelectedItems:
var newSelectedItems = action.selectedItems;
selectedItems: newSelectedItems
case FunctionSetActiveIndex:
var _newActiveIndex2 = action.activeIndex;
activeIndex: _newActiveIndex2
activeIndex: getDefaultValue(props, 'activeIndex'),
selectedItems: getDefaultValue(props, 'selectedItems')
throw new Error('Reducer called without proper action type.');
return extends_extends({}, state, changes);
var _excluded = ["refKey", "ref", "onClick", "onKeyDown", "selectedItem", "index"],
_excluded2 = ["refKey", "ref", "onKeyDown", "onClick", "preventKeyAction"];
useMultipleSelection.stateChangeTypes = downshift_esm_stateChangeTypes;
function useMultipleSelection(userProps) {
if (userProps === void 0) {
validatePropTypes(userProps, useMultipleSelection); // Props defaults and destructuring.
var props = extends_extends({}, downshift_esm_defaultProps, userProps);
var getA11yRemovalMessage = props.getA11yRemovalMessage,
itemToString = props.itemToString,
environment = props.environment,
keyNavigationNext = props.keyNavigationNext,
keyNavigationPrevious = props.keyNavigationPrevious; // Reducer init.
var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, downshift_esm_getInitialState(props), props),
state = _useControlledReducer[0],
dispatch = _useControlledReducer[1];
var activeIndex = state.activeIndex,
selectedItems = state.selectedItems; // Refs.
var isInitialMountRef = Object(external_React_["useRef"])(true);
var dropdownRef = Object(external_React_["useRef"])(null);
var previousSelectedItemsRef = Object(external_React_["useRef"])(selectedItems);
var selectedItemRefs = Object(external_React_["useRef"])();
selectedItemRefs.current = [];
var latest = useLatestRef({
/* Sets a11y status message on changes in selectedItem. */
Object(external_React_["useEffect"])(function () {
if (isInitialMountRef.current) {