downshift 5.4.3 → 5.4.7

package/dist/downshift.esm.js

@@ -350,7 +350,12 @@ function getNextWrappingIndex(moveAmount, baseIndex, itemCount, getItemNodeFromI
   }
 
   var nonDisabledNewIndex = getNextNonDisabledIndex(moveAmount, newIndex, itemCount, getItemNodeFromIndex, circular);
-  return nonDisabledNewIndex === -1 ? baseIndex : nonDisabledNewIndex;
+
+  if (nonDisabledNewIndex === -1) {
+    return baseIndex >= itemCount ? -1 : baseIndex;
+  }
+
+  return nonDisabledNewIndex;
 }
 /**
  * Returns the next index in the list of an item that is not disabled.
@@ -629,7 +634,7 @@ function () {
         // See https://github.com/downshift-js/downshift/issues/217 for more info.
 
         if (!isStateToSetFunction && stateToSet.hasOwnProperty('inputValue')) {
-          _this.props.onInputValueChange(stateToSet.inputValue, _extends(_extends({}, _this.getStateAndHelpers()), stateToSet));
+          _this.props.onInputValueChange(stateToSet.inputValue, _extends({}, _this.getStateAndHelpers(), stateToSet));
         }
 
         return _this.setState(function (state) {
@@ -679,7 +684,7 @@ function () {
           // earlier, so we'll call it now that we know what the inputValue state will be.
 
           if (isStateToSetFunction && newStateToSet.hasOwnProperty('inputValue')) {
-            _this.props.onInputValueChange(newStateToSet.inputValue, _extends(_extends({}, _this.getStateAndHelpers()), newStateToSet));
+            _this.props.onInputValueChange(newStateToSet.inputValue, _extends({}, _this.getStateAndHelpers(), newStateToSet));
           }
 
           return nextState;
@@ -834,7 +839,7 @@ function () {
           });
         }
       };
-      _this.buttonKeyDownHandlers = _extends(_extends({}, _this.keyDownHandlers), {}, {
+      _this.buttonKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
         ' ': function _(event) {
           event.preventDefault();
           this.toggleMenu({
@@ -842,7 +847,7 @@ function () {
           });
         }
       });
-      _this.inputKeyDownHandlers = _extends(_extends({}, _this.keyDownHandlers), {}, {
+      _this.inputKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
         Home: function Home(event) {
           var _this4 = this;
 
@@ -906,13 +911,13 @@ function () {
           onBlur: callAllEventHandlers(onBlur, _this.buttonHandleBlur)
         };
         var eventHandlers = rest.disabled ? {} : enabledEventHandlers;
-        return _extends(_extends({
+        return _extends({
           type: 'button',
           role: 'button',
           'aria-label': isOpen ? 'close menu' : 'open menu',
           'aria-haspopup': true,
           'data-toggle': true
-        }, eventHandlers), rest);
+        }, eventHandlers, rest);
       };
 
       _this.buttonHandleKeyUp = function (event) {
@@ -1004,7 +1009,7 @@ function () {
         /* istanbul ignore if (react-native) */
 
 
