downshift 8.3.3 → 8.5.0

package/dist/downshift.umd.js

@@ -2954,8 +2954,8 @@
    */
   function getA11ySelectionMessage(selectionParameters) {
     var selectedItem = selectionParameters.selectedItem,
-      itemToStringLocal = selectionParameters.itemToString;
-    return selectedItem ? itemToStringLocal(selectedItem) + " has been selected." : '';
+      itemToString = selectionParameters.itemToString;
+    return selectedItem ? itemToString(selectedItem) + " has been selected." : '';
   }
 
   /**
@@ -3025,9 +3025,6 @@
     }
     return [item, index];
   }
-  function itemToString(item) {
-    return item ? String(item) : '';
-  }
   function isAcceptedCharacterKey(key) {
     return /^\S{1}$/.test(key);
   }
@@ -3106,7 +3103,12 @@
     return [getState(state, props), dispatch];
   }
   var defaultProps$3 = {
-    itemToString: itemToString,
+    itemToString: function itemToString(item) {
+      return item ? String(item) : '';
+    },
+    itemToKey: function itemToKey(item) {
+      return item;
+    },
     stateReducer: stateReducer,
     getA11ySelectionMessage: getA11ySelectionMessage,
     scrollIntoView: scrollIntoView,
@@ -3143,7 +3145,9 @@
     var highlightedIndex = getInitialValue$1(props, 'highlightedIndex');
     var inputValue = getInitialValue$1(props, 'inputValue');
     return {
-      highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.indexOf(selectedItem) : highlightedIndex,
+      highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.findIndex(function (item) {
+        return props.itemToKey(item) === props.itemToKey(selectedItem);
+      }) : highlightedIndex,
       isOpen: isOpen,
       selectedItem: selectedItem,
       inputValue: inputValue
@@ -3152,7 +3156,8 @@
   function getHighlightedIndexOnOpen(props, state, offset) {
     var items = props.items,
       initialHighlightedIndex = props.initialHighlightedIndex,
-      defaultHighlightedIndex = props.defaultHighlightedIndex;
+      defaultHighlightedIndex = props.defaultHighlightedIndex,
+      itemToKey = props.itemToKey;
     var selectedItem = state.selectedItem,
       highlightedIndex = state.highlightedIndex;
     if (items.length === 0) {
@@ -3167,24 +3172,24 @@
       return defaultHighlightedIndex;
     }
     if (selectedItem) {
-      return items.indexOf(selectedItem);
+      return items.findIndex(function (item) {
+        return itemToKey(selectedItem) === itemToKey(item);
+      });
     }
     if (offset === 0) {
       return -1;
     }
     return offset < 0 ? items.length - 1 : 0;
   }
-
   /**
-   * Reuse the movement tracking of mouse and touch events.
+   * Tracks mouse and touch events, such as mouseDown, touchMove and touchEnd.
    *
-   * @param {boolean} isOpen Whether the dropdown is open or not.
-   * @param {Array<Object>} downshiftElementRefs Downshift element refs to track movement (toggleButton, menu etc.)
-   * @param {Object} environment Environment where component/hook exists.
-   * @param {Function} handleBlur Handler on blur from mouse or touch.
-   * @returns {Object} Ref containing whether mouseDown or touchMove event is happening
+   * @param {Object} environment The environment to add the event listeners to, for instance window.
+   * @param {Array<HTMLElement>} downshiftElementRefs The refs for the element that should not trigger a blur action from mouseDown or touchEnd.
+   * @param {Function} handleBlur The function that is called if mouseDown or touchEnd occured outside the downshiftElements.
+   * @returns {Object} The mouse and touch events information, if any of are happening.
    */
