downshift 5.2.0 → 5.2.1

package/dist/downshift.cjs.js

@@ -1793,21 +1793,33 @@ function isAcceptedCharacterKey(key) {
 function capitalizeString(string) {
   return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
 }
-function useEnhancedReducer(reducer, initialState, props) {
-  var enhancedReducer = react.useCallback(function (state, action) {
-    state = getState(state, action.props);
-    var stateReduceLocal = action.props.stateReducer;
+/**
+ * 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 useControlledState(reducer, initialState, props) {
+  var _useState = react.useState(initialState),
+      uncontrolledState = _useState[0],
+      setState = _useState[1];
+
+  var state = getState(uncontrolledState, props);
+
+  var dispatch = function (action) {
+    var stateReducerFromProps = action.props.stateReducer;
     var changes = reducer(state, action);
-    var newState = stateReduceLocal(state, _extends({}, action, {
+    var newState = stateReducerFromProps(state, _extends({}, action, {
       changes: changes
     }));
     callOnChangeProps(action, state, newState);
-    return newState;
-  }, [reducer]);
-
-  var _useReducer = react.useReducer(enhancedReducer, initialState),
-      state = _useReducer[0],
-      dispatch = _useReducer[1];
+    setState(newState);
+  };
 
   return [getState(state, props), function dispatchWithProps(action) {
     return dispatch(_extends({
@@ -2250,13 +2262,13 @@ function useSelect(userProps) {
 
   var initialState = getInitialState(props); // Reducer init.
 
-  var _useEnhancedReducer = useEnhancedReducer(downshiftSelectReducer, initialState, props),
-      _useEnhancedReducer$ = _useEnhancedReducer[0],
-      isOpen = _useEnhancedReducer$.isOpen,
-      highlightedIndex = _useEnhancedReducer$.highlightedIndex,
-      selectedItem = _useEnhancedReducer$.selectedItem,
-      inputValue = _useEnhancedReducer$.inputValue,
-      dispatch = _useEnhancedReducer[1]; // Refs
+  var _useControlledState = useControlledState(downshiftSelectReducer, initialState, props),
+      _useControlledState$ = _useControlledState[0],
+      isOpen = _useControlledState$.isOpen,
+      highlightedIndex = _useControlledState$.highlightedIndex,
+      selectedItem = _useControlledState$.selectedItem,
+      inputValue = _useControlledState$.inputValue,
+      dispatch = _useControlledState[1]; // Refs
 
 
   var toggleButtonRef = react.useRef(null);
@@ -2703,6 +2715,51 @@ function useSelect(userProps) {
   };
 }
 
+var InputKeyDownArrowDown = process.env.NODE_ENV !== "production" ? '__input_keydown_arrow_down__' : 0;
+var InputKeyDownArrowUp = process.env.NODE_ENV !== "production" ? '__input_keydown_arrow_up__' : 1;
+var InputKeyDownEscape = process.env.NODE_ENV !== "production" ? '__input_keydown_escape__' : 2;
+var InputKeyDownHome = process.env.NODE_ENV !== "production" ? '__input_keydown_home__' : 3;
+var InputKeyDownEnd = process.env.NODE_ENV !== "production" ? '__input_keydown_end__' : 4;
+var InputKeyDownEnter = process.env.NODE_ENV !== "production" ? '__input_keydown_enter__' : 5;
+var InputChange = process.env.NODE_ENV !== "production" ? '__input_change__' : 6;
+var InputBlur = process.env.NODE_ENV !== "production" ? '__input_blur__' : 7;
+var MenuMouseLeave$1 = process.env.NODE_ENV !== "production" ? '__menu_mouse_leave__' : 8;
+var ItemMouseMove$1 = process.env.NODE_ENV !== "production" ? '__item_mouse_move__' : 9;
+var ItemClick$1 = process.env.NODE_ENV !== "production" ? '__item_click__' : 10;
+var ToggleButtonClick$1 = process.env.NODE_ENV !== "production" ? '__togglebutton_click__' : 11;
+var FunctionToggleMenu$1 = process.env.NODE_ENV !== "production" ? '__function_toggle_menu__' : 12;
+var FunctionOpenMenu$1 = process.env.NODE_ENV !== "production" ? '__function_open_menu__' : 13;
+var FunctionCloseMenu$1 = process.env.NODE_ENV !== "production" ? '__function_close_menu__' : 14;
+var FunctionSetHighlightedIndex$1 = process.env.NODE_ENV !== "production" ? '__function_set_highlighted_index__' : 15;
+var FunctionSelectItem$1 = process.env.NODE_ENV !== "production" ? '__function_select_item__' : 16;
+var FunctionSetInputValue$1 = process.env.NODE_ENV !== "production" ? '__function_set_input_value__' : 17;
+var FunctionReset$1 = process.env.NODE_ENV !== "production" ? '__function_reset__' : 18;
+var ControlledPropUpdatedSelectedItem = process.env.NODE_ENV !== "production" ? '__controlled_prop_updated_selected_item__' : 19;
+
+var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  InputKeyDownArrowDown: InputKeyDownArrowDown,
+  InputKeyDownArrowUp: InputKeyDownArrowUp,
+  InputKeyDownEscape: InputKeyDownEscape,
+  InputKeyDownHome: InputKeyDownHome,
+  InputKeyDownEnd: InputKeyDownEnd,
+  InputKeyDownEnter: InputKeyDownEnter,
+  InputChange: InputChange,
+  InputBlur: InputBlur,
+  MenuMouseLeave: MenuMouseLeave$1,
+  ItemMouseMove: ItemMouseMove$1,
+  ItemClick: ItemClick$1,
+  ToggleButtonClick: ToggleButtonClick$1,
+  FunctionToggleMenu: FunctionToggleMenu$1,
+  FunctionOpenMenu: FunctionOpenMenu$1,
+  FunctionCloseMenu: FunctionCloseMenu$1,
+  FunctionSetHighlightedIndex: FunctionSetHighlightedIndex$1,
+  FunctionSelectItem: FunctionSelectItem$1,
+  FunctionSetInputValue: FunctionSetInputValue$1,
+  FunctionReset: FunctionReset$1,
+  ControlledPropUpdatedSelectedItem: ControlledPropUpdatedSelectedItem
+});
+
 function getElementIds$1(_ref) {
   var id = _ref.id,
       inputId = _ref.inputId,
@@ -2715,7 +2772,6 @@ function getElementIds$1(_ref) {
     id: id
   }, rest)));
 }
-
 function getInitialState$1(props) {
   var initialState = getInitialState(props);
   var selectedItem = initialState.selectedItem;
@@ -2729,7 +2785,6 @@ function getInitialState$1(props) {
     inputValue: inputValue
   });
 }
-
 var propTypes$1 = {
   items: PropTypes.array.isRequired,
   itemToString: PropTypes.func,
@@ -2770,55 +2825,43 @@ var propTypes$1 = {
     })
   })
 };
+/**
+ * The useCombobox version of useControlledState, 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 useControlledState 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 useControlledState$1(reducer, initialState, props) {
+  var _useControlledStateCo = useControlledState(reducer, initialState, props),
+      newState = _useControlledStateCo[0],
+      dispatch = _useControlledStateCo[1];
 
+  var previousSelectedItemRef = react.useRef(null);
+  var selectedItem = props.selectedItem,
+      itemToString = props.itemToString; // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
+
+  if (isControlledProp(props, 'selectedItem') && previousSelectedItemRef.current !== selectedItem) {
+    dispatch({
+      type: ControlledPropUpdatedSelectedItem,
+      inputValue: itemToString(selectedItem)
+    });
+  }
+
+  previousSelectedItemRef.current = selectedItem;
+  return [newState, dispatch];
+}
 var defaultProps$2 = _extends({}, defaultProps, {
   getA11yStatusMessage: getA11yStatusMessage,
   circularNavigation: true
 });
 
-var InputKeyDownArrowDown = process.env.NODE_ENV !== "production" ? '__input_keydown_arrow_down__' : 0;
-var InputKeyDownArrowUp = process.env.NODE_ENV !== "production" ? '__input_keydown_arrow_up__' : 1;
-var InputKeyDownEscape = process.env.NODE_ENV !== "production" ? '__input_keydown_escape__' : 2;
-var InputKeyDownHome = process.env.NODE_ENV !== "production" ? '__input_keydown_home__' : 3;
-var InputKeyDownEnd = process.env.NODE_ENV !== "production" ? '__input_keydown_end__' : 4;
-var InputKeyDownEnter = process.env.NODE_ENV !== "production" ? '__input_keydown_enter__' : 5;
-var InputChange = process.env.NODE_ENV !== "production" ? '__input_change__' : 6;
-var InputBlur = process.env.NODE_ENV !== "production" ? '__input_blur__' : 7;
-var MenuMouseLeave$1 = process.env.NODE_ENV !== "production" ? '__menu_mouse_leave__' : 8;
-var ItemMouseMove$1 = process.env.NODE_ENV !== "production" ? '__item_mouse_move__' : 9;
-var ItemClick$1 = process.env.NODE_ENV !== "production" ? '__item_click__' : 10;
-var ToggleButtonClick$1 = process.env.NODE_ENV !== "production" ? '__togglebutton_click__' : 11;
-var FunctionToggleMenu$1 = process.env.NODE_ENV !== "production" ? '__function_toggle_menu__' : 12;
-var FunctionOpenMenu$1 = process.env.NODE_ENV !== "production" ? '__function_open_menu__' : 13;
-var FunctionCloseMenu$1 = process.env.NODE_ENV !== "production" ? '__function_close_menu__' : 14;
-var FunctionSetHighlightedIndex$1 = process.env.NODE_ENV !== "production" ? '__function_set_highlighted_index__' : 15;
-var FunctionSelectItem$1 = process.env.NODE_ENV !== "production" ? '__function_select_item__' : 16;
-var FunctionSetInputValue$1 = process.env.NODE_ENV !== "production" ? '__function_set_input_value__' : 17;
-var FunctionReset$1 = process.env.NODE_ENV !== "production" ? '__function_reset__' : 18;
-
-var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  InputKeyDownArrowDown: InputKeyDownArrowDown,
-  InputKeyDownArrowUp: InputKeyDownArrowUp,
-  InputKeyDownEscape: InputKeyDownEscape,
-  InputKeyDownHome: InputKeyDownHome,
-  InputKeyDownEnd: InputKeyDownEnd,
-  InputKeyDownEnter: InputKeyDownEnter,
-  InputChange: InputChange,
-  InputBlur: InputBlur,
-  MenuMouseLeave: MenuMouseLeave$1,
-  ItemMouseMove: ItemMouseMove$1,
-  ItemClick: ItemClick$1,
-  ToggleButtonClick: ToggleButtonClick$1,
-  FunctionToggleMenu: FunctionToggleMenu$1,
-  FunctionOpenMenu: FunctionOpenMenu$1,
-  FunctionCloseMenu: FunctionCloseMenu$1,
-  FunctionSetHighlightedIndex: FunctionSetHighlightedIndex$1,
-  FunctionSelectItem: FunctionSelectItem$1,
-  FunctionSetInputValue: FunctionSetInputValue$1,
-  FunctionReset: FunctionReset$1
-});
-
 /* eslint-disable complexity */
 
 function downshiftUseComboboxReducer(state, action) {
@@ -2958,6 +3001,7 @@ function downshiftUseComboboxReducer(state, action) {
       };
       break;
 
+    case ControlledPropUpdatedSelectedItem:
     case FunctionSetInputValue$1:
       changes = {
         inputValue: action.inputValue
@@ -3010,13 +3054,13 @@ function useCombobox(userProps) {
 
   var initialState = getInitialState$1(props); // Reducer init.
 
-  var _useEnhancedReducer = useEnhancedReducer(downshiftUseComboboxReducer, initialState, props),
-      _useEnhancedReducer$ = _useEnhancedReducer[0],
-      isOpen = _useEnhancedReducer$.isOpen,
-      highlightedIndex = _useEnhancedReducer$.highlightedIndex,
-      selectedItem = _useEnhancedReducer$.selectedItem,
-      inputValue = _useEnhancedReducer$.inputValue,
-      dispatch = _useEnhancedReducer[1];
+  var _useControlledState = useControlledState$1(downshiftUseComboboxReducer, initialState, props),
+      _useControlledState$ = _useControlledState[0],
+      isOpen = _useControlledState$.isOpen,
+      highlightedIndex = _useControlledState$.highlightedIndex,
+      selectedItem = _useControlledState$.selectedItem,
+      inputValue = _useControlledState$.inputValue,
+      dispatch = _useControlledState[1];
   /* Refs */
 
 
@@ -3743,11 +3787,11 @@ function useMultipleSelection(userProps) {
       keyNavigationNext = props.keyNavigationNext,
       keyNavigationPrevious = props.keyNavigationPrevious; // Reducer init.
 
-  var _useEnhancedReducer = useEnhancedReducer(downshiftMultipleSelectionReducer, getInitialState$2(props), props),
-      _useEnhancedReducer$ = _useEnhancedReducer[0],
-      activeIndex = _useEnhancedReducer$.activeIndex,
-      selectedItems = _useEnhancedReducer$.selectedItems,
-      dispatch = _useEnhancedReducer[1]; // Refs.
+  var _useControlledState = useControlledState(downshiftMultipleSelectionReducer, getInitialState$2(props), props),
+      _useControlledState$ = _useControlledState[0],
+      activeIndex = _useControlledState$.activeIndex,
+      selectedItems = _useControlledState$.selectedItems,
+      dispatch = _useControlledState[1]; // Refs.
 
 
   var isInitialMount = react.useRef(true);

package/dist/downshift.esm.js

@@ -3,7 +3,7 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
 import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
 import PropTypes from 'prop-types';
-import { cloneElement, Component, useCallback, useReducer, useRef, useEffect } from 'react';
+import { cloneElement, Component, useState, useRef, useEffect } from 'react';
 import { isForwardRef } from 'react-is';
 import computeScrollIntoView from 'compute-scroll-into-view';
 
@@ -1787,21 +1787,33 @@ function isAcceptedCharacterKey(key) {
 function capitalizeString(string) {
   return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
 }
-function useEnhancedReducer(reducer, initialState, props) {
-  var enhancedReducer = useCallback(function (state, action) {
-    state = getState(state, action.props);
-    var stateReduceLocal = action.props.stateReducer;
+/**
+ * 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 useControlledState(reducer, initialState, props) {
+  var _useState = useState(initialState),
+      uncontrolledState = _useState[0],
+      setState = _useState[1];
+
+  var state = getState(uncontrolledState, props);
+
+  var dispatch = function (action) {
+    var stateReducerFromProps = action.props.stateReducer;
     var changes = reducer(state, action);
-    var newState = stateReduceLocal(state, _extends({}, action, {
+    var newState = stateReducerFromProps(state, _extends({}, action, {
       changes: changes
     }));
     callOnChangeProps(action, state, newState);
-    return newState;
-  }, [reducer]);
-
-  var _useReducer = useReducer(enhancedReducer, initialState),
-      state = _useReducer[0],
-      dispatch = _useReducer[1];
+    setState(newState);
+  };
 
   return [getState(state, props), function dispatchWithProps(action) {
     return dispatch(_extends({
@@ -2244,13 +2256,13 @@ function useSelect(userProps) {
 
   var initialState = getInitialState(props); // Reducer init.
 
-  var _useEnhancedReducer = useEnhancedReducer(downshiftSelectReducer, initialState, props),
-      _useEnhancedReducer$ = _useEnhancedReducer[0],
-      isOpen = _useEnhancedReducer$.isOpen,
-      highlightedIndex = _useEnhancedReducer$.highlightedIndex,
-      selectedItem = _useEnhancedReducer$.selectedItem,
-      inputValue = _useEnhancedReducer$.inputValue,
-      dispatch = _useEnhancedReducer[1]; // Refs
+  var _useControlledState = useControlledState(downshiftSelectReducer, initialState, props),
+      _useControlledState$ = _useControlledState[0],
+      isOpen = _useControlledState$.isOpen,
+      highlightedIndex = _useControlledState$.highlightedIndex,
+      selectedItem = _useControlledState$.selectedItem,
+      inputValue = _useControlledState$.inputValue,
+      dispatch = _useControlledState[1]; // Refs
 
 
   var toggleButtonRef = useRef(null);
@@ -2697,6 +2709,51 @@ function useSelect(userProps) {
   };
 }
 
+var InputKeyDownArrowDown = process.env.NODE_ENV !== "production" ? '__input_keydown_arrow_down__' : 0;
+var InputKeyDownArrowUp = process.env.NODE_ENV !== "production" ? '__input_keydown_arrow_up__' : 1;
+var InputKeyDownEscape = process.env.NODE_ENV !== "production" ? '__input_keydown_escape__' : 2;
+var InputKeyDownHome = process.env.NODE_ENV !== "production" ? '__input_keydown_home__' : 3;
+var InputKeyDownEnd = process.env.NODE_ENV !== "production" ? '__input_keydown_end__' : 4;
+var InputKeyDownEnter = process.env.NODE_ENV !== "production" ? '__input_keydown_enter__' : 5;
+var InputChange = process.env.NODE_ENV !== "production" ? '__input_change__' : 6;
+var InputBlur = process.env.NODE_ENV !== "production" ? '__input_blur__' : 7;
+var MenuMouseLeave$1 = process.env.NODE_ENV !== "production" ? '__menu_mouse_leave__' : 8;
+var ItemMouseMove$1 = process.env.NODE_ENV !== "production" ? '__item_mouse_move__' : 9;
+var ItemClick$1 = process.env.NODE_ENV !== "production" ? '__item_click__' : 10;
+var ToggleButtonClick$1 = process.env.NODE_ENV !== "production" ? '__togglebutton_click__' : 11;
+var FunctionToggleMenu$1 = process.env.NODE_ENV !== "production" ? '__function_toggle_menu__' : 12;
+var FunctionOpenMenu$1 = process.env.NODE_ENV !== "production" ? '__function_open_menu__' : 13;
+var FunctionCloseMenu$1 = process.env.NODE_ENV !== "production" ? '__function_close_menu__' : 14;
+var FunctionSetHighlightedIndex$1 = process.env.NODE_ENV !== "production" ? '__function_set_highlighted_index__' : 15;
+var FunctionSelectItem$1 = process.env.NODE_ENV !== "production" ? '__function_select_item__' : 16;
+var FunctionSetInputValue$1 = process.env.NODE_ENV !== "production" ? '__function_set_input_value__' : 17;
+var FunctionReset$1 = process.env.NODE_ENV !== "production" ? '__function_reset__' : 18;
+var ControlledPropUpdatedSelectedItem = process.env.NODE_ENV !== "production" ? '__controlled_prop_updated_selected_item__' : 19;
+
+var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  InputKeyDownArrowDown: InputKeyDownArrowDown,
+  InputKeyDownArrowUp: InputKeyDownArrowUp,
+  InputKeyDownEscape: InputKeyDownEscape,
+  InputKeyDownHome: InputKeyDownHome,
+  InputKeyDownEnd: InputKeyDownEnd,
+  InputKeyDownEnter: InputKeyDownEnter,
+  InputChange: InputChange,
+  InputBlur: InputBlur,
+  MenuMouseLeave: MenuMouseLeave$1,
+  ItemMouseMove: ItemMouseMove$1,
+  ItemClick: ItemClick$1,
+  ToggleButtonClick: ToggleButtonClick$1,
+  FunctionToggleMenu: FunctionToggleMenu$1,
+  FunctionOpenMenu: FunctionOpenMenu$1,
+  FunctionCloseMenu: FunctionCloseMenu$1,
+  FunctionSetHighlightedIndex: FunctionSetHighlightedIndex$1,
+  FunctionSelectItem: FunctionSelectItem$1,
+  FunctionSetInputValue: FunctionSetInputValue$1,
+  FunctionReset: FunctionReset$1,
+  ControlledPropUpdatedSelectedItem: ControlledPropUpdatedSelectedItem
+});
+
 function getElementIds$1(_ref) {
   var id = _ref.id,
       inputId = _ref.inputId,
@@ -2709,7 +2766,6 @@ function getElementIds$1(_ref) {
     id: id
   }, rest)));
 }
-
 function getInitialState$1(props) {
   var initialState = getInitialState(props);
   var selectedItem = initialState.selectedItem;
@@ -2723,7 +2779,6 @@ function getInitialState$1(props) {
     inputValue: inputValue
   });
 }
-
 var propTypes$1 = {
   items: PropTypes.array.isRequired,
   itemToString: PropTypes.func,
@@ -2764,55 +2819,43 @@ var propTypes$1 = {
     })
   })
 };
+/**
+ * The useCombobox version of useControlledState, 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 useControlledState 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 useControlledState$1(reducer, initialState, props) {
+  var _useControlledStateCo = useControlledState(reducer, initialState, props),
+      newState = _useControlledStateCo[0],
+      dispatch = _useControlledStateCo[1];
 
+  var previousSelectedItemRef = useRef(null);
+  var selectedItem = props.selectedItem,
+      itemToString = props.itemToString; // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
+
+  if (isControlledProp(props, 'selectedItem') && previousSelectedItemRef.current !== selectedItem) {
+    dispatch({
+      type: ControlledPropUpdatedSelectedItem,
+      inputValue: itemToString(selectedItem)
+    });
+  }
+
+  previousSelectedItemRef.current = selectedItem;
+  return [newState, dispatch];
+}
 var defaultProps$2 = _extends({}, defaultProps, {
   getA11yStatusMessage: getA11yStatusMessage,
   circularNavigation: true
 });
 
-var InputKeyDownArrowDown = process.env.NODE_ENV !== "production" ? '__input_keydown_arrow_down__' : 0;
-var InputKeyDownArrowUp = process.env.NODE_ENV !== "production" ? '__input_keydown_arrow_up__' : 1;
-var InputKeyDownEscape = process.env.NODE_ENV !== "production" ? '__input_keydown_escape__' : 2;
-var InputKeyDownHome = process.env.NODE_ENV !== "production" ? '__input_keydown_home__' : 3;
-var InputKeyDownEnd = process.env.NODE_ENV !== "production" ? '__input_keydown_end__' : 4;
-var InputKeyDownEnter = process.env.NODE_ENV !== "production" ? '__input_keydown_enter__' : 5;
-var InputChange = process.env.NODE_ENV !== "production" ? '__input_change__' : 6;
-var InputBlur = process.env.NODE_ENV !== "production" ? '__input_blur__' : 7;
-var MenuMouseLeave$1 = process.env.NODE_ENV !== "production" ? '__menu_mouse_leave__' : 8;
-var ItemMouseMove$1 = process.env.NODE_ENV !== "production" ? '__item_mouse_move__' : 9;
-var ItemClick$1 = process.env.NODE_ENV !== "production" ? '__item_click__' : 10;
-var ToggleButtonClick$1 = process.env.NODE_ENV !== "production" ? '__togglebutton_click__' : 11;
-var FunctionToggleMenu$1 = process.env.NODE_ENV !== "production" ? '__function_toggle_menu__' : 12;
-var FunctionOpenMenu$1 = process.env.NODE_ENV !== "production" ? '__function_open_menu__' : 13;
-var FunctionCloseMenu$1 = process.env.NODE_ENV !== "production" ? '__function_close_menu__' : 14;
-var FunctionSetHighlightedIndex$1 = process.env.NODE_ENV !== "production" ? '__function_set_highlighted_index__' : 15;
-var FunctionSelectItem$1 = process.env.NODE_ENV !== "production" ? '__function_select_item__' : 16;
-var FunctionSetInputValue$1 = process.env.NODE_ENV !== "production" ? '__function_set_input_value__' : 17;
-var FunctionReset$1 = process.env.NODE_ENV !== "production" ? '__function_reset__' : 18;
-
-var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  InputKeyDownArrowDown: InputKeyDownArrowDown,
-  InputKeyDownArrowUp: InputKeyDownArrowUp,
-  InputKeyDownEscape: InputKeyDownEscape,
-  InputKeyDownHome: InputKeyDownHome,
-  InputKeyDownEnd: InputKeyDownEnd,
-  InputKeyDownEnter: InputKeyDownEnter,
-  InputChange: InputChange,
-  InputBlur: InputBlur,
-  MenuMouseLeave: MenuMouseLeave$1,
-  ItemMouseMove: ItemMouseMove$1,
-  ItemClick: ItemClick$1,
-  ToggleButtonClick: ToggleButtonClick$1,
-  FunctionToggleMenu: FunctionToggleMenu$1,
-  FunctionOpenMenu: FunctionOpenMenu$1,
-  FunctionCloseMenu: FunctionCloseMenu$1,
-  FunctionSetHighlightedIndex: FunctionSetHighlightedIndex$1,
-  FunctionSelectItem: FunctionSelectItem$1,
-  FunctionSetInputValue: FunctionSetInputValue$1,
-  FunctionReset: FunctionReset$1
-});
-
 /* eslint-disable complexity */
 
 function downshiftUseComboboxReducer(state, action) {
@@ -2952,6 +2995,7 @@ function downshiftUseComboboxReducer(state, action) {
       };
       break;
 
+    case ControlledPropUpdatedSelectedItem:
     case FunctionSetInputValue$1:
       changes = {
         inputValue: action.inputValue
@@ -3004,13 +3048,13 @@ function useCombobox(userProps) {
 
   var initialState = getInitialState$1(props); // Reducer init.
 
-  var _useEnhancedReducer = useEnhancedReducer(downshiftUseComboboxReducer, initialState, props),
-      _useEnhancedReducer$ = _useEnhancedReducer[0],
-      isOpen = _useEnhancedReducer$.isOpen,
-      highlightedIndex = _useEnhancedReducer$.highlightedIndex,
-      selectedItem = _useEnhancedReducer$.selectedItem,
-      inputValue = _useEnhancedReducer$.inputValue,
-      dispatch = _useEnhancedReducer[1];
+  var _useControlledState = useControlledState$1(downshiftUseComboboxReducer, initialState, props),
+      _useControlledState$ = _useControlledState[0],
+      isOpen = _useControlledState$.isOpen,
+      highlightedIndex = _useControlledState$.highlightedIndex,
+      selectedItem = _useControlledState$.selectedItem,
+      inputValue = _useControlledState$.inputValue,
+      dispatch = _useControlledState[1];
   /* Refs */
 
 
@@ -3737,11 +3781,11 @@ function useMultipleSelection(userProps) {
       keyNavigationNext = props.keyNavigationNext,
       keyNavigationPrevious = props.keyNavigationPrevious; // Reducer init.
 
-  var _useEnhancedReducer = useEnhancedReducer(downshiftMultipleSelectionReducer, getInitialState$2(props), props),
-      _useEnhancedReducer$ = _useEnhancedReducer[0],
-      activeIndex = _useEnhancedReducer$.activeIndex,
-      selectedItems = _useEnhancedReducer$.selectedItems,
-      dispatch = _useEnhancedReducer[1]; // Refs.
+  var _useControlledState = useControlledState(downshiftMultipleSelectionReducer, getInitialState$2(props), props),
+      _useControlledState$ = _useControlledState[0],
+      activeIndex = _useControlledState$.activeIndex,
+      selectedItems = _useControlledState$.selectedItems,
+      dispatch = _useControlledState[1]; // Refs.
 
 
   var isInitialMount = useRef(true);