-        return _extends(_extends({
+        return _extends({
           'aria-autocomplete': 'list',
           'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' && highlightedIndex >= 0 ? _this.getItemId(highlightedIndex) : null,
           'aria-controls': isOpen ? _this.menuId : null,
@@ -1014,7 +1019,7 @@ function () {
           autoComplete: 'off',
           value: inputValue,
           id: _this.inputId
-        }, eventHandlers), rest);
+        }, eventHandlers, rest);
       };
 
       _this.inputHandleKeyDown = function (event) {
@@ -1134,11 +1139,11 @@ function () {
         var eventHandlers = rest.disabled ? {
           onMouseDown: enabledEventHandlers.onMouseDown
         } : enabledEventHandlers;
-        return _extends(_extends({
+        return _extends({
           id: _this.getItemId(index),
           role: 'option',
           'aria-selected': _this.getState().highlightedIndex === index
-        }, eventHandlers), rest);
+        }, eventHandlers, rest);
       };
 
       _this.clearItems = function () {
@@ -1171,11 +1176,11 @@ function () {
 
         _this.internalSetState(function (_ref9) {
           var isOpen = _ref9.isOpen;
-          return _extends(_extends({
+          return _extends({
             isOpen: !isOpen
           }, isOpen && {
             highlightedIndex: _this.props.defaultHighlightedIndex
-          }), otherStateToSet);
+          }, otherStateToSet);
         }, function () {
           var _this$getState7 = _this.getState(),
               isOpen = _this$getState7.isOpen,
@@ -1823,7 +1828,7 @@ function useEnhancedReducer(reducer, initialState, props) {
     actionRef.current = action;
     state = getState(state, action.props);
     var changes = reducer(state, action);
-    var newState = action.props.stateReducer(state, _extends(_extends({}, action), {}, {
+    var newState = action.props.stateReducer(state, _extends({}, action, {
       changes: changes
     }));
     return newState;
@@ -1912,7 +1917,7 @@ function getInitialState(props) {
   var highlightedIndex = getInitialValue(props, 'highlightedIndex');
   var inputValue = getInitialValue(props, 'inputValue');
   return {
-    highlightedIndex: highlightedIndex < 0 && selectedItem ? props.items.indexOf(selectedItem) : highlightedIndex,
+    highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.indexOf(selectedItem) : highlightedIndex,
     isOpen: isOpen,
     selectedItem: selectedItem,
     inputValue: inputValue
@@ -2023,6 +2028,9 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
  */
 
 function useGetterPropsCalledChecker() {
+  var isNotProduction = process.env.NODE_ENV !== 'production';
+  var isInitialMountRef = useRef(true);
+
   for (var _len = arguments.length, propKeys = new Array(_len), _key = 0; _key < _len; _key++) {
     propKeys[_key] = arguments[_key];
   }
@@ -2031,33 +2039,32 @@ function useGetterPropsCalledChecker() {
     acc[propKey] = {};
     return acc;
   }, {}));
+  useEffect(function () {
+    if (!isNotProduction) {
+      return;
+    }
 
-  if (process.env.NODE_ENV !== 'production') {
     Object.keys(getterPropsCalledRef.current).forEach(function (propKey) {
-      getterPropsCalledRef.current[propKey] = null;
-    });
-  }
+      var propCallInfo = getterPropsCalledRef.current[propKey];
 
-  useEffect(function () {
-    if (process.env.NODE_ENV !== 'production') {
-      Object.keys(getterPropsCalledRef.current).forEach(function (propKey) {
-        if (!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 _getterPropsCalledRef = getterPropsCalledRef.current[propKey],
-            suppressRefError = _getterPropsCalledRef.suppressRefError,
-            refKey = _getterPropsCalledRef.refKey,
-            elementRef = _getterPropsCalledRef.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;
   });
   var setGetterPropCallInfo = useCallback(function (propKey, suppressRefError, refKey, elementRef) {
     if (process.env.NODE_ENV !== 'production') {
@@ -2165,7 +2172,7 @@ function getA11yStatusMessage$1(_ref) {
   return '';
 }
 
-var defaultProps$1 = _extends(_extends({}, defaultProps), {}, {
+var defaultProps$1 = _extends({}, defaultProps, {
   getA11yStatusMessage: getA11yStatusMessage$1
 });
 
@@ -2391,7 +2398,7 @@ function downshiftSelectReducer(state, action) {
       throw new Error('Reducer called without proper action type.');
   }
 
-  return _extends(_extends({}, state), changes);
+  return _extends({}, state, changes);
 }
 /* eslint-enable complexity */
 
@@ -2411,7 +2418,7 @@ function useSelect(userProps) {
   } // Props defaults and destructuring.
 
 
-  var props = _extends(_extends({}, defaultProps$1), userProps);
+  var props = _extends({}, defaultProps$1, userProps);
 
   var items = props.items,
       scrollIntoView = props.scrollIntoView,
@@ -2727,11 +2734,11 @@ function useSelect(userProps) {
 
     var latestState = latest.current.state;
     setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef);
-    return _extends(_extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
+    return _extends((_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)
-    }), {}, {
+    }, {
       onMouseLeave: callAllEventHandlers(onMouseLeave, function menuHandleMouseLeave() {
         dispatch({
           type: MenuMouseLeave
@@ -2962,7 +2969,7 @@ function getInitialState$1(props) {
     inputValue = props.itemToString(selectedItem);
   }
 
-  return _extends(_extends({}, initialState), {}, {
+  return _extends({}, initialState, {
     inputValue: inputValue
   });
 }
@@ -3027,20 +3034,21 @@ function useControlledReducer$1(reducer, initialState, props) {
       dispatch = _useEnhancedReducer[1]; // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
 
 
-  if (isControlledProp(props, 'selectedItem')) {
-    if (previousSelectedItemRef.current !== props.selectedItem) {
-      dispatch({
-        type: ControlledPropUpdatedSelectedItem,
-        inputValue: props.itemToString(props.selectedItem)
-      });
-    }
-
-    previousSelectedItemRef.current = state.selectedItem === previousSelectedItemRef.current ? props.selectedItem : state.selectedItem;
-  }
+  useEffect(function () {
+    if (isControlledProp(props, 'selectedItem')) {
+      if (previousSelectedItemRef.current !== props.selectedItem) {
+        dispatch({
+          type: ControlledPropUpdatedSelectedItem,
+          inputValue: props.itemToString(props.selectedItem)
+        });
+      }
 
+      previousSelectedItemRef.current = state.selectedItem === previousSelectedItemRef.current ? props.selectedItem : state.selectedItem;
+    }
+  });
   return [getState(state, props), dispatch];
 }
-var defaultProps$2 = _extends(_extends({}, defaultProps), {}, {
+var defaultProps$2 = _extends({}, defaultProps, {
   getA11yStatusMessage: getA11yStatusMessage,
   circularNavigation: true
 });
@@ -3205,7 +3213,7 @@ function downshiftUseComboboxReducer(state, action) {
       throw new Error('Reducer called without proper action type.');
   }
 
-  return _extends(_extends({}, state), changes);
+  return _extends({}, state, changes);
 }
 /* eslint-enable complexity */
 
@@ -3225,7 +3233,7 @@ function useCombobox(userProps) {
   } // Props defaults and destructuring.
 
 
-  var props = _extends(_extends({}, defaultProps$2), userProps);
+  var props = _extends({}, defaultProps$2, userProps);
 
   var initialIsOpen = props.initialIsOpen,
       defaultIsOpen = props.defaultIsOpen,
@@ -3261,8 +3269,7 @@ function useCombobox(userProps) {
 
   var previousResultCountRef = useRef(); // used for checking when props are moving from controlled to uncontrolled.
 
-  var prevPropsRef = useRef(props); // used to store information about getter props being called on render.
-  // utility callback to get item element.
+  var prevPropsRef = useRef(props); // utility callback to get item element.
 
   var latest = useLatestRef({
     state: state,
@@ -3478,7 +3485,7 @@ function useCombobox(userProps) {
 
     var onSelectKey = 'onClick';
     var customClickHandler = onClick;
-    return _extends(_extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) {
+    return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) {
       if (itemNode) {
         itemRefs.current[elementIdsRef.current.getItemId(itemIndex)] = itemNode;
       }
@@ -3499,7 +3506,11 @@ function useCombobox(userProps) {
         type: ItemClick$1,
         index: index
       });
-    }), _ref4)), rest);
+
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    }), _ref4), rest);
   }, [dispatch, latest]);
   var getToggleButtonProps = useCallback(function (_temp4) {
     var _extends4;
@@ -3522,11 +3533,11 @@ function useCombobox(userProps) {
       }
     };
 
-    return _extends(_extends((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (toggleButtonNode) {
+    return _extends((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (toggleButtonNode) {
       toggleButtonRef.current = toggleButtonNode;
     }), _extends4.id = elementIdsRef.current.toggleButtonId, _extends4.tabIndex = -1, _extends4), !rest.disabled && _extends({}, {
       onClick: callAllEventHandlers(onClick, toggleButtonHandleClick)
-    })), rest);
+    }), rest);
   }, [dispatch, latest]);
   var getInputProps = useCallback(function (_temp5, _temp6) {
     var _extends5;
@@ -3586,17 +3597,17 @@ function useCombobox(userProps) {
     /* istanbul ignore if (react-native) */
 
 
-    return _extends(_extends(_extends((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) {
+    return _extends((_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)
-    }), {}, {
+    }, {
       'aria-labelledby': elementIdsRef.current.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);
+    }, eventHandlers, rest);
   }, [dispatch, inputKeyDownHandlers, latest, mouseAndTouchTrackersRef, setGetterPropCallInfo]);
   var getComboboxProps = useCallback(function (_temp7, _temp8) {
     var _extends6;
@@ -3949,7 +3960,7 @@ function downshiftMultipleSelectionReducer(state, action) {
       throw new Error('Reducer called without proper action type.');
   }
 
-  return _extends(_extends({}, state), changes);
+  return _extends({}, state, changes);
 }
 
 useMultipleSelection.stateChangeTypes = stateChangeTypes$3;
@@ -3960,7 +3971,7 @@ function useMultipleSelection(userProps) {
   }
 
   // Props defaults and destructuring.
-  var props = _extends(_extends({}, defaultProps$3), userProps);
+  var props = _extends({}, defaultProps$3, userProps);
 
   var getA11yRemovalMessage = props.getA11yRemovalMessage,
       itemToString = props.itemToString,
@@ -4129,7 +4140,7 @@ function useMultipleSelection(userProps) {
         suppressRefError = _ref5$suppressRefErro === void 0 ? false : _ref5$suppressRefErro;
 
     setGetterPropCallInfo('getDropdownProps', suppressRefError, refKey, dropdownRef);
-    return _extends(_extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (dropdownNode) {
+    return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (dropdownNode) {
       if (dropdownNode) {
         dropdownRef.current = dropdownNode;
       }
@@ -4146,7 +4157,7 @@ function useMultipleSelection(userProps) {
           type: DropdownClick
         });
       })
-    }), rest);
+    }, rest);
   }, [dispatch, dropdownKeyDownHandlers, setGetterPropCallInfo]); // returns
 
   var addSelectedItem = useCallback(function (selectedItem) {