selectedItem: selectedItem
} //////////////////////////// ROOT
_proto.componentDidMount = function componentDidMount() {
/* istanbul ignore if (react-native) */
/* istanbul ignore if (react-native) */
// this.isMouseDown helps us track whether the mouse is currently held down.
// This is useful when the user clicks on an item in the list, but holds the mouse
// down long enough for the list to disappear (because the blur event fires on the input)
// this.isMouseDown is used in the blur handler on the input to determine whether the blur event should
// trigger hiding the menu.
var onMouseDown = function onMouseDown() {
_this7.isMouseDown = true;
var onMouseUp = function onMouseUp(event) {
_this7.isMouseDown = false; // if the target element or the activeElement is within a downshift node
// then we don't want to reset downshift
var contextWithinDownshift = targetWithinDownshift(event.target, [_this7._rootNode, _this7._menuNode], _this7.props.environment);
if (!contextWithinDownshift && _this7.getState().isOpen) {
return _this7.props.onOuterClick(_this7.getStateAndHelpers());
}; // Touching an element in iOS gives focus and hover states, but touching out of
// the element will remove hover, and persist the focus state, resulting in the
// blur event not being triggered.
// this.isTouchMove helps us track whether the user is tapping or swiping on a touch screen.
// If the user taps outside of Downshift, the component should be reset,
// but not if the user is swiping
var onTouchStart = function onTouchStart() {
_this7.isTouchMove = false;
var onTouchMove = function onTouchMove() {
_this7.isTouchMove = true;
var onTouchEnd = function onTouchEnd(event) {
var contextWithinDownshift = targetWithinDownshift(event.target, [_this7._rootNode, _this7._menuNode], _this7.props.environment, false);
if (!_this7.isTouchMove && !contextWithinDownshift && _this7.getState().isOpen) {
return _this7.props.onOuterClick(_this7.getStateAndHelpers());
var environment = this.props.environment;
environment.addEventListener('mousedown', onMouseDown);
environment.addEventListener('mouseup', onMouseUp);
environment.addEventListener('touchstart', onTouchStart);
environment.addEventListener('touchmove', onTouchMove);
environment.addEventListener('touchend', onTouchEnd);
this.cleanup = function () {
_this7.internalClearTimeouts();
_this7.updateStatus.cancel();
environment.removeEventListener('mousedown', onMouseDown);
environment.removeEventListener('mouseup', onMouseUp);
environment.removeEventListener('touchstart', onTouchStart);
environment.removeEventListener('touchmove', onTouchMove);
environment.removeEventListener('touchend', onTouchEnd);
_proto.shouldScroll = function shouldScroll(prevState, prevProps) {
var _ref10 = this.props.highlightedIndex === undefined ? this.getState() : this.props,
currentHighlightedIndex = _ref10.highlightedIndex;
var _ref11 = prevProps.highlightedIndex === undefined ? prevState : prevProps,
prevHighlightedIndex = _ref11.highlightedIndex;
var scrollWhenOpen = currentHighlightedIndex && this.getState().isOpen && !prevState.isOpen;
var scrollWhenNavigating = currentHighlightedIndex !== prevHighlightedIndex;
return scrollWhenOpen || scrollWhenNavigating;
_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
if (isControlledProp(this.props, 'selectedItem') && this.props.selectedItemChanged(prevProps.selectedItem, this.props.selectedItem)) {
type: controlledPropUpdatedSelectedItem,
inputValue: this.props.itemToString(this.props.selectedItem)
if (!this.avoidScrolling && this.shouldScroll(prevState, prevProps)) {
this.scrollHighlightedItemIntoView();
/* istanbul ignore else (react-native) */
_proto.componentWillUnmount = function componentWillUnmount() {
this.cleanup(); // avoids memory leak
_proto.render = function render() {
var children = unwrapArray(this.props.children, downshift_esm_noop); // because the items are rerendered every time we call the children
// we clear this out each render and it will be populated again as
// getItemProps is called.
this.clearItems(); // we reset this so we know whether the user calls getRootProps during
// this render. If they do then we don't need to do anything,
// if they don't then we need to clone the element they return and
// apply the props for them.
this.getRootProps.called = false;
this.getRootProps.refKey = undefined;
this.getRootProps.suppressRefError = undefined; // we do something similar for getMenuProps
this.getMenuProps.called = false;
this.getMenuProps.refKey = undefined;
this.getMenuProps.suppressRefError = undefined; // we do something similar for getLabelProps
this.getLabelProps.called = false; // and something similar for getInputProps
this.getInputProps.called = false;
var element = unwrapArray(children(this.getStateAndHelpers()));
if (this.getRootProps.called || this.props.suppressRefError) {
} else if (isDOMElement(element)) {
// they didn't apply the root props, but we can clone
// this and apply the props ourselves
return /*#__PURE__*/Object(external_React_["cloneElement"])(element, this.getRootProps(getElementProps(element)));
/* istanbul ignore else */
/* istanbul ignore next */
}(external_React_["Component"]);
Downshift.defaultProps = {
defaultHighlightedIndex: null,
getA11yStatusMessage: getA11yStatusMessage$1,
itemToString: function itemToString(i) {
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: function selectedItemChanged(prevItem, item) {
return prevItem !== item;
/* istanbul ignore next (ssr) */
typeof window === 'undefined' ? {} : window,
stateReducer: function stateReducer(state, stateToSet) {
scrollIntoView: downshift_esm_scrollIntoView
Downshift.stateChangeTypes = stateChangeTypes$3;
false ? undefined : void 0;
var Downshift$1 = downshift_esm_Downshift;
function validateGetMenuPropsCalledCorrectly(node, _ref12) {
var refKey = _ref12.refKey;
// 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, _ref13) {
var refKey = _ref13.refKey;
var refKeySpecified = refKey !== 'ref';
var isComposite = !isDOMElement(element);
if (isComposite && !refKeySpecified && !Object(react_is["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 (!Object(react_is["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.");
var _excluded$3 = ["isInitialMount", "highlightedIndex", "items", "environment"];
var dropdownDefaultStateValues = {
function callOnChangeProps(action, state, newState) {
var props = action.props,
Object.keys(state).forEach(function (key) {
invokeOnChangeHandler(key, action, state, newState);
if (newState[key] !== state[key]) {
changes[key] = newState[key];
if (props.onStateChange && Object.keys(changes).length) {
props.onStateChange(extends_extends({
function invokeOnChangeHandler(key, action, state, newState) {
var props = action.props,
var handler = "on" + capitalizeString(key) + "Change";
if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
props[handler](extends_extends({
* Default state reducer that returns the changes.
* @param {Object} s state.
* @param {Object} a action with changes.
* @returns {Object} changes.
function downshift_esm_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 downshift_esm_getA11ySelectionMessage(selectionParameters) {
var selectedItem = selectionParameters.selectedItem,
itemToStringLocal = selectionParameters.itemToString;
return selectedItem ? itemToStringLocal(selectedItem) + " has been selected." : '';
* Debounced call for updating the a11y message.
var updateA11yStatus = debounce(function (getA11yMessage, document) {
setStatus(getA11yMessage(), document);
}, 200); // istanbul ignore next
var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? external_React_["useLayoutEffect"] : external_React_["useEffect"];
function useElementIds(_ref) {
id = _ref$id === void 0 ? "downshift-" + downshift_esm_generateId() : _ref$id,
getItemId = _ref.getItemId,
toggleButtonId = _ref.toggleButtonId,
var elementIdsRef = Object(external_React_["useRef"])({
labelId: labelId || id + "-label",
menuId: menuId || id + "-menu",
getItemId: getItemId || function (index) {
return 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 downshift_esm_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 useLatestRef(val) {
var ref = Object(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) {
var prevStateRef = Object(external_React_["useRef"])();
var actionRef = Object(external_React_["useRef"])();
var enhancedReducer = Object(external_React_["useCallback"])(function (state, action) {
actionRef.current = action;
state = getState(state, action.props);
var changes = reducer(state, action);
var newState = action.props.stateReducer(state, extends_extends({}, action, {
var _useReducer = Object(external_React_["useReducer"])(enhancedReducer, initialState),
dispatch = _useReducer[1];
var propsRef = useLatestRef(props);
var dispatchWithProps = Object(external_React_["useCallback"])(function (action) {
return dispatch(extends_extends({
var action = actionRef.current;
Object(external_React_["useEffect"])(function () {
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) {
var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props),
state = _useEnhancedReducer[0],
dispatch = _useEnhancedReducer[1];
return [getState(state, props), dispatch];
itemToString: downshift_esm_itemToString,
stateReducer: downshift_esm_stateReducer,
getA11ySelectionMessage: downshift_esm_getA11ySelectionMessage,
scrollIntoView: downshift_esm_scrollIntoView,
circularNavigation: false,
/* istanbul ignore next (ssr) */
typeof window === 'undefined' ? {} : window
function getDefaultValue$1(props, propKey, defaultStateValues) {
if (defaultStateValues === void 0) {
defaultStateValues = dropdownDefaultStateValues;
var defaultPropKey = "default" + capitalizeString(propKey);
if (defaultPropKey in props) {
return props[defaultPropKey];
return defaultStateValues[propKey];
function getInitialValue$1(props, propKey, defaultStateValues) {
if (defaultStateValues === void 0) {
defaultStateValues = dropdownDefaultStateValues;
var initialPropKey = "initial" + capitalizeString(propKey);
if (initialPropKey in props) {
return props[initialPropKey];
return getDefaultValue$1(props, propKey, defaultStateValues);
function getInitialState$2(props) {
var selectedItem = getInitialValue$1(props, 'selectedItem');
var isOpen = getInitialValue$1(props, 'isOpen');
var highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
var inputValue = getInitialValue$1(props, 'inputValue');
highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.indexOf(selectedItem) : highlightedIndex,
selectedItem: selectedItem,
function getHighlightedIndexOnOpen(props, state, offset, getItemNodeFromIndex) {
initialHighlightedIndex = props.initialHighlightedIndex,
defaultHighlightedIndex = props.defaultHighlightedIndex;
var selectedItem = state.selectedItem,
highlightedIndex = state.highlightedIndex;
if (items.length === 0) {
} // initialHighlightedIndex will give value to highlightedIndex on initial state only.
if (initialHighlightedIndex !== undefined && highlightedIndex === initialHighlightedIndex) {
It is recommended that you Edit text format, this type of Fix handles quite a lot in one request
