: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
case stateChangeTypes.ItemMouseMove:
highlightedIndex: action.disabled ? -1 : action.index
case stateChangeTypes.MenuMouseLeave:
case stateChangeTypes.ToggleButtonClick:
case stateChangeTypes.FunctionToggleMenu:
highlightedIndex: state.isOpen ? -1 : getHighlightedIndexOnOpen(props, state, 0)
case stateChangeTypes.FunctionOpenMenu:
highlightedIndex: getHighlightedIndexOnOpen(props, state, 0)
case stateChangeTypes.FunctionCloseMenu:
case stateChangeTypes.FunctionSetHighlightedIndex:
highlightedIndex: action.highlightedIndex
case stateChangeTypes.FunctionSetInputValue:
inputValue: action.inputValue
case stateChangeTypes.FunctionReset:
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
isOpen: getDefaultValue$1(props, 'isOpen'),
selectedItem: getDefaultValue$1(props, 'selectedItem'),
inputValue: getDefaultValue$1(props, 'inputValue')
throw new Error('Reducer called without proper action type.');
/* eslint-enable complexity */
function getItemIndexByCharacterKey(_a) {
var keysSoFar = _a.keysSoFar, highlightedIndex = _a.highlightedIndex, items = _a.items, itemToString = _a.itemToString, getItemNodeFromIndex = _a.getItemNodeFromIndex;
var lowerCasedKeysSoFar = keysSoFar.toLowerCase();
for (var index = 0; index < items.length; index++) {
var offsetIndex = (index + highlightedIndex + 1) % items.length;
var item = items[offsetIndex];
if (item !== undefined &&
.startsWith(lowerCasedKeysSoFar)) {
var element = getItemNodeFromIndex(offsetIndex);
if (!(element === null || element === void 0 ? void 0 : element.hasAttribute('disabled'))) {
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,
id: (prop_types_default()).string,
labelId: (prop_types_default()).string,
menuId: (prop_types_default()).string,
getItemId: (prop_types_default()).func,
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,
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
* Default implementation for status message. Only added when menu is open.
* Will specift if there are results in the list, and if so, how many,
* and what keys are relevant.
* @param {Object} param the downshift state and other relevant properties
* @return {String} the a11y status message
function getA11yStatusMessage(_a) {
var isOpen = _a.isOpen, resultCount = _a.resultCount, previousResultCount = _a.previousResultCount;
return 'No results are available.';
if (resultCount !== previousResultCount) {
return "".concat(resultCount, " result").concat(resultCount === 1 ? ' is' : 's are', " available, use up and down arrow keys to navigate. Press Enter or Space Bar keys to select.");
var defaultProps$2 = __assign(__assign({}, defaultProps$3), { getA11yStatusMessage: getA11yStatusMessage });
// eslint-disable-next-line import/no-mutable-exports
var validatePropTypes$2 = downshift_esm_noop;
/* istanbul ignore next */
const MenuKeyDownArrowDown = false ? 0 : 0;
const MenuKeyDownArrowUp = false ? 0 : 1;
const MenuKeyDownEscape = false ? 0 : 2;
const MenuKeyDownHome = false ? 0 : 3;
const MenuKeyDownEnd = false ? 0 : 4;
const MenuKeyDownEnter = false ? 0 : 5;
const MenuKeyDownSpaceButton = false ? 0 : 6;
const MenuKeyDownCharacter = false ? 0 : 7;
const MenuBlur = false ? 0 : 8;
const MenuMouseLeave$1 = false ? 0 : 9;
const ItemMouseMove$1 = false ? 0 : 10;
const ItemClick$1 = false ? 0 : 11;
const ToggleButtonClick$1 = false ? 0 : 12;
const ToggleButtonKeyDownArrowDown = false ? 0 : 13;
const ToggleButtonKeyDownArrowUp = false ? 0 : 14;
const ToggleButtonKeyDownCharacter = false ? 0 : 15;
const FunctionToggleMenu$1 = false ? 0 : 16;
const FunctionOpenMenu$1 = false ? 0 : 17;
const FunctionCloseMenu$1 = false ? 0 : 18;
const FunctionSetHighlightedIndex$1 = false ? 0 : 19;
const FunctionSelectItem$1 = false ? 0 : 20;
const FunctionSetInputValue$1 = false ? 0 : 21;
const FunctionReset$2 = false ? 0 : 22;
var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
MenuKeyDownArrowDown: MenuKeyDownArrowDown,
MenuKeyDownArrowUp: MenuKeyDownArrowUp,
MenuKeyDownEscape: MenuKeyDownEscape,
MenuKeyDownHome: MenuKeyDownHome,
MenuKeyDownEnd: MenuKeyDownEnd,
MenuKeyDownEnter: MenuKeyDownEnter,
MenuKeyDownSpaceButton: MenuKeyDownSpaceButton,
MenuKeyDownCharacter: MenuKeyDownCharacter,
MenuMouseLeave: MenuMouseLeave$1,
ItemMouseMove: ItemMouseMove$1,
ToggleButtonClick: ToggleButtonClick$1,
ToggleButtonKeyDownArrowDown: ToggleButtonKeyDownArrowDown,
ToggleButtonKeyDownArrowUp: ToggleButtonKeyDownArrowUp,
ToggleButtonKeyDownCharacter: ToggleButtonKeyDownCharacter,
FunctionToggleMenu: FunctionToggleMenu$1,
FunctionOpenMenu: FunctionOpenMenu$1,
FunctionCloseMenu: FunctionCloseMenu$1,
FunctionSetHighlightedIndex: FunctionSetHighlightedIndex$1,
FunctionSelectItem: FunctionSelectItem$1,
FunctionSetInputValue: FunctionSetInputValue$1,
FunctionReset: FunctionReset$2
/* eslint-disable complexity */
function downshiftSelectReducer(state, action) {
isOpen: getDefaultValue$1(props, 'isOpen'),
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
selectedItem: props.items[action.index]
case ToggleButtonKeyDownCharacter:
const lowercasedKey = action.key;
const inputValue = `${state.inputValue}${lowercasedKey}`;
const itemIndex = getItemIndexByCharacterKey({
highlightedIndex: state.selectedItem ? props.items.indexOf(state.selectedItem) : -1,
itemToString: props.itemToString,
getItemNodeFromIndex: action.getItemNodeFromIndex
selectedItem: props.items[itemIndex]
case ToggleButtonKeyDownArrowDown:
highlightedIndex: getHighlightedIndexOnOpen(props, state, 1, action.getItemNodeFromIndex),
case ToggleButtonKeyDownArrowUp:
highlightedIndex: getHighlightedIndexOnOpen(props, state, -1, action.getItemNodeFromIndex),
case MenuKeyDownSpaceButton:
isOpen: getDefaultValue$1(props, 'isOpen'),
highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'),
...(state.highlightedIndex >= 0 && {
selectedItem: props.items[state.highlightedIndex]
highlightedIndex: getNextNonDisabledIndex(1, 0, props.items.length, action.getItemNodeFromIndex, false)
highlightedIndex: getNextNonDisabledIndex(-1, props.items.length - 1, props.items.length, action.getItemNodeFromIndex, false)
case MenuKeyDownCharacter:
const lowercasedKey = action.key;
const inputValue = `${state.inputValue}${lowercasedKey}`;
const highlightedIndex = getItemIndexByCharacterKey({
highlightedIndex: state.highlightedIndex,
itemToString: props.itemToString,
getItemNodeFromIndex: action.getItemNodeFromIndex
...(highlightedIndex >= 0 && {
case MenuKeyDownArrowDown:
highlightedIndex: getNextWrappingIndex(shiftKey ? 5 : 1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation)
highlightedIndex: getNextWrappingIndex(shiftKey ? -5 : -1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation)
case FunctionSelectItem$1:
selectedItem: action.selectedItem
return downshiftCommonReducer(state, action, stateChangeTypes$2);
/* eslint-enable complexity */
/* eslint-disable max-statements */
useSelect.stateChangeTypes = stateChangeTypes$2;
function useSelect(userProps) {
if (userProps === void 0) {
validatePropTypes$2(userProps, useSelect); // Props defaults and destructuring.
const props = { ...defaultProps$2,
} = props; // Initial state depending on controlled props.
const initialState = getInitialState$2(props);
const [state, dispatch] = useControlledReducer$1(downshiftSelectReducer, initialState, props);
} = state; // Element efs.
const toggleButtonRef = (0,external_React_.useRef)(null);
const menuRef = (0,external_React_.useRef)(null);
const itemRefs = (0,external_React_.useRef)({}); // used not to trigger menu blur action in some scenarios.
const shouldBlurRef = (0,external_React_.useRef)(true); // used to keep the inputValue clearTimeout object between renders.
const clearTimeoutRef = (0,external_React_.useRef)(null); // prevent id re-generation between renders.
const elementIds = useElementIds(props); // used to keep track of how many items we had on previous cycle.
const previousResultCountRef = (0,external_React_.useRef)();
const isInitialMountRef = (0,external_React_.useRef)(true); // utility callback to get item element.
const latest = downshift_esm_useLatestRef({
const getItemNodeFromIndex = (0,external_React_.useCallback)(index => itemRefs.current[elementIds.getItemId(index)], [elementIds]); // Effects.
// Sets a11y status message on changes in state.
useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], {
isInitialMount: isInitialMountRef.current,
previousResultCount: previousResultCountRef.current,
}); // Sets a11y status message on changes in selectedItem.
useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], {
isInitialMount: isInitialMountRef.current,
previousResultCount: previousResultCountRef.current,
}); // Scroll on highlighted item if change comes from keyboard.
const shouldScrollRef = useScrollIntoView({
menuElement: menuRef.current,
}); // Sets cleanup for the keysSoFar callback, debounded after 500ms.
(0,external_React_.useEffect)(() => {
// init the clean function here as we need access to dispatch.
clearTimeoutRef.current = debounce(outerDispatch => {
type: FunctionSetInputValue$1,
}, 500); // Cancel any pending debounced calls on mount
clearTimeoutRef.current.cancel();
}, []); // Invokes the keysSoFar callback set up above.
(0,external_React_.useEffect)(() => {
clearTimeoutRef.current(dispatch);
}, [dispatch, inputValue]);
useControlPropsValidator({
isInitialMount: isInitialMountRef.current,
/* Controls the focus on the menu or the toggle button. */
(0,external_React_.useEffect)(() => {
// 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
(0,external_React_.useEffect)(() => {
if (isInitialMountRef.current) {
previousResultCountRef.current = items.length;
}); // Add mouse/touch events to document.
const mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, () => {
const setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps'); // Make initial ref false.
(0,external_React_.useEffect)(() => {
isInitialMountRef.current = false;
}, []); // Reset itemRefs on close.
(0,external_React_.useEffect)(() => {
}, [isOpen]); // Event handler functions.
const toggleButtonKeyDownHandlers = (0,external_React_.useMemo)(() => ({
It is recommended that you Edit text format, this type of Fix handles quite a lot in one request
