downshift 6.0.14 → 6.1.0

package/dist/downshift.native.cjs.js

@@ -431,23 +431,25 @@ function targetWithinDownshift(target, downshiftElements, document, checkActiveE
   return downshiftElements.some(function (contextNode) {
     return contextNode && (isOrContainsNode(contextNode, target) || checkActiveElement && isOrContainsNode(contextNode, document.activeElement));
   });
-}
+} // eslint-disable-next-line import/no-mutable-exports
 
-function validateControlledUnchanged(state, prevProps, nextProps) {
-  if (process.env.NODE_ENV === 'production') {
-    return;
-  }
 
-  var warningDescription = "This prop should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Downshift element for the lifetime of the component. More info: https://github.com/downshift-js/downshift#control-props";
-  Object.keys(state).forEach(function (propKey) {
-    if (prevProps[propKey] !== undefined && nextProps[propKey] === undefined) {
-      // eslint-disable-next-line no-console
-      console.error("downshift: A component has changed the controlled prop \"" + propKey + "\" to be uncontrolled. " + warningDescription);
-    } else if (prevProps[propKey] === undefined && nextProps[propKey] !== undefined) {
-      // eslint-disable-next-line no-console
-      console.error("downshift: A component has changed the uncontrolled prop \"" + propKey + "\" to be controlled. " + warningDescription);
-    }
-  });
+var validateControlledUnchanged = noop;
+/* istanbul ignore next */
+
+if (process.env.NODE_ENV !== 'production') {
+  validateControlledUnchanged = function validateControlledUnchanged(state, prevProps, nextProps) {
+    var warningDescription = "This prop should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Downshift element for the lifetime of the component. More info: https://github.com/downshift-js/downshift#control-props";
+    Object.keys(state).forEach(function (propKey) {
+      if (prevProps[propKey] !== undefined && nextProps[propKey] === undefined) {
+        // eslint-disable-next-line no-console
+        console.error("downshift: A component has changed the controlled prop \"" + propKey + "\" to be uncontrolled. " + warningDescription);
+      } else if (prevProps[propKey] === undefined && nextProps[propKey] !== undefined) {
+        // eslint-disable-next-line no-console
+        console.error("downshift: A component has changed the uncontrolled prop \"" + propKey + "\" to be controlled. " + warningDescription);
+      }
+    });
+  };
 }
 
 var cleanupStatus = debounce(function (documentProp) {
@@ -865,12 +867,16 @@ var Downshift = /*#__PURE__*/function () {
         Home: function Home(event) {
           var _this4 = this;
 
-          event.preventDefault();
-          var itemCount = this.getItemCount();
-
           var _this$getState3 = this.getState(),
               isOpen = _this$getState3.isOpen;
 
+          if (!isOpen) {
+            return;
+          }
+
+          event.preventDefault();
+          var itemCount = this.getItemCount();
+
           if (itemCount <= 0 || !isOpen) {
             return;
           } // get next non-disabled starting downwards from 0 if that's disabled.
@@ -886,12 +892,16 @@ var Downshift = /*#__PURE__*/function () {
         End: function End(event) {
           var _this5 = this;
 
-          event.preventDefault();
-          var itemCount = this.getItemCount();
-
           var _this$getState4 = this.getState(),
               isOpen = _this$getState4.isOpen;
 
+          if (!isOpen) {
+            return;
+          }
+
+          event.preventDefault();
+          var itemCount = this.getItemCount();
+
           if (itemCount <= 0 || !isOpen) {
             return;
           } // get next non-disabled starting upwards from last index if that's disabled.
@@ -1703,22 +1713,27 @@ var updateA11yStatus = debounce(function (getA11yMessage, document) {
 }, 200); // istanbul ignore next
 
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? react.useLayoutEffect : react.useEffect;
-function getElementIds(_ref) {
-  var id = _ref.id,
+
+function useElementIds(_ref) {
+  var _ref$id = _ref.id,
+      id = _ref$id === void 0 ? "downshift-" + generateId() : _ref$id,
       labelId = _ref.labelId,
       menuId = _ref.menuId,
       getItemId = _ref.getItemId,
-      toggleButtonId = _ref.toggleButtonId;
-  var uniqueId = id === undefined ? "downshift-" + generateId() : id;
-  return {
-    labelId: labelId || uniqueId + "-label",
-    menuId: menuId || uniqueId + "-menu",
+      toggleButtonId = _ref.toggleButtonId,
+      inputId = _ref.inputId;
+  var elementIdsRef = react.useRef({
+    labelId: labelId || id + "-label",
+    menuId: menuId || id + "-menu",
     getItemId: getItemId || function (index) {
-      return uniqueId + "-item-" + index;
+      return id + "-item-" + index;
     },
-    toggleButtonId: toggleButtonId || uniqueId + "-toggle-button"
-  };
+    toggleButtonId: toggleButtonId || id + "-toggle-button",
+    inputId: inputId || id + "-input"
+  });
+  return elementIdsRef.current;
 }
+
 function getItemIndex(index, item, items) {
   if (index !== undefined) {
     return index;
@@ -1735,24 +1750,14 @@ function itemToString(item) {
   return item ? String(item) : '';
 }
 
-function getPropTypesValidator(caller, propTypes) {
-  // istanbul ignore next
-  return function validate(options) {
-    if (options === void 0) {
-      options = {};
-    }
-
-    Object.keys(propTypes).forEach(function (key) {
-      PropTypes__default['default'].checkPropTypes(propTypes, options, key, caller.name);
-    });
-  };
-}
 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 = 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
@@ -1774,6 +1779,7 @@ function useLatestRef(val) {
  * @returns {Array} An array with the state and an action dispatcher.
  */
 
+
 function useEnhancedReducer(reducer, initialState, props) {
   var prevStateRef = react.useRef();
   var actionRef = react.useRef();
@@ -1817,6 +1823,7 @@ function useEnhancedReducer(reducer, initialState, props) {
  * @returns {Array} An array with the state and an action dispatcher.
  */
 
+
 function useControlledReducer(reducer, initialState, props) {
   var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props),
       state = _useEnhancedReducer[0],
@@ -1824,6 +1831,7 @@ function useControlledReducer(reducer, initialState, props) {
 
   return [getState(state, props), dispatch];
 }
+
 var defaultProps = {
   itemToString: itemToString,
   stateReducer: stateReducer,
@@ -1834,6 +1842,7 @@ var defaultProps = {
   /* istanbul ignore next (ssr) */
   ? {} : window
 };
+
 function getDefaultValue(props, propKey, defaultStateValues) {
   if (defaultStateValues === void 0) {
     defaultStateValues = dropdownDefaultStateValues;
@@ -1847,6 +1856,7 @@ function getDefaultValue(props, propKey, defaultStateValues) {
 
   return defaultStateValues[propKey];
 }
+
 function getInitialValue(props, propKey, defaultStateValues) {
   if (defaultStateValues === void 0) {
     defaultStateValues = dropdownDefaultStateValues;
@@ -1864,6 +1874,7 @@ function getInitialValue(props, propKey, defaultStateValues) {
 
   return getDefaultValue(props, propKey, defaultStateValues);
 }
+
 function getInitialState(props) {
   var selectedItem = getInitialValue(props, 'selectedItem');
   var isOpen = getInitialValue(props, 'isOpen');
@@ -1876,6 +1887,7 @@ function getInitialState(props) {
     inputValue: inputValue
   };
 }
+
 function getHighlightedIndexOnOpen(props, state, offset, getItemNodeFromIndex) {
   var items = props.items,
       initialHighlightedIndex = props.initialHighlightedIndex,
@@ -1920,6 +1932,7 @@ function getHighlightedIndexOnOpen(props, state, offset, getItemNodeFromIndex) {
  * @returns {Object} Ref containing whether mouseDown or touchMove event is happening
  */
 
+
 function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) {
   var mouseAndTouchTrackersRef = react.useRef({
     isMouseDown: false,
@@ -1973,6 +1986,13 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
   }, [isOpen, environment]);
   return mouseAndTouchTrackersRef;
 }
+/* istanbul ignore next */
+// eslint-disable-next-line import/no-mutable-exports
+
+
+var useGetterPropsCalledChecker = function useGetterPropsCalledChecker() {
+  return noop;
+};
 /**
  * Custom hook that checks if getter props are called correctly.
  *
@@ -1980,63 +2000,61 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
  * @returns {Function} Setter function called inside getter props to set call information.
  */
 
-function useGetterPropsCalledChecker() {
-  var isNotProduction = process.env.NODE_ENV !== 'production';
-  var isInitialMountRef = react.useRef(true);
+/* istanbul ignore next */
 
-  for (var _len = arguments.length, propKeys = new Array(_len), _key = 0; _key < _len; _key++) {
-    propKeys[_key] = arguments[_key];
-  }
 
-  var getterPropsCalledRef = react.useRef(propKeys.reduce(function (acc, propKey) {
-    acc[propKey] = {};
-    return acc;
-  }, {}));
-  react.useEffect(function () {
-    if (!isNotProduction) {
-      return;
-    }
+if (process.env.NODE_ENV !== 'production') {
+  useGetterPropsCalledChecker = function useGetterPropsCalledChecker() {
+    var isInitialMountRef = react.useRef(true);
 
-    Object.keys(getterPropsCalledRef.current).forEach(function (propKey) {
-      var propCallInfo = getterPropsCalledRef.current[propKey];
+    for (var _len = arguments.length, propKeys = new Array(_len), _key = 0; _key < _len; _key++) {
+      propKeys[_key] = arguments[_key];
+    }
 
-      if (isInitialMountRef.current) {
-        if (!Object.keys(propCallInfo).length) {
-          // eslint-disable-next-line no-console
-          console.error("downshift: You forgot to call the " + propKey + " getter function on your component / element.");
-          return;
+    var getterPropsCalledRef = react.useRef(propKeys.reduce(function (acc, propKey) {
+      acc[propKey] = {};
+      return acc;
+    }, {}));
+    react.useEffect(function () {
+      Object.keys(getterPropsCalledRef.current).forEach(function (propKey) {
+        var propCallInfo = getterPropsCalledRef.current[propKey];
+
+        if (isInitialMountRef.current) {
+          if (!Object.keys(propCallInfo).length) {
+            // eslint-disable-next-line no-console
+            console.error("downshift: You forgot to call the " + propKey + " getter function on your component / element.");
+            return;
+          }
         }
-      }
 
-      var suppressRefError = propCallInfo.suppressRefError,
-          refKey = propCallInfo.refKey,
-          elementRef = propCallInfo.elementRef;
+        var suppressRefError = propCallInfo.suppressRefError,
+            refKey = propCallInfo.refKey,
+            elementRef = propCallInfo.elementRef;
 
-      if ((!elementRef || !elementRef.current) && !suppressRefError) {
-        // eslint-disable-next-line no-console
-        console.error("downshift: The ref prop \"" + refKey + "\" from " + propKey + " was not applied correctly on your element.");
-      }
+        if ((!elementRef || !elementRef.current) && !suppressRefError) {
+          // eslint-disable-next-line no-console
+          console.error("downshift: The ref prop \"" + refKey + "\" from " + propKey + " was not applied correctly on your element.");
+        }
+      });
+      isInitialMountRef.current = false;
     });
-    isInitialMountRef.current = false;
-  });
-  var setGetterPropCallInfo = react.useCallback(function (propKey, suppressRefError, refKey, elementRef) {
-    if (process.env.NODE_ENV !== 'production') {
+    var setGetterPropCallInfo = react.useCallback(function (propKey, suppressRefError, refKey, elementRef) {
       getterPropsCalledRef.current[propKey] = {
         suppressRefError: suppressRefError,
         refKey: refKey,
         elementRef: elementRef
       };
-    }
-  }, []);
-  return setGetterPropCallInfo;
+    }, []);
+    return setGetterPropCallInfo;
+  };
 }
+
 function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref2) {
   var isInitialMount = _ref2.isInitialMount,
-      previousResultCount = _ref2.previousResultCount,
       highlightedIndex = _ref2.highlightedIndex,
       items = _ref2.items,
       environment = _ref2.environment,
-      rest = _objectWithoutPropertiesLoose__default['default'](_ref2, ["isInitialMount", "previousResultCount", "highlightedIndex", "items", "environment"]);
+      rest = _objectWithoutPropertiesLoose__default['default'](_ref2, ["isInitialMount", "highlightedIndex", "items", "environment"]);
 
   // Sets a11y status message on changes in state.
   react.useEffect(function () {
@@ -2048,12 +2066,12 @@ function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref2) {
       return getA11yMessage(_extends__default['default']({
         highlightedIndex: highlightedIndex,
         highlightedItem: items[highlightedIndex],
-        resultCount: items.length,
-        previousResultCount: previousResultCount
+        resultCount: items.length
       }, rest));
     }, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, dependencyArray);
 }
+
 function useScrollIntoView(_ref3) {
   var highlightedIndex = _ref3.highlightedIndex,
       isOpen = _ref3.isOpen,
@@ -2077,47 +2095,112 @@ function useScrollIntoView(_ref3) {
 
   }, [highlightedIndex]);
   return shouldScrollRef;
-}
-function useControlPropsValidator(_ref4) {
-  var isInitialMount = _ref4.isInitialMount,
-      props = _ref4.props,
-      state = _ref4.state;
-  // used for checking when props are moving from controlled to uncontrolled.
-  var prevPropsRef = react.useRef(props);
-  react.useEffect(function () {
-    if (isInitialMount) {
-      return;
-    }
+} // eslint-disable-next-line import/no-mutable-exports
 
-    validateControlledUnchanged(state, prevPropsRef.current, props);
-    prevPropsRef.current = props;
-  }, [state, props, isInitialMount]);
-}
 
-function getItemIndexByCharacterKey(keysSoFar, highlightedIndex, items, itemToStringParam, getItemNodeFromIndex) {
-  var lowerCasedItemStrings = items.map(function (item) {
-    return itemToStringParam(item).toLowerCase();
-  });
-  var lowerCasedKeysSoFar = keysSoFar.toLowerCase();
+var useControlPropsValidator = noop;
+/* istanbul ignore next */
 
-  var isValid = function isValid(itemString, index) {
-    var element = getItemNodeFromIndex(index);
-    return itemString.startsWith(lowerCasedKeysSoFar) && !(element && element.hasAttribute('disabled'));
+if (process.env.NODE_ENV !== 'production') {
+  useControlPropsValidator = function useControlPropsValidator(_ref4) {
+    var isInitialMount = _ref4.isInitialMount,
+        props = _ref4.props,
+        state = _ref4.state;
+    // used for checking when props are moving from controlled to uncontrolled.
+    var prevPropsRef = react.useRef(props);
+    react.useEffect(function () {
+      if (isInitialMount) {
+        return;
+      }
+
+      validateControlledUnchanged(state, prevPropsRef.current, props);
+      prevPropsRef.current = props;
+    }, [state, props, isInitialMount]);
   };
+}
 
-  for (var index = highlightedIndex + 1; index < lowerCasedItemStrings.length; index++) {
-    var itemString = lowerCasedItemStrings[index];
+/* eslint-disable complexity */
 
-    if (isValid(itemString, index)) {
-      return index;
-    }
+function downshiftCommonReducer(state, action, stateChangeTypes) {
+  var type = action.type,
+      props = action.props;
+  var changes;
+
+  switch (type) {
+    case stateChangeTypes.ItemMouseMove:
+      changes = {
+        highlightedIndex: action.index
+      };
+      break;
+
+    case stateChangeTypes.MenuMouseLeave:
+      changes = {
+        highlightedIndex: -1
+      };
+      break;
+
+    case stateChangeTypes.ToggleButtonClick:
+    case stateChangeTypes.FunctionToggleMenu:
+      changes = {
+        isOpen: !state.isOpen,
+        highlightedIndex: state.isOpen ? -1 : getHighlightedIndexOnOpen(props, state, 0)
+      };
+      break;
+
+    case stateChangeTypes.FunctionOpenMenu:
+      changes = {
+        isOpen: true,
+        highlightedIndex: getHighlightedIndexOnOpen(props, state, 0)
+      };
+      break;
+
+    case stateChangeTypes.FunctionCloseMenu:
+      changes = {
+        isOpen: false
+      };
+      break;
+
+    case stateChangeTypes.FunctionSetHighlightedIndex:
+      changes = {
+        highlightedIndex: action.highlightedIndex
+      };
+      break;
+
+    case stateChangeTypes.FunctionSetInputValue:
+      changes = {
+        inputValue: action.inputValue
+      };
+      break;
+
+    case stateChangeTypes.FunctionReset:
+      changes = {
+        highlightedIndex: getDefaultValue(props, 'highlightedIndex'),
+        isOpen: getDefaultValue(props, 'isOpen'),
+        selectedItem: getDefaultValue(props, 'selectedItem'),
+        inputValue: getDefaultValue(props, 'inputValue')
+      };
+      break;
+
+    default:
+      throw new Error('Reducer called without proper action type.');
   }
 
-  for (var _index = 0; _index < highlightedIndex; _index++) {
-    var _itemString = lowerCasedItemStrings[_index];
+  return _extends__default['default']({}, state, changes);
+}
+/* eslint-enable complexity */
+
+function getItemIndexByCharacterKey(keysSoFar, highlightedIndex, items, itemToString, getItemNodeFromIndex) {
+  var lowerCasedKeysSoFar = keysSoFar.toLowerCase();
+
+  for (var index = 0; index < items.length; index++) {
+    var offsetIndex = (index + highlightedIndex + 1) % items.length;
+
+    if (itemToString(items[offsetIndex]).toLowerCase().startsWith(lowerCasedKeysSoFar)) {
+      var element = getItemNodeFromIndex(offsetIndex);
 
-    if (isValid(_itemString, _index)) {
-      return _index;
+      if (!(element && element.hasAttribute('disabled'))) {
+        return offsetIndex;
+      }
     }
   }
 
@@ -2190,7 +2273,17 @@ function getA11yStatusMessage$1(_ref) {
 
 var defaultProps$1 = _extends__default['default']({}, defaultProps, {
   getA11yStatusMessage: getA11yStatusMessage$1
-});
+}); // eslint-disable-next-line import/no-mutable-exports
+
+
+var validatePropTypes = noop;
+/* istanbul ignore next */
+
+if (process.env.NODE_ENV !== 'production') {
+  validatePropTypes = function validatePropTypes(options, caller) {
+    PropTypes__default['default'].checkPropTypes(propTypes, options, 'prop', caller.name);
+  };
+}
 
 var MenuKeyDownArrowDown = process.env.NODE_ENV !== "production" ? '__menu_keydown_arrow_down__' : 0;
 var MenuKeyDownArrowUp = process.env.NODE_ENV !== "production" ? '__menu_keydown_arrow_up__' : 1;
@@ -2252,12 +2345,6 @@ function downshiftSelectReducer(state, action) {
   var changes;
 
   switch (type) {
-    case ItemMouseMove:
-      changes = {
-        highlightedIndex: action.index
-      };
-      break;
-
     case ItemClick:
       changes = {
         isOpen: getDefaultValue(props, 'isOpen'),
@@ -2356,71 +2443,20 @@ function downshiftSelectReducer(state, action) {
       };
       break;
 
-    case MenuMouseLeave:
-      changes = {
-        highlightedIndex: -1
-      };
-      break;
-
-    case ToggleButtonClick:
-    case FunctionToggleMenu:
-      changes = {
-        isOpen: !state.isOpen,
-        highlightedIndex: state.isOpen ? -1 : getHighlightedIndexOnOpen(props, state, 0)
-      };
-      break;
-
-    case FunctionOpenMenu:
-      changes = {
-        isOpen: true,
-        highlightedIndex: getHighlightedIndexOnOpen(props, state, 0)
-      };
-      break;
-
-    case FunctionCloseMenu:
-      changes = {
-        isOpen: false
-      };
-      break;
-
-    case FunctionSetHighlightedIndex:
-      changes = {
-        highlightedIndex: action.highlightedIndex
-      };
-      break;
-
     case FunctionSelectItem:
       changes = {
         selectedItem: action.selectedItem
       };
       break;
 
-    case FunctionSetInputValue:
-      changes = {
-        inputValue: action.inputValue
-      };
-      break;
-
-    case FunctionReset:
-      changes = {
-        highlightedIndex: getDefaultValue(props, 'highlightedIndex'),
-        isOpen: getDefaultValue(props, 'isOpen'),
-        selectedItem: getDefaultValue(props, 'selectedItem'),
-        inputValue: getDefaultValue(props, 'inputValue')
-      };
-      break;
-
     default:
-      throw new Error('Reducer called without proper action type.');
+      return downshiftCommonReducer(state, action, stateChangeTypes$1);
   }
 
   return _extends__default['default']({}, state, changes);
 }
 /* eslint-enable complexity */
 
-var validatePropTypes = process.env.NODE_ENV === 'production' ?
-/* istanbul ignore next */
-null : getPropTypesValidator(useSelect, propTypes);
 useSelect.stateChangeTypes = stateChangeTypes$1;
 
 function useSelect(userProps) {
@@ -2428,11 +2464,7 @@ function useSelect(userProps) {
     userProps = {};
   }
 
-  /* istanbul ignore else */
-  if (process.env.NODE_ENV !== 'production') {
-    validatePropTypes(userProps);
-  } // Props defaults and destructuring.
-
+  validatePropTypes(userProps, useSelect); // Props defaults and destructuring.
 
   var props = _extends__default['default']({}, defaultProps$1, userProps);
 
@@ -2458,14 +2490,13 @@ function useSelect(userProps) {
 
   var toggleButtonRef = react.useRef(null);
   var menuRef = react.useRef(null);
-  var itemRefs = react.useRef();
-  itemRefs.current = {}; // used not to trigger menu blur action in some scenarios.
+  var itemRefs = react.useRef({}); // used not to trigger menu blur action in some scenarios.
 
   var shouldBlurRef = react.useRef(true); // used to keep the inputValue clearTimeout object between renders.
 
   var clearTimeoutRef = react.useRef(null); // prevent id re-generation between renders.
 
-  var elementIdsRef = react.useRef(getElementIds(props)); // used to keep track of how many items we had on previous cycle.
+  var elementIds = useElementIds(props); // used to keep track of how many items we had on previous cycle.
 
   var previousResultCountRef = react.useRef();
   var isInitialMountRef = react.useRef(true); // utility callback to get item element.
@@ -2475,12 +2506,11 @@ function useSelect(userProps) {
     props: props
   }); // Some utils.
 
-  var getItemNodeFromIndex = function getItemNodeFromIndex(index) {
-    return itemRefs.current[elementIdsRef.current.getItemId(index)];
-  }; // Effects.
+  var getItemNodeFromIndex = react.useCallback(function (index) {
+    return itemRefs.current[elementIds.getItemId(index)];
+  }, [elementIds]); // Effects.
   // Sets a11y status message on changes in state.
 
-
   useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends__default['default']({
     isInitialMount: isInitialMountRef.current,
     previousResultCount: previousResultCountRef.current,
@@ -2578,7 +2608,13 @@ function useSelect(userProps) {
 
   react.useEffect(function () {
     isInitialMountRef.current = false;
-  }, []); // Event handler functions.
+  }, []); // Reset itemRefs on close.
+
+  react.useEffect(function () {
+    if (!isOpen) {
+      itemRefs.current = {};
+    }
+  }, [isOpen]); // Event handler functions.
 
   var toggleButtonKeyDownHandlers = react.useMemo(function () {
     return {
@@ -2599,7 +2635,7 @@ function useSelect(userProps) {
         });
       }
     };
-  }, [dispatch]);
+  }, [dispatch, getItemNodeFromIndex]);
   var menuKeyDownHandlers = react.useMemo(function () {
     return {
       ArrowDown: function ArrowDown(event) {
@@ -2650,7 +2686,7 @@ function useSelect(userProps) {
         });
       }
     };
-  }, [dispatch]); // Action functions.
+  }, [dispatch, getItemNodeFromIndex]); // Action functions.
 
   var toggleMenu = react.useCallback(function () {
     dispatch({
@@ -2693,10 +2729,10 @@ function useSelect(userProps) {
 
   var getLabelProps = react.useCallback(function (labelProps) {
     return _extends__default['default']({
-      id: elementIdsRef.current.labelId,
-      htmlFor: elementIdsRef.current.toggleButtonId
+      id: elementIds.labelId,
+      htmlFor: elementIds.toggleButtonId
     }, labelProps);
-  }, []);
+  }, [elementIds]);
   var getMenuProps = react.useCallback(function (_temp, _temp2) {
     var _extends2;
 
@@ -2755,14 +2791,14 @@ function useSelect(userProps) {
     setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
     return _extends__default['default']((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
       menuRef.current = menuNode;
-    }), _extends2.id = elementIdsRef.current.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIdsRef.current.labelId, _extends2.tabIndex = -1, _extends2), latestState.isOpen && latestState.highlightedIndex > -1 && {
-      'aria-activedescendant': elementIdsRef.current.getItemId(latestState.highlightedIndex)
+    }), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.labelId, _extends2.tabIndex = -1, _extends2), latestState.isOpen && latestState.highlightedIndex > -1 && {
+      'aria-activedescendant': elementIds.getItemId(latestState.highlightedIndex)
     }, {
       onMouseLeave: callAllEventHandlers(onMouseLeave, menuHandleMouseLeave),
       onKeyDown: callAllEventHandlers(onKeyDown, menuHandleKeyDown),
       onBlur: callAllEventHandlers(onBlur, menuHandleBlur)
     }, rest);
-  }, [dispatch, latest, menuKeyDownHandlers, mouseAndTouchTrackersRef, setGetterPropCallInfo]);
+  }, [dispatch, latest, menuKeyDownHandlers, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds, getItemNodeFromIndex]);
   var getToggleButtonProps = react.useCallback(function (_temp3, _temp4) {
     var _extends3;
 
@@ -2800,7 +2836,7 @@ function useSelect(userProps) {
 
     var toggleProps = _extends__default['default']((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (toggleButtonNode) {
       toggleButtonRef.current = toggleButtonNode;
-    }), _extends3.id = elementIdsRef.current.toggleButtonId, _extends3['aria-haspopup'] = 'listbox', _extends3['aria-expanded'] = latest.current.state.isOpen, _extends3['aria-labelledby'] = elementIdsRef.current.labelId + " " + elementIdsRef.current.toggleButtonId, _extends3), rest);
+    }), _extends3.id = elementIds.toggleButtonId, _extends3['aria-haspopup'] = 'listbox', _extends3['aria-expanded'] = latest.current.state.isOpen, _extends3['aria-labelledby'] = elementIds.labelId + " " + elementIds.toggleButtonId, _extends3), rest);
 
     if (!rest.disabled) {
       toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick);
@@ -2809,7 +2845,7 @@ function useSelect(userProps) {
 
     setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
     return toggleProps;
-  }, [dispatch, latest, toggleButtonKeyDownHandlers, setGetterPropCallInfo]);
+  }, [dispatch, latest, toggleButtonKeyDownHandlers, setGetterPropCallInfo, elementIds, getItemNodeFromIndex]);
   var getItemProps = react.useCallback(function (_temp5) {
     var _extends4;
 
@@ -2855,10 +2891,10 @@ function useSelect(userProps) {
     var itemProps = _extends__default['default']((_extends4 = {
       role: 'option',
       'aria-selected': "" + (itemIndex === latestState.highlightedIndex),
-      id: elementIdsRef.current.getItemId(itemIndex)
+      id: elementIds.getItemId(itemIndex)
     }, _extends4[refKey] = handleRefs(ref, function (itemNode) {
       if (itemNode) {
-        itemRefs.current[elementIdsRef.current.getItemId(itemIndex)] = itemNode;
+        itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
       }
     }), _extends4), rest);
 
@@ -2868,7 +2904,7 @@ function useSelect(userProps) {
     }
 
     return itemProps;
-  }, [dispatch, latest, shouldScrollRef]);
+  }, [dispatch, latest, shouldScrollRef, elementIds]);
   return {
     // prop getters.
     getToggleButtonProps: getToggleButtonProps,
@@ -2936,18 +2972,6 @@ var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({
   ControlledPropUpdatedSelectedItem: ControlledPropUpdatedSelectedItem
 });
 
-function getElementIds$1(_ref) {
-  var id = _ref.id,
-      inputId = _ref.inputId,
-      rest = _objectWithoutPropertiesLoose__default['default'](_ref, ["id", "inputId"]);
-
-  var uniqueId = id === undefined ? "downshift-" + generateId() : id;
-  return _extends__default['default']({
-    inputId: inputId || uniqueId + "-input"
-  }, getElementIds(_extends__default['default']({
-    id: id
-  }, rest)));
-}
 function getInitialState$1(props) {
   var initialState = getInitialState(props);
   var selectedItem = initialState.selectedItem;
@@ -2961,6 +2985,7 @@ function getInitialState$1(props) {
     inputValue: inputValue
   });
 }
+
 var propTypes$1 = {
   items: PropTypes__default['default'].array.isRequired,
   itemToString: PropTypes__default['default'].func,
@@ -3035,7 +3060,18 @@ function useControlledReducer$1(reducer, initialState, props) {
     }
   });
   return [getState(state, props), dispatch];
+} // eslint-disable-next-line import/no-mutable-exports
+
+
+var validatePropTypes$1 = noop;
+/* istanbul ignore next */
+
+if (process.env.NODE_ENV !== 'production') {
+  validatePropTypes$1 = function validatePropTypes(options, caller) {
+    PropTypes__default['default'].checkPropTypes(propTypes$1, options, 'prop', caller.name);
+  };
 }
+
 var defaultProps$2 = _extends__default['default']({}, defaultProps, {
   getA11yStatusMessage: getA11yStatusMessage,
   circularNavigation: true
@@ -3050,12 +3086,6 @@ function downshiftUseComboboxReducer(state, action) {
   var changes;
 
   switch (type) {
-    case ItemMouseMove$1:
-      changes = {
-        highlightedIndex: action.index
-      };
-      break;
-
     case ItemClick$1:
       changes = {
         isOpen: getDefaultValue(props, 'isOpen'),
@@ -3073,7 +3103,7 @@ function downshiftUseComboboxReducer(state, action) {
       } else {
         changes = {
           highlightedIndex: getHighlightedIndexOnOpen(props, state, 1, action.getItemNodeFromIndex),
-          isOpen: true
+          isOpen: props.items.length >= 0
         };
       }
 
@@ -3087,7 +3117,7 @@ function downshiftUseComboboxReducer(state, action) {
       } else {
         changes = {
           highlightedIndex: getHighlightedIndexOnOpen(props, state, -1, action.getItemNodeFromIndex),
-          isOpen: true
+          isOpen: props.items.length >= 0
         };
       }
 
@@ -3113,28 +3143,25 @@ function downshiftUseComboboxReducer(state, action) {
       break;
 
     case InputKeyDownHome:
-      changes = _extends__default['default']({}, state.isOpen && {
+      changes = {
         highlightedIndex: getNextNonDisabledIndex(1, 0, props.items.length, action.getItemNodeFromIndex, false)
-      });
+      };
       break;
 
     case InputKeyDownEnd:
-      changes = _extends__default['default']({}, state.isOpen && {
+      changes = {
         highlightedIndex: getNextNonDisabledIndex(-1, props.items.length - 1, props.items.length, action.getItemNodeFromIndex, false)
-      });
+      };
       break;
 
     case InputBlur:
-      if (state.isOpen) {
-        changes = _extends__default['default']({
-          isOpen: false,
-          highlightedIndex: -1
-        }, state.highlightedIndex >= 0 && action.selectItem && {
-          selectedItem: props.items[state.highlightedIndex],
-          inputValue: props.itemToString(props.items[state.highlightedIndex])
-        });
-      }
-
+      changes = _extends__default['default']({
+        isOpen: false,
+        highlightedIndex: -1
+      }, state.highlightedIndex >= 0 && action.selectItem && {
+        selectedItem: props.items[state.highlightedIndex],
+        inputValue: props.itemToString(props.items[state.highlightedIndex])
+      });
       break;
 
     case InputChange:
@@ -3145,39 +3172,6 @@ function downshiftUseComboboxReducer(state, action) {
       };
       break;
 
-    case MenuMouseLeave$1:
-      changes = {
-        highlightedIndex: -1
-      };
-      break;
-
-    case ToggleButtonClick$1:
-    case FunctionToggleMenu$1:
-      changes = {
-        isOpen: !state.isOpen,
-        highlightedIndex: state.isOpen ? -1 : getHighlightedIndexOnOpen(props, state, 0)
-      };
-      break;
-
-    case FunctionOpenMenu$1:
-      changes = {
-        isOpen: true,
-        highlightedIndex: getHighlightedIndexOnOpen(props, state, 0)
-      };
-      break;
-
-    case FunctionCloseMenu$1:
-      changes = {
-        isOpen: false
-      };
-      break;
-
-    case FunctionSetHighlightedIndex$1:
-      changes = {
-        highlightedIndex: action.highlightedIndex
-      };
-      break;
-
     case FunctionSelectItem$1:
       changes = {
         selectedItem: action.selectedItem,
@@ -3186,32 +3180,19 @@ function downshiftUseComboboxReducer(state, action) {
       break;
 
     case ControlledPropUpdatedSelectedItem:
-    case FunctionSetInputValue$1:
       changes = {
         inputValue: action.inputValue
       };
       break;
 
-    case FunctionReset$1:
-      changes = {
-        highlightedIndex: getDefaultValue(props, 'highlightedIndex'),
-        isOpen: getDefaultValue(props, 'isOpen'),
-        selectedItem: getDefaultValue(props, 'selectedItem'),
-        inputValue: getDefaultValue(props, 'inputValue')
-      };
-      break;
-
     default:
-      throw new Error('Reducer called without proper action type.');
+      return downshiftCommonReducer(state, action, stateChangeTypes$2);
   }
 
   return _extends__default['default']({}, state, changes);
 }
 /* eslint-enable complexity */
 
-var validatePropTypes$1 = process.env.NODE_ENV === 'production' ?
-/* istanbul ignore next */
-null : getPropTypesValidator(useCombobox, propTypes$1);
 useCombobox.stateChangeTypes = stateChangeTypes$2;
 
 function useCombobox(userProps) {
@@ -3219,11 +3200,7 @@ function useCombobox(userProps) {
     userProps = {};
   }
 
-  /* istanbul ignore else */
-  if (process.env.NODE_ENV !== 'production') {
-    validatePropTypes$1(userProps);
-  } // Props defaults and destructuring.
-
+  validatePropTypes$1(userProps, useCombobox); // Props defaults and destructuring.
 
   var props = _extends__default['default']({}, defaultProps$2, userProps);
 
@@ -3248,14 +3225,13 @@ function useCombobox(userProps) {
       inputValue = state.inputValue; // Element refs.
 
   var menuRef = react.useRef(null);
-  var itemRefs = react.useRef();
+  var itemRefs = react.useRef({});
   var inputRef = react.useRef(null);
   var toggleButtonRef = react.useRef(null);
   var comboboxRef = react.useRef(null);
-  itemRefs.current = {};
   var isInitialMountRef = react.useRef(true); // prevent id re-generation between renders.
 
-  var elementIdsRef = react.useRef(getElementIds$1(props)); // used to keep track of how many items we had on previous cycle.
+  var elementIds = useElementIds(props); // used to keep track of how many items we had on previous cycle.
 
   var previousResultCountRef = react.useRef(); // utility callback to get item element.
 
@@ -3263,13 +3239,11 @@ function useCombobox(userProps) {
     state: state,
     props: props
   });
-
-  var getItemNodeFromIndex = function getItemNodeFromIndex(index) {
-    return itemRefs.current[elementIdsRef.current.getItemId(index)];
-  }; // Effects.
+  var getItemNodeFromIndex = react.useCallback(function (index) {
+    return itemRefs.current[elementIds.getItemId(index)];
+  }, [elementIds]); // Effects.
   // Sets a11y status message on changes in state.
 
-
   useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends__default['default']({
     isInitialMount: isInitialMountRef.current,
     previousResultCount: previousResultCountRef.current,
@@ -3298,20 +3272,16 @@ function useCombobox(userProps) {
     isInitialMount: isInitialMountRef.current,
     props: props,
     state: state
-  }); // Controls the focus on the input on open.
+  }); // Focus the input on first render if required.
 
   react.useEffect(function () {
-    // Don't focus menu on first render.
-    if (isInitialMountRef.current) {
-      // Unless it was initialised as open.
-      if (initialIsOpen || defaultIsOpen || isOpen) {
-        if (inputRef.current) {
-          inputRef.current.focus();
-        }
-      }
+    var focusOnOpen = initialIsOpen || defaultIsOpen || isOpen;
+
+    if (focusOnOpen && inputRef.current) {
+      inputRef.current.focus();
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [isOpen]);
+  }, []);
   react.useEffect(function () {
     if (isInitialMountRef.current) {
       return;
@@ -3330,7 +3300,13 @@ function useCombobox(userProps) {
 
   react.useEffect(function () {
     isInitialMountRef.current = false;
-  }, []);
+  }, []); // Reset itemRefs on close.
+
+  react.useEffect(function () {
+    if (!isOpen) {
+      itemRefs.current = {};
+    }
+  }, [isOpen]);
   /* Event handler functions */
 
   var inputKeyDownHandlers = react.useMemo(function () {
@@ -3352,6 +3328,10 @@ function useCombobox(userProps) {
         });
       },
       Home: function Home(event) {
+        if (!latest.current.state.isOpen) {
+          return;
+        }
+
         event.preventDefault();
         dispatch({
           type: InputKeyDownHome,
@@ -3359,6 +3339,10 @@ function useCombobox(userProps) {
         });
       },
       End: function End(event) {
+        if (!latest.current.state.isOpen) {
+          return;
+        }
+
         event.preventDefault();
         dispatch({
           type: InputKeyDownEnd,
@@ -3366,36 +3350,37 @@ function useCombobox(userProps) {
         });
       },
       Escape: function Escape() {
-        dispatch({
-          type: InputKeyDownEscape
-        });
-      },
-      Enter: function Enter(event) {
-        // if IME composing, wait for next Enter keydown event.
-        if (event.which === 229) {
-          return;
-        }
-
         var latestState = latest.current.state;
 
-        if (latestState.isOpen) {
-          event.preventDefault();
+        if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) {
+          dispatch({
+            type: InputKeyDownEscape
+          });
         }
+      },
+      Enter: function Enter(event) {
+        var latestState = latest.current.state; // if closed or no highlighted index, do nothing.
 
+        if (!latestState.isOpen || latestState.highlightedIndex < 0 || event.which === 229 // if IME composing, wait for next Enter keydown event.
+        ) {
+            return;
+          }
+
+        event.preventDefault();
         dispatch({
           type: InputKeyDownEnter,
           getItemNodeFromIndex: getItemNodeFromIndex
         });
       }
     };
-  }, [dispatch, latest]); // Getter props.
+  }, [dispatch, latest, getItemNodeFromIndex]); // Getter props.
 
   var getLabelProps = react.useCallback(function (labelProps) {
     return _extends__default['default']({
-      id: elementIdsRef.current.labelId,
-      htmlFor: elementIdsRef.current.inputId
+      id: elementIds.labelId,
+      htmlFor: elementIds.inputId
     }, labelProps);
-  }, []);
+  }, [elementIds]);
   var getMenuProps = react.useCallback(function (_temp, _temp2) {
     var _extends2;
 
@@ -3413,12 +3398,12 @@ function useCombobox(userProps) {
     setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
     return _extends__default['default']((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
       menuRef.current = menuNode;
-    }), _extends2.id = elementIdsRef.current.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIdsRef.current.labelId, _extends2.onMouseLeave = callAllEventHandlers(onMouseLeave, function () {
+    }), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.labelId, _extends2.onMouseLeave = callAllEventHandlers(onMouseLeave, function () {
       dispatch({
         type: MenuMouseLeave$1
       });
     }), _extends2), rest);
-  }, [dispatch, setGetterPropCallInfo]);
+  }, [dispatch, setGetterPropCallInfo, elementIds]);
   var getItemProps = react.useCallback(function (_temp3) {
     var _extends3, _ref4;
 
@@ -3474,12 +3459,12 @@ function useCombobox(userProps) {
 
     return _extends__default['default']((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) {
       if (itemNode) {
-        itemRefs.current[elementIdsRef.current.getItemId(itemIndex)] = itemNode;
+        itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode;
       }
-    }), _extends3.role = 'option', _extends3['aria-selected'] = "" + (itemIndex === latestState.highlightedIndex), _extends3.id = elementIdsRef.current.getItemId(itemIndex), _extends3), !rest.disabled && (_ref4 = {
+    }), _extends3.role = 'option', _extends3['aria-selected'] = "" + (itemIndex === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(itemIndex), _extends3), !rest.disabled && (_ref4 = {
       onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove)
     }, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), rest);
-  }, [dispatch, latest, shouldScrollRef]);
+  }, [dispatch, latest, shouldScrollRef, elementIds]);
   var getToggleButtonProps = react.useCallback(function (_temp4) {
     var _extends4;
 
@@ -3503,12 +3488,12 @@ function useCombobox(userProps) {
 
     return _extends__default['default']((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (toggleButtonNode) {
       toggleButtonRef.current = toggleButtonNode;
-    }), _extends4.id = elementIdsRef.current.toggleButtonId, _extends4.tabIndex = -1, _extends4), !rest.disabled && _extends__default['default']({}, 
+    }), _extends4.id = elementIds.toggleButtonId, _extends4.tabIndex = -1, _extends4), !rest.disabled && _extends__default['default']({}, 
     /* istanbul ignore next (react-native) */
     {
       onPress: callAllEventHandlers(onPress, toggleButtonHandleClick)
     } ), rest);
-  }, [dispatch, latest]);
+  }, [dispatch, latest, elementIds]);
   var getInputProps = react.useCallback(function (_temp5, _temp6) {
     var _extends5;
 
@@ -3549,7 +3534,7 @@ function useCombobox(userProps) {
 
     var inputHandleBlur = function inputHandleBlur() {
       /* istanbul ignore else */
-      if (!mouseAndTouchTrackersRef.current.isMouseDown) {
+      if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
         dispatch({
           type: InputBlur,
           selectItem: true
@@ -3583,16 +3568,16 @@ function useCombobox(userProps) {
 
     return _extends__default['default']((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) {
       inputRef.current = inputNode;
-    }), _extends5.id = elementIdsRef.current.inputId, _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIdsRef.current.menuId, _extends5), latestState.isOpen && latestState.highlightedIndex > -1 && {
-      'aria-activedescendant': elementIdsRef.current.getItemId(latestState.highlightedIndex)
+    }), _extends5.id = elementIds.inputId, _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.menuId, _extends5), latestState.isOpen && latestState.highlightedIndex > -1 && {
+      'aria-activedescendant': elementIds.getItemId(latestState.highlightedIndex)
     }, {
-      'aria-labelledby': elementIdsRef.current.labelId,
+      'aria-labelledby': elementIds.labelId,
       // https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
       // revert back since autocomplete="nope" is ignored on latest Chrome and Opera
       autoComplete: 'off',
       value: latestState.inputValue
     }, eventHandlers, rest);
-  }, [dispatch, inputKeyDownHandlers, latest, mouseAndTouchTrackersRef, setGetterPropCallInfo]);
+  }, [dispatch, inputKeyDownHandlers, latest, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds]);
   var getComboboxProps = react.useCallback(function (_temp7, _temp8) {
     var _extends6;
 
@@ -3609,8 +3594,8 @@ function useCombobox(userProps) {
     setGetterPropCallInfo('getComboboxProps', suppressRefError, refKey, comboboxRef);
     return _extends__default['default']((_extends6 = {}, _extends6[refKey] = handleRefs(ref, function (comboboxNode) {
       comboboxRef.current = comboboxNode;
-    }), _extends6.role = 'combobox', _extends6['aria-haspopup'] = 'listbox', _extends6['aria-owns'] = elementIdsRef.current.menuId, _extends6['aria-expanded'] = latest.current.state.isOpen, _extends6), rest);
-  }, [latest, setGetterPropCallInfo]); // returns
+    }), _extends6.role = 'combobox', _extends6['aria-haspopup'] = 'listbox', _extends6['aria-owns'] = elementIds.menuId, _extends6['aria-expanded'] = latest.current.state.isOpen, _extends6), rest);
+  }, [latest, setGetterPropCallInfo, elementIds]); // returns
 
   var toggleMenu = react.useCallback(function () {
     dispatch({
@@ -3712,6 +3697,7 @@ function getDefaultValue$1(props, propKey) {
  * @returns {Object} The initial state.
  */
 
+
 function getInitialState$2(props) {
   var activeIndex = getInitialValue$1(props, 'activeIndex');
   var selectedItems = getInitialValue$1(props, 'selectedItems');
@@ -3730,6 +3716,7 @@ function getInitialState$2(props) {
  * @returns {boolean} Whether the operation is allowed.
  */
 
+
 function isKeyDownOperationPermitted(event) {
   if (event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) {
     return false;
@@ -3753,6 +3740,7 @@ function isKeyDownOperationPermitted(event) {
  * @returns {string} The a11y message.
  */
 
+
 function getA11yRemovalMessage(selectionParameters) {
   var removedSelectedItem = selectionParameters.removedSelectedItem,
       itemToStringLocal = selectionParameters.itemToString;
@@ -3790,7 +3778,16 @@ var defaultProps$3 = {
   getA11yRemovalMessage: getA11yRemovalMessage,
   keyNavigationNext: 'ArrowRight',
   keyNavigationPrevious: 'ArrowLeft'
-};
+}; // eslint-disable-next-line import/no-mutable-exports
+
+var validatePropTypes$2 = noop;
+/* istanbul ignore next */
+
+if (process.env.NODE_ENV !== 'production') {
+  validatePropTypes$2 = function validatePropTypes(options, caller) {
+    PropTypes__default['default'].checkPropTypes(propTypes$2, options, 'prop', caller.name);
+  };
+}
 
 var SelectedItemClick = process.env.NODE_ENV !== "production" ? '__selected_item_click__' : 0;
 var SelectedItemKeyDownDelete = process.env.NODE_ENV !== "production" ? '__selected_item_keydown_delete__' : 1;
@@ -3954,7 +3951,8 @@ function useMultipleSelection(userProps) {
     userProps = {};
   }
 
-  // Props defaults and destructuring.
+  validatePropTypes$2(userProps, useMultipleSelection); // Props defaults and destructuring.
+
   var props = _extends__default['default']({}, defaultProps$3, userProps);
 
   var getA11yRemovalMessage = props.getA11yRemovalMessage,