-  function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) {
+  function useMouseAndTouchTracker(environment, downshiftElementRefs, handleBlur) {
     var mouseAndTouchTrackersRef = React.useRef({
       isMouseDown: false,
       isTouchMove: false,
@@ -3192,45 +3197,39 @@
     });
     React.useEffect(function () {
       if (!environment) {
-        return;
+        return noop;
       }
-
-      // The same strategy for checking if a click occurred inside or outside downshift
-      // as in downshift.js.
-      var onMouseDown = function onMouseDown() {
+      var downshiftElements = downshiftElementRefs.map(function (ref) {
+        return ref.current;
+      });
+      function onMouseDown() {
         mouseAndTouchTrackersRef.current.isTouchEnd = false; // reset this one.
         mouseAndTouchTrackersRef.current.isMouseDown = true;
-      };
-      var onMouseUp = function onMouseUp(event) {
+      }
+      function onMouseUp(event) {
         mouseAndTouchTrackersRef.current.isMouseDown = false;
-        if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
-          return ref.current;
-        }), environment)) {
+        if (!targetWithinDownshift(event.target, downshiftElements, environment)) {
           handleBlur();
         }
-      };
-      var onTouchStart = function onTouchStart() {
+      }
+      function onTouchStart() {
         mouseAndTouchTrackersRef.current.isTouchEnd = false;
         mouseAndTouchTrackersRef.current.isTouchMove = false;
-      };
-      var onTouchMove = function onTouchMove() {
+      }
+      function onTouchMove() {
         mouseAndTouchTrackersRef.current.isTouchMove = true;
-      };
-      var onTouchEnd = function onTouchEnd(event) {
+      }
+      function onTouchEnd(event) {
         mouseAndTouchTrackersRef.current.isTouchEnd = true;
-        if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) {
-          return ref.current;
-        }), environment, false)) {
+        if (!mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElements, environment, false)) {
           handleBlur();
         }
-      };
+      }
       environment.addEventListener('mousedown', onMouseDown);
       environment.addEventListener('mouseup', onMouseUp);
       environment.addEventListener('touchstart', onTouchStart);
       environment.addEventListener('touchmove', onTouchMove);
       environment.addEventListener('touchend', onTouchEnd);
-
-      // eslint-disable-next-line consistent-return
       return function cleanup() {
         environment.removeEventListener('mousedown', onMouseDown);
         environment.removeEventListener('mouseup', onMouseUp);
@@ -3238,9 +3237,9 @@
         environment.removeEventListener('touchmove', onTouchMove);
         environment.removeEventListener('touchend', onTouchEnd);
       };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isOpen, environment]);
-    return mouseAndTouchTrackersRef;
+      // eslint-disable-next-line react-hooks/exhaustive-deps -- refs don't change
+    }, [environment, handleBlur]);
+    return mouseAndTouchTrackersRef.current;
   }
 
   /* istanbul ignore next */
@@ -3426,6 +3425,7 @@
       Node: PropTypes.func.isRequired
     }),
     itemToString: PropTypes.func,
+    itemToKey: PropTypes.func,
     stateReducer: PropTypes.func
   };
 
