downshift 5.4.3 → 5.4.7

package/README.md

@@ -7,10 +7,11 @@
 <p align="center" style="font-size: 1.2rem;">Primitives to build simple, flexible, WAI-ARIA compliant React
 autocomplete, combobox or select dropdown components.</p>
 
-> See
-> [the intro blog post](https://kentcdodds.com/blog/introducing-downshift-for-react)
-> and
-> [Episode 79 of the Full Stack Radio podcast](https://simplecast.com/s/f2e65eaf)
+> [Read the docs](https://downshift-js.com)
+> |
+> [See the intro blog post](https://kentcdodds.com/blog/introducing-downshift-for-react)
+> |
+> [Listen to the Episode 79 of the Full Stack Radio podcast](https://simplecast.com/s/f2e65eaf)
 
 <hr />
 
@@ -1419,12 +1420,13 @@ Thanks goes to these people ([emoji key][emojis]):
   <tr>
     <td align="center"><a href="https://github.com/mattleonowicz"><img src="https://avatars3.githubusercontent.com/u/9438872?v=4" width="100px;" alt=""/><br /><sub><b>Mateusz Leonowicz</b></sub></a><br /><a href="https://github.com/downshift-js/downshift/commits?author=mattleonowicz" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/atomicpages"><img src="https://avatars2.githubusercontent.com/u/1824291?v=4" width="100px;" alt=""/><br /><sub><b>Dennis Thompson</b></sub></a><br /><a href="https://github.com/downshift-js/downshift/commits?author=atomicpages" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://mayicodefuture.live"><img src="https://avatars1.githubusercontent.com/u/32408893?v=4" width="100px;" alt=""/><br /><sub><b>Maksym Boytsov</b></sub></a><br /><a href="https://github.com/downshift-js/downshift/commits?author=mayicodefuture" title="Code">💻</a></td>
+    <td align="center"><a href="http://dataart.com"><img src="https://avatars1.githubusercontent.com/u/5685800?v=4" width="100px;" alt=""/><br /><sub><b>Sergey Skrynnikov</b></sub></a><br /><a href="https://github.com/downshift-js/downshift/commits?author=IwalkAlone" title="Code">💻</a> <a href="https://github.com/downshift-js/downshift/commits?author=IwalkAlone" title="Tests">⚠️</a></td>
   </tr>
 </table>
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
-
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors][all-contributors] specification.

package/dist/downshift.cjs.js

@@ -356,7 +356,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.
@@ -635,7 +640,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) {
@@ -685,7 +690,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;
@@ -840,7 +845,7 @@ function () {
           });
         }
       };
-      _this.buttonKeyDownHandlers = _extends(_extends({}, _this.keyDownHandlers), {}, {
+      _this.buttonKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
         ' ': function _(event) {
           event.preventDefault();
           this.toggleMenu({
@@ -848,7 +853,7 @@ function () {
           });
         }
       });
-      _this.inputKeyDownHandlers = _extends(_extends({}, _this.keyDownHandlers), {}, {
+      _this.inputKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
         Home: function Home(event) {
           var _this4 = this;
 
@@ -912,13 +917,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) {
@@ -1010,7 +1015,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,
@@ -1020,7 +1025,7 @@ function () {
           autoComplete: 'off',
           value: inputValue,
           id: _this.inputId
-        }, eventHandlers), rest);
+        }, eventHandlers, rest);
       };
 
       _this.inputHandleKeyDown = function (event) {
@@ -1140,11 +1145,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 () {
@@ -1177,11 +1182,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,
@@ -1829,7 +1834,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;
@@ -1918,7 +1923,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
@@ -2029,6 +2034,9 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
  */
 
 function useGetterPropsCalledChecker() {
+  var isNotProduction = process.env.NODE_ENV !== 'production';
+  var isInitialMountRef = react.useRef(true);
+
   for (var _len = arguments.length, propKeys = new Array(_len), _key = 0; _key < _len; _key++) {
     propKeys[_key] = arguments[_key];
   }
@@ -2037,33 +2045,32 @@ function useGetterPropsCalledChecker() {
     acc[propKey] = {};
     return acc;
   }, {}));
+  react.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];
 
-  react.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 = react.useCallback(function (propKey, suppressRefError, refKey, elementRef) {
     if (process.env.NODE_ENV !== 'production') {
@@ -2171,7 +2178,7 @@ function getA11yStatusMessage$1(_ref) {
   return '';
 }
 
-var defaultProps$1 = _extends(_extends({}, defaultProps), {}, {
+var defaultProps$1 = _extends({}, defaultProps, {
   getA11yStatusMessage: getA11yStatusMessage$1
 });
 
@@ -2397,7 +2404,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 */
 
@@ -2417,7 +2424,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,
@@ -2733,11 +2740,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
@@ -2968,7 +2975,7 @@ function getInitialState$1(props) {
     inputValue = props.itemToString(selectedItem);
   }
 
-  return _extends(_extends({}, initialState), {}, {
+  return _extends({}, initialState, {
     inputValue: inputValue
   });
 }
@@ -3033,20 +3040,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;
-  }
+  react.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
 });
@@ -3211,7 +3219,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 */
 
@@ -3231,7 +3239,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,
@@ -3267,8 +3275,7 @@ function useCombobox(userProps) {
 
   var previousResultCountRef = react.useRef(); // used for checking when props are moving from controlled to uncontrolled.
 
-  var prevPropsRef = react.useRef(props); // used to store information about getter props being called on render.
-  // utility callback to get item element.
+  var prevPropsRef = react.useRef(props); // utility callback to get item element.
 
   var latest = useLatestRef({
     state: state,
@@ -3484,7 +3491,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;
       }
@@ -3505,7 +3512,11 @@ function useCombobox(userProps) {
         type: ItemClick$1,
         index: index
       });
-    }), _ref4)), rest);
+
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    }), _ref4), rest);
   }, [dispatch, latest]);
   var getToggleButtonProps = react.useCallback(function (_temp4) {
     var _extends4;
@@ -3528,11 +3539,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 = react.useCallback(function (_temp5, _temp6) {
     var _extends5;
@@ -3592,17 +3603,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 = react.useCallback(function (_temp7, _temp8) {
     var _extends6;
@@ -3955,7 +3966,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;
@@ -3966,7 +3977,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,
@@ -4135,7 +4146,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;
       }
@@ -4152,7 +4163,7 @@ function useMultipleSelection(userProps) {
           type: DropdownClick
         });
       })
-    }), rest);
+    }, rest);
   }, [dispatch, dropdownKeyDownHandlers, setGetterPropCallInfo]); // returns
 
   var addSelectedItem = react.useCallback(function (selectedItem) {