: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
Downshift.defaultProps = {
defaultHighlightedIndex: null,
getA11yStatusMessage: getA11yStatusMessage$1,
onStateChange: downshift_esm_noop,
onInputValueChange: downshift_esm_noop,
onUserAction: downshift_esm_noop,
onChange: downshift_esm_noop,
onSelect: downshift_esm_noop,
onOuterClick: downshift_esm_noop,
selectedItemChanged: (prevItem, item) => prevItem !== item,
/* istanbul ignore next (ssr) */
typeof window === 'undefined' ? {} : window,
stateReducer: (state, stateToSet) => stateToSet,
Downshift.stateChangeTypes = stateChangeTypes$3;
var Downshift$1 = (/* unused pure expression or super */ null && (Downshift));
function validateGetMenuPropsCalledCorrectly(node, _ref3) {
// eslint-disable-next-line no-console
console.error(`downshift: The ref prop "${refKey}" from getMenuProps was not applied correctly on your menu element.`);
function validateGetRootPropsCalledCorrectly(element, _ref4) {
const refKeySpecified = refKey !== 'ref';
const isComposite = !isDOMElement(element);
if (isComposite && !refKeySpecified && !isForwardRef(element)) {
// eslint-disable-next-line no-console
console.error('downshift: You returned a non-DOM element. You must specify a refKey in getRootProps');
} else if (!isComposite && refKeySpecified) {
// eslint-disable-next-line no-console
console.error(`downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified "${refKey}"`);
if (!isForwardRef(element) && !getElementProps(element)[refKey]) {
// eslint-disable-next-line no-console
console.error(`downshift: You must apply the ref prop "${refKey}" from getRootProps onto your root element.`);
const dropdownDefaultStateValues = {
function callOnChangeProps(action, state, newState) {
Object.keys(state).forEach(key => {
invokeOnChangeHandler(key, action, state, newState);
if (newState[key] !== state[key]) {
changes[key] = newState[key];
if (props.onStateChange && Object.keys(changes).length) {
function invokeOnChangeHandler(key, action, state, newState) {
const handler = `on${capitalizeString(key)}Change`;
if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
* Default state reducer that returns the changes.
* @param {Object} s state.
* @param {Object} a action with changes.
* @returns {Object} changes.
function stateReducer(s, a) {
* Returns a message to be added to aria-live region when item is selected.
* @param {Object} selectionParameters Parameters required to build the message.
* @returns {string} The a11y message.
function getA11ySelectionMessage(selectionParameters) {
itemToString: itemToStringLocal
return selectedItem ? `${itemToStringLocal(selectedItem)} has been selected.` : '';
* Debounced call for updating the a11y message.
const updateA11yStatus = debounce((getA11yMessage, document) => {
setStatus(getA11yMessage(), document);
}, 200); // istanbul ignore next
const downshift_esm_useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? external_React_.useLayoutEffect : external_React_.useEffect;
function useElementIds(_ref) {
id = `downshift-${generateId()}`,
const elementIdsRef = (0,external_React_.useRef)({
labelId: labelId || `${id}-label`,
menuId: menuId || `${id}-menu`,
getItemId: getItemId || (index => `${id}-item-${index}`),
toggleButtonId: toggleButtonId || `${id}-toggle-button`,
inputId: inputId || `${id}-input`
return elementIdsRef.current;
function getItemIndex(index, item, items) {
if (index !== undefined) {
if (items.length === 0) {
return items.indexOf(item);
function itemToString(item) {
return item ? String(item) : '';
function isAcceptedCharacterKey(key) {
return /^\S{1}$/.test(key);
function capitalizeString(string) {
return `${string.slice(0, 1).toUpperCase()}${string.slice(1)}`;
function downshift_esm_useLatestRef(val) {
const ref = (0,external_React_.useRef)(val); // technically this is not "concurrent mode safe" because we're manipulating
// the value during render (so it's not idempotent). However, the places this
// hook is used is to support memoizing callbacks which will be called
// *during* render, so we need the latest values *during* render.
// If not for this, then we'd probably want to use useLayoutEffect instead.
* Computes the controlled state using a the previous state, props,
* two reducers, one from downshift and an optional one from the user.
* Also calls the onChange handlers for state values that have changed.
* @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 useEnhancedReducer(reducer, initialState, props) {
const prevStateRef = (0,external_React_.useRef)();
const actionRef = (0,external_React_.useRef)();
const enhancedReducer = (0,external_React_.useCallback)((state, action) => {
actionRef.current = action;
state = getState(state, action.props);
const changes = reducer(state, action);
const newState = action.props.stateReducer(state, { ...action,
const [state, dispatch] = (0,external_React_.useReducer)(enhancedReducer, initialState);
const propsRef = downshift_esm_useLatestRef(props);
const dispatchWithProps = (0,external_React_.useCallback)(action => dispatch({
const action = actionRef.current;
(0,external_React_.useEffect)(() => {
if (action && prevStateRef.current && prevStateRef.current !== state) {
callOnChangeProps(action, getState(prevStateRef.current, action.props), state);
prevStateRef.current = state;
}, [state, props, action]);
return [state, dispatchWithProps];
* Wraps the useEnhancedReducer and applies the controlled prop values before
* returning the new 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$1(reducer, initialState, props) {
const [state, dispatch] = useEnhancedReducer(reducer, initialState, props);
return [getState(state, props), dispatch];
circularNavigation: false,
/* istanbul ignore next (ssr) */
typeof window === 'undefined' ? {} : window
function getDefaultValue$1(props, propKey, defaultStateValues) {
if (defaultStateValues === void 0) {
defaultStateValues = dropdownDefaultStateValues;
const defaultValue = props[`default${capitalizeString(propKey)}`];
if (defaultValue !== undefined) {
return defaultStateValues[propKey];
function getInitialValue$1(props, propKey, defaultStateValues) {
if (defaultStateValues === void 0) {
defaultStateValues = dropdownDefaultStateValues;
const value = props[propKey];
if (value !== undefined) {
const initialValue = props[`initial${capitalizeString(propKey)}`];
if (initialValue !== undefined) {
return getDefaultValue$1(props, propKey, defaultStateValues);
function getInitialState$2(props) {
const selectedItem = getInitialValue$1(props, 'selectedItem');
const isOpen = getInitialValue$1(props, 'isOpen');
const highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
const inputValue = getInitialValue$1(props, 'inputValue');
highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.indexOf(selectedItem) : highlightedIndex,
function getHighlightedIndexOnOpen(props, state, offset, getItemNodeFromIndex) {
if (items.length === 0) {
} // initialHighlightedIndex will give value to highlightedIndex on initial state only.
if (initialHighlightedIndex !== undefined && highlightedIndex === initialHighlightedIndex) {
return initialHighlightedIndex;
if (defaultHighlightedIndex !== undefined) {
return defaultHighlightedIndex;
return items.indexOf(selectedItem);
return getNextWrappingIndex(offset, items.indexOf(selectedItem), items.length, getItemNodeFromIndex, false);
return offset < 0 ? items.length - 1 : 0;
* Reuse the movement tracking of mouse and touch events.
* @param {boolean} isOpen Whether the dropdown is open or not.
* @param {Array<Object>} downshiftElementRefs Downshift element refs to track movement (toggleButton, menu etc.)
* @param {Object} environment Environment where component/hook exists.
* @param {Function} handleBlur Handler on blur from mouse or touch.
* @returns {Object} Ref containing whether mouseDown or touchMove event is happening
function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) {
const mouseAndTouchTrackersRef = (0,external_React_.useRef)({
(0,external_React_.useEffect)(() => {
// The same strategy for checking if a click occurred inside or outside downsift
const onMouseDown = () => {
mouseAndTouchTrackersRef.current.isMouseDown = true;
const onMouseUp = event => {
mouseAndTouchTrackersRef.current.isMouseDown = false;
if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(ref => ref.current), environment)) {
const onTouchStart = () => {
mouseAndTouchTrackersRef.current.isTouchMove = false;
const onTouchMove = () => {
mouseAndTouchTrackersRef.current.isTouchMove = true;
const onTouchEnd = event => {
if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(ref => ref.current), environment, false)) {
environment.addEventListener('mousedown', onMouseDown);
environment.addEventListener('mouseup', onMouseUp);
environment.addEventListener('touchstart', onTouchStart);
environment.addEventListener('touchmove', onTouchMove);
environment.addEventListener('touchend', onTouchEnd);
return function cleanup() {
environment.removeEventListener('mousedown', onMouseDown);
environment.removeEventListener('mouseup', onMouseUp);
environment.removeEventListener('touchstart', onTouchStart);
environment.removeEventListener('touchmove', onTouchMove);
environment.removeEventListener('touchend', onTouchEnd);
}; // eslint-disable-next-line react-hooks/exhaustive-deps
}, [isOpen, environment]);
return mouseAndTouchTrackersRef;
/* istanbul ignore next */
// eslint-disable-next-line import/no-mutable-exports
let useGetterPropsCalledChecker = () => downshift_esm_noop;
* Custom hook that checks if getter props are called correctly.
* @param {...any} propKeys Getter prop names to be handled.
* @returns {Function} Setter function called inside getter props to set call information.
/* istanbul ignore next */
function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref2) {
// Sets a11y status message on changes in state.
(0,external_React_.useEffect)(() => {
if (isInitialMount || false) {
updateA11yStatus(() => getA11yMessage({
highlightedItem: items[highlightedIndex],
resultCount: items.length,
}), environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
function useScrollIntoView(_ref3) {
scrollIntoView: scrollIntoViewProp
// used not to scroll on highlight by mouse.
const shouldScrollRef = (0,external_React_.useRef)(true); // Scroll on highlighted item if change comes from keyboard.
downshift_esm_useIsomorphicLayoutEffect(() => {
if (highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length) {
if (shouldScrollRef.current === false) {
shouldScrollRef.current = true;
scrollIntoViewProp(getItemNodeFromIndex(highlightedIndex), menuElement);
} // eslint-disable-next-line react-hooks/exhaustive-deps
} // eslint-disable-next-line import/no-mutable-exports
let useControlPropsValidator = downshift_esm_noop;
/* istanbul ignore next */
/* eslint-disable complexity */
function downshiftCommonReducer(state, action, stateChangeTypes) {
It is recommended that you Edit text format, this type of Fix handles quite a lot in one request
