: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
type: ToggleButtonKeyDownArrowDown,
type: ToggleButtonKeyDownArrowUp,
}), [dispatch, getItemNodeFromIndex]);
const menuKeyDownHandlers = (0,external_React_.useMemo)(() => ({
type: MenuKeyDownArrowDown,
type: MenuKeyDownArrowUp,
type: MenuKeyDownSpaceButton
}), [dispatch, getItemNodeFromIndex]); // Action functions.
const toggleMenu = (0,external_React_.useCallback)(() => {
type: FunctionToggleMenu$1
const closeMenu = (0,external_React_.useCallback)(() => {
type: FunctionCloseMenu$1
const openMenu = (0,external_React_.useCallback)(() => {
const setHighlightedIndex = (0,external_React_.useCallback)(newHighlightedIndex => {
type: FunctionSetHighlightedIndex$1,
highlightedIndex: newHighlightedIndex
const selectItem = (0,external_React_.useCallback)(newSelectedItem => {
type: FunctionSelectItem$1,
selectedItem: newSelectedItem
const reset = (0,external_React_.useCallback)(() => {
const setInputValue = (0,external_React_.useCallback)(newInputValue => {
type: FunctionSetInputValue$1,
inputValue: newInputValue
}, [dispatch]); // Getter functions.
const getLabelProps = (0,external_React_.useCallback)(labelProps => ({
htmlFor: elementIds.toggleButtonId,
const getMenuProps = (0,external_React_.useCallback)(function (_temp, _temp2) {
} = _temp === void 0 ? {} : _temp;
} = _temp2 === void 0 ? {} : _temp2;
const latestState = latest.current.state;
const menuHandleKeyDown = event => {
const key = normalizeArrowKey(event);
if (key && menuKeyDownHandlers[key]) {
menuKeyDownHandlers[key](event);
} else if (isAcceptedCharacterKey(key)) {
type: MenuKeyDownCharacter,
const menuHandleBlur = () => {
// if the blur was a result of selection, we don't trigger this action.
if (shouldBlurRef.current === false) {
shouldBlurRef.current = true;
const shouldBlur = !mouseAndTouchTrackersRef.current.isMouseDown;
/* istanbul ignore else */
const menuHandleMouseLeave = () => {
setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
[refKey]: handleRefs(ref, menuNode => {
menuRef.current = menuNode;
'aria-labelledby': elementIds.labelId,
...(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]);
const getToggleButtonProps = (0,external_React_.useCallback)(function (_temp3, _temp4) {
} = _temp3 === void 0 ? {} : _temp3;
} = _temp4 === void 0 ? {} : _temp4;
const toggleButtonHandleClick = () => {
type: ToggleButtonClick$1
const toggleButtonHandleKeyDown = event => {
const key = normalizeArrowKey(event);
if (key && toggleButtonKeyDownHandlers[key]) {
toggleButtonKeyDownHandlers[key](event);
} else if (isAcceptedCharacterKey(key)) {
type: ToggleButtonKeyDownCharacter,
[refKey]: handleRefs(ref, toggleButtonNode => {
toggleButtonRef.current = toggleButtonNode;
id: elementIds.toggleButtonId,
'aria-haspopup': 'listbox',
'aria-expanded': latest.current.state.isOpen,
'aria-labelledby': `${elementIds.labelId} ${elementIds.toggleButtonId}`,
toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick);
toggleProps.onKeyDown = callAllEventHandlers(onKeyDown, toggleButtonHandleKeyDown);
setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
}, [dispatch, latest, toggleButtonKeyDownHandlers, setGetterPropCallInfo, elementIds, getItemNodeFromIndex]);
const getItemProps = (0,external_React_.useCallback)(function (_temp5) {
} = _temp5 === void 0 ? {} : _temp5;
const itemHandleMouseMove = () => {
if (index === latestState.highlightedIndex) {
shouldScrollRef.current = false;
const itemHandleClick = () => {
const itemIndex = getItemIndex(index, item, latestProps.items);
throw new Error('Pass either item or item index in getItemProps!');
'aria-selected': `${itemIndex === latestState.highlightedIndex}`,
id: elementIds.getItemId(itemIndex),
[refKey]: handleRefs(ref, itemNode => {
itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
itemProps.onClick = callAllEventHandlers(onClick, itemHandleClick);
itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
}, [dispatch, latest, shouldScrollRef, elementIds]);
const InputKeyDownArrowDown = false ? 0 : 0;
const InputKeyDownArrowUp = false ? 0 : 1;
const InputKeyDownEscape = false ? 0 : 2;
const InputKeyDownHome = false ? 0 : 3;
const InputKeyDownEnd = false ? 0 : 4;
const InputKeyDownEnter = false ? 0 : 5;
const InputChange = false ? 0 : 6;
const InputBlur = false ? 0 : 7;
const MenuMouseLeave = false ? 0 : 8;
const ItemMouseMove = false ? 0 : 9;
const ItemClick = false ? 0 : 10;
const ToggleButtonClick = false ? 0 : 11;
const FunctionToggleMenu = false ? 0 : 12;
const FunctionOpenMenu = false ? 0 : 13;
const FunctionCloseMenu = false ? 0 : 14;
const FunctionSetHighlightedIndex = false ? 0 : 15;
const FunctionSelectItem = false ? 0 : 16;
const FunctionSetInputValue = false ? 0 : 17;
const FunctionReset$1 = false ? 0 : 18;
const ControlledPropUpdatedSelectedItem = false ? 0 : 19;
var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({
InputKeyDownArrowDown: InputKeyDownArrowDown,
InputKeyDownArrowUp: InputKeyDownArrowUp,
InputKeyDownEscape: InputKeyDownEscape,
InputKeyDownHome: InputKeyDownHome,
InputKeyDownEnd: InputKeyDownEnd,
InputKeyDownEnter: InputKeyDownEnter,
InputChange: InputChange,
MenuMouseLeave: MenuMouseLeave,
ItemMouseMove: ItemMouseMove,
ToggleButtonClick: ToggleButtonClick,
FunctionToggleMenu: FunctionToggleMenu,
FunctionOpenMenu: FunctionOpenMenu,
FunctionCloseMenu: FunctionCloseMenu,
FunctionSetHighlightedIndex: FunctionSetHighlightedIndex,
FunctionSelectItem: FunctionSelectItem,
FunctionSetInputValue: FunctionSetInputValue,
FunctionReset: FunctionReset$1,
ControlledPropUpdatedSelectedItem: ControlledPropUpdatedSelectedItem
function getInitialState$1(props) {
const initialState = getInitialState$2(props);
if (inputValue === '' && selectedItem && props.defaultInputValue === undefined && props.initialInputValue === undefined && props.inputValue === undefined) {
inputValue = props.itemToString(selectedItem);
return { ...initialState,
items: (prop_types_default()).array.isRequired,
itemToString: (prop_types_default()).func,
getA11yStatusMessage: (prop_types_default()).func,
getA11ySelectionMessage: (prop_types_default()).func,
circularNavigation: (prop_types_default()).bool,
highlightedIndex: (prop_types_default()).number,
defaultHighlightedIndex: (prop_types_default()).number,
initialHighlightedIndex: (prop_types_default()).number,
isOpen: (prop_types_default()).bool,
defaultIsOpen: (prop_types_default()).bool,
initialIsOpen: (prop_types_default()).bool,
selectedItem: (prop_types_default()).any,
initialSelectedItem: (prop_types_default()).any,
defaultSelectedItem: (prop_types_default()).any,
inputValue: (prop_types_default()).string,
defaultInputValue: (prop_types_default()).string,
initialInputValue: (prop_types_default()).string,
id: (prop_types_default()).string,
labelId: (prop_types_default()).string,
menuId: (prop_types_default()).string,
getItemId: (prop_types_default()).func,
inputId: (prop_types_default()).string,
toggleButtonId: (prop_types_default()).string,
stateReducer: (prop_types_default()).func,
onSelectedItemChange: (prop_types_default()).func,
onHighlightedIndexChange: (prop_types_default()).func,
onStateChange: (prop_types_default()).func,
onIsOpenChange: (prop_types_default()).func,
onInputValueChange: (prop_types_default()).func,
environment: prop_types_default().shape({
addEventListener: (prop_types_default()).func,
removeEventListener: (prop_types_default()).func,
document: prop_types_default().shape({
getElementById: (prop_types_default()).func,
activeElement: (prop_types_default()).any,
body: (prop_types_default()).any
* The useCombobox version of useControlledReducer, which also
* checks if the controlled prop selectedItem changed between
* renders. If so, it will also update inputValue with its
* string equivalent. It uses the common useEnhancedReducer to
* compute the rest of the state.
* @param {Function} reducer Reducer function from downshift.
* @param {Object} initialState Initial state of the hook.
* @param {Object} props The hook props.
* @returns {Array} An array with the state and an action dispatcher.
function useControlledReducer(reducer, initialState, props) {
const previousSelectedItemRef = (0,external_React_.useRef)();
const [state, dispatch] = useEnhancedReducer(reducer, initialState, props); // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
(0,external_React_.useEffect)(() => {
if (isControlledProp(props, 'selectedItem')) {
if (previousSelectedItemRef.current !== props.selectedItem) {
type: ControlledPropUpdatedSelectedItem,
inputValue: props.itemToString(props.selectedItem)
previousSelectedItemRef.current = state.selectedItem === previousSelectedItemRef.current ? props.selectedItem : state.selectedItem;
return [getState(state, props), dispatch];
} // eslint-disable-next-line import/no-mutable-exports
let validatePropTypes$1 = downshift_esm_noop;
/* istanbul ignore next */
const defaultProps$1 = { ...defaultProps$3,
getA11yStatusMessage: getA11yStatusMessage$1,
/* eslint-disable complexity */
function downshiftUseComboboxReducer(state, action) {
isOpen: getDefaultValue$1(props, 'isOpen'),
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
selectedItem: props.items[action.index],
inputValue: props.itemToString(props.items[action.index])
case InputKeyDownArrowDown:
highlightedIndex: getNextWrappingIndex(shiftKey ? 5 : 1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation)
highlightedIndex: getHighlightedIndexOnOpen(props, state, 1, action.getItemNodeFromIndex),
isOpen: props.items.length >= 0