@@ -3659,7 +3659,9 @@
         {
           var lowercasedKey = action.key;
           var inputValue = "" + state.inputValue + lowercasedKey;
-          var prevHighlightedIndex = !state.isOpen && state.selectedItem ? props.items.indexOf(state.selectedItem) : state.highlightedIndex;
+          var prevHighlightedIndex = !state.isOpen && state.selectedItem ? props.items.findIndex(function (item) {
+            return props.itemToKey(item) === props.itemToKey(state.selectedItem);
+          }) : state.highlightedIndex;
           var highlightedIndex = getItemIndexByCharacterKey({
             keysSoFar: inputValue,
             highlightedIndex: prevHighlightedIndex,
@@ -3861,12 +3863,13 @@
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    // Add mouse/touch events to document.
-    var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, function () {
-      dispatch({
-        type: ToggleButtonBlur
-      });
-    });
+    var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, [toggleButtonRef, menuRef], React.useCallback(function handleBlur() {
+      if (latest.current.state.isOpen) {
+        dispatch({
+          type: ToggleButtonBlur
+        });
+      }
+    }, [dispatch, latest]));
     var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps');
     // Reset itemRefs on close.
     React.useEffect(function () {
@@ -4052,7 +4055,7 @@
         });
       };
       var toggleButtonHandleBlur = function toggleButtonHandleBlur() {
-        if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
+        if (latestState.isOpen && !mouseAndTouchTrackers.isMouseDown) {
           dispatch({
             type: ToggleButtonBlur
           });
@@ -4081,7 +4084,7 @@
       }
       setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
       return toggleProps;
-    }, [latest, elementIds, setGetterPropCallInfo, dispatch, mouseAndTouchTrackersRef, toggleButtonKeyDownHandlers]);
+    }, [dispatch, elementIds, latest, mouseAndTouchTrackers, setGetterPropCallInfo, toggleButtonKeyDownHandlers]);
     var getItemProps = React.useCallback(function (_temp6) {
       var _extends4;
       var _ref6 = _temp6 === void 0 ? {} : _temp6,
@@ -4107,7 +4110,7 @@
         index = _getItemAndIndex[1];
       var disabled = latestProps.isItemDisabled(item, index);
       var itemHandleMouseMove = function itemHandleMouseMove() {
-        if (mouseAndTouchTrackersRef.current.isTouchEnd || index === latestState.highlightedIndex) {
+        if (mouseAndTouchTrackers.isTouchEnd || index === latestState.highlightedIndex) {
           return;
         }
         shouldScrollRef.current = false;
@@ -4141,7 +4144,7 @@
       itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
       itemProps.onMouseDown = callAllEventHandlers(onMouseDown, itemHandleMouseDown);
       return itemProps;
-    }, [latest, elementIds, mouseAndTouchTrackersRef, shouldScrollRef, dispatch]);
+    }, [latest, elementIds, mouseAndTouchTrackers, shouldScrollRef, dispatch]);
     return {
       // prop getters.
       getToggleButtonProps: getToggleButtonProps,
@@ -4261,13 +4264,21 @@
       if (!isControlledProp(props, 'selectedItem')) {
         return;
       }
-      if (!isInitialMount &&
-      // on first mount we already have the proper inputValue for a initial selected item.
-      props.selectedItemChanged(previousSelectedItemRef.current, props.selectedItem)) {
-        dispatch({
-          type: ControlledPropUpdatedSelectedItem,
-          inputValue: props.itemToString(props.selectedItem)
-        });
+      if (!isInitialMount // on first mount we already have the proper inputValue for a initial selected item.
+      ) {
+        var shouldCallDispatch;
+        if (props.selectedItemChanged === undefined) {
+          shouldCallDispatch = props.itemToKey(props.selectedItem) !== props.itemToKey(previousSelectedItemRef.current);
+        } else {
+          console.warn("The \"selectedItemChanged\" is deprecated. Please use \"itemToKey instead\". https://github.com/downshift-js/downshift/blob/master/src/hooks/useCombobox/README.md#selecteditemchanged");
+          shouldCallDispatch = props.selectedItemChanged(previousSelectedItemRef.current, props.selectedItem);
+        }
+        if (shouldCallDispatch) {
+          dispatch({
+            type: ControlledPropUpdatedSelectedItem,
+            inputValue: props.itemToString(props.selectedItem)
+          });
+        }
       }
       previousSelectedItemRef.current = state.selectedItem === previousSelectedItemRef.current ? props.selectedItem : state.selectedItem;
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -4284,9 +4295,6 @@
     };
   }
   var defaultProps$1 = _extends({}, defaultProps$3, {
-    selectedItemChanged: function selectedItemChanged(prevItem, item) {
-      return prevItem !== item;
-    },
     getA11yStatusMessage: getA11yStatusMessage$1,
     isItemDisabled: function isItemDisabled() {
       return false;
@@ -4497,13 +4505,14 @@
         previousResultCountRef.current = items.length;
       }
     });
-    // Add mouse/touch events to document.
-    var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [inputRef, menuRef, toggleButtonRef], environment, function () {
-      dispatch({
-        type: InputBlur,
-        selectItem: false
-      });
-    });
+    var mouseAndTouchTrackers = useMouseAndTouchTracker(environment, [toggleButtonRef, menuRef, inputRef], React.useCallback(function handleBlur() {
+      if (latest.current.state.isOpen) {
+        dispatch({
+          type: InputBlur,
+          selectItem: false
+        });
+      }
+    }, [dispatch, latest]));
     var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getMenuProps');
     // Reset itemRefs on close.
     React.useEffect(function () {
@@ -4651,7 +4660,7 @@
       var onSelectKey = 'onClick';
       var customClickHandler = onClick;
       var itemHandleMouseMove = function itemHandleMouseMove() {
-        if (mouseAndTouchTrackersRef.current.isTouchEnd || index === latestState.highlightedIndex) {
+        if (mouseAndTouchTrackers.isTouchEnd || index === latestState.highlightedIndex) {
           return;
         }
         shouldScrollRef.current = false;
@@ -4679,7 +4688,7 @@
         onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
         onMouseDown: callAllEventHandlers(onMouseDown, itemHandleMouseDown)
       }, rest);
-    }, [dispatch, elementIds, latest, mouseAndTouchTrackersRef, shouldScrollRef]);
+    }, [dispatch, elementIds, latest, mouseAndTouchTrackers, shouldScrollRef]);
     var getToggleButtonProps = React.useCallback(function (_temp4) {
       var _extends4;
       var _ref5 = _temp4 === void 0 ? {} : _temp4,
@@ -4733,7 +4742,7 @@
       };
       var inputHandleBlur = function inputHandleBlur(event) {
         /* istanbul ignore else */
-        if (environment != null && environment.document && latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
+        if (environment != null && environment.document && latestState.isOpen && !mouseAndTouchTrackers.isMouseDown) {
           var isBlurByTabChange = event.relatedTarget === null && environment.document.activeElement !== environment.document.body;
           dispatch({
             type: InputBlur,
@@ -4757,7 +4766,7 @@
       return _extends((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) {
         inputRef.current = inputNode;
       }), _extends5['aria-activedescendant'] = latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : '', _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.menuId, _extends5['aria-expanded'] = latestState.isOpen, _extends5['aria-labelledby'] = rest && rest['aria-label'] ? undefined : elementIds.labelId, _extends5.autoComplete = 'off', _extends5.id = elementIds.inputId, _extends5.role = 'combobox', _extends5.value = latestState.inputValue, _extends5), eventHandlers, rest);
-    }, [setGetterPropCallInfo, latest, elementIds, inputKeyDownHandlers, dispatch, mouseAndTouchTrackersRef, environment]);
+    }, [dispatch, elementIds, environment, inputKeyDownHandlers, latest, mouseAndTouchTrackers, setGetterPropCallInfo]);
 
     // returns
     var toggleMenu = React.useCallback(function () {
@@ -4930,6 +4939,7 @@
   });
   var defaultProps = {
     itemToString: defaultProps$3.itemToString,
+    itemToKey: defaultProps$3.itemToKey,
     stateReducer: defaultProps$3.stateReducer,
     environment: defaultProps$3.environment,
     getA11yRemovalMessage: getA11yRemovalMessage,
@@ -5044,7 +5054,9 @@
       case FunctionRemoveSelectedItem:
         {
           var _newActiveIndex = activeIndex;
-          var selectedItemIndex = selectedItems.indexOf(selectedItem);
+          var selectedItemIndex = selectedItems.findIndex(function (item) {
+            return props.itemToKey(item) === props.itemToKey(selectedItem);
+          });
           if (selectedItemIndex < 0) {
             break;
           }
@@ -5128,8 +5140,10 @@
         return;
       }
       if (selectedItems.length < previousSelectedItemsRef.current.length) {
-        var removedSelectedItem = previousSelectedItemsRef.current.find(function (item) {
-          return selectedItems.indexOf(item) < 0;
+        var removedSelectedItem = previousSelectedItemsRef.current.find(function (selectedItem) {
+          return selectedItems.findIndex(function (item) {
+            return props.itemToKey(item) === props.itemToKey(selectedItem);
+          }) < 0;
         });
         setStatus(getA11yRemovalMessage({
           itemToString: itemToString,