downshift 8.3.3 → 8.5.0

package/dist/src/hooks/useSelect/utils.d.ts

@@ -13,7 +13,8 @@ declare function getA11yStatusMessage<Item>({ isOpen, resultCount, previousResul
 export declare const defaultProps: {
     getA11yStatusMessage: typeof getA11yStatusMessage;
     isItemDisabled(): boolean;
-    itemToString: (item: any) => string;
+    itemToString(item: any): string;
+    itemToKey(item: any): any;
     stateReducer: (s: Object, a: Object) => Object;
     getA11ySelectionMessage: (selectionParameters: Object) => string;
     scrollIntoView: typeof import("../../utils").scrollIntoView;

package/dist/src/hooks/utils.d.ts

@@ -15,15 +15,14 @@ export function useA11yMessageSetter(getA11yMessage: any, dependencyArray: any,
 }): void;
 export function useGetterPropsCalledChecker(): typeof noop;
 /**
- * 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.
  */
-export function useMouseAndTouchTracker(isOpen: boolean, downshiftElementRefs: Array<Object>, environment: Object, handleBlur: Function): Object;
+export function useMouseAndTouchTracker(environment: Object, downshiftElementRefs: Array<HTMLElement>, handleBlur: Function): Object;
 export function getHighlightedIndexOnOpen(props: any, state: any, offset: any): any;
 export function getInitialState(props: any): {
     highlightedIndex: any;
@@ -44,7 +43,8 @@ export function getDefaultValue(props: any, propKey: any, defaultStateValues?: {
     inputValue: string;
 }): any;
 export namespace defaultProps {
-    export { itemToString };
+    export function itemToString(item: any): string;
+    export function itemToKey(item: any): any;
     export { stateReducer };
     export { getA11ySelectionMessage };
     export { scrollIntoView };
@@ -156,8 +156,8 @@ export namespace commonDropdownPropTypes {
         Node: PropTypes.Validator<(...args: any[]) => any>;
     }>>;
     export { environment_1 as environment };
-    const itemToString_1: PropTypes.Requireable<(...args: any[]) => any>;
-    export { itemToString_1 as itemToString };
+    export const itemToString: PropTypes.Requireable<(...args: any[]) => any>;
+    export const itemToKey: PropTypes.Requireable<(...args: any[]) => any>;
     const stateReducer_1: PropTypes.Requireable<(...args: any[]) => any>;
     export { stateReducer_1 as stateReducer };
 }
@@ -168,7 +168,6 @@ export namespace commonPropTypes { }
 export function useIsInitialMount(): boolean;
 import { noop } from "../utils";
 import React from "react";
-declare function itemToString(item: any): string;
 /**
  * Default state reducer that returns the changes.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "downshift",
-  "version": "8.3.3",
+  "version": "8.5.0",
   "description": "🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.",
   "main": "dist/downshift.cjs.js",
   "react-native": "dist/downshift.native.cjs.js",

package/preact/dist/downshift.cjs.js

@@ -1562,8 +1562,8 @@ function stateReducer(s, a) {
  */
 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." : '';
 }
 
 /**
@@ -1633,9 +1633,6 @@ function getItemAndIndex(itemProp, indexProp, items, errorMessage) {
   }
   return [item, index];
 }
-function itemToString(item) {
-  return item ? String(item) : '';
-}
 function isAcceptedCharacterKey(key) {
   return /^\S{1}$/.test(key);
 }
@@ -1714,7 +1711,12 @@ function useControlledReducer$1(reducer, props, createInitialState, isStateEqual
   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,
@@ -1751,7 +1753,9 @@ function getInitialState$2(props) {
   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
@@ -1760,7 +1764,8 @@ function getInitialState$2(props) {
 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) {
@@ -1775,24 +1780,24 @@ function getHighlightedIndexOnOpen(props, state, offset) {
     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,
@@ -1800,45 +1805,39 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
   });
   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);
@@ -1846,9 +1845,9 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
       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 */
@@ -2034,6 +2033,7 @@ var commonPropTypes = {
     Node: PropTypes__default["default"].func.isRequired
   }),
   itemToString: PropTypes__default["default"].func,
+  itemToKey: PropTypes__default["default"].func,
   stateReducer: PropTypes__default["default"].func
 };
 
@@ -2236,7 +2236,9 @@ function downshiftSelectReducer(state, action) {
       {
         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,
@@ -2438,12 +2440,13 @@ function useSelect(userProps) {
     }
     // 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 () {
@@ -2629,7 +2632,7 @@ function useSelect(userProps) {
       });
     };
     var toggleButtonHandleBlur = function toggleButtonHandleBlur() {
-      if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) {
+      if (latestState.isOpen && !mouseAndTouchTrackers.isMouseDown) {
         dispatch({
           type: ToggleButtonBlur
         });
@@ -2658,7 +2661,7 @@ function useSelect(userProps) {
     }
     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,
@@ -2684,7 +2687,7 @@ function useSelect(userProps) {
       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;
@@ -2718,7 +2721,7 @@ function useSelect(userProps) {
     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,
@@ -2838,13 +2841,21 @@ function useControlledReducer(reducer, props, createInitialState, isStateEqual)
     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
@@ -2861,9 +2872,6 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 var defaultProps$1 = _extends__default["default"]({}, defaultProps$3, {
-  selectedItemChanged: function selectedItemChanged(prevItem, item) {
-    return prevItem !== item;
-  },
   getA11yStatusMessage: getA11yStatusMessage$1,
   isItemDisabled: function isItemDisabled() {
     return false;
@@ -3074,13 +3082,14 @@ function useCombobox(userProps) {
       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 () {
@@ -3228,7 +3237,7 @@ function useCombobox(userProps) {
     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;
@@ -3256,7 +3265,7 @@ function useCombobox(userProps) {
       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,
@@ -3310,7 +3319,7 @@ function useCombobox(userProps) {
     };
     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,
@@ -3334,7 +3343,7 @@ function useCombobox(userProps) {
     return _extends__default["default"]((_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 () {
@@ -3507,6 +3516,7 @@ var propTypes = _extends__default["default"]({}, commonPropTypes, {
 });
 var defaultProps = {
   itemToString: defaultProps$3.itemToString,
+  itemToKey: defaultProps$3.itemToKey,
   stateReducer: defaultProps$3.stateReducer,
   environment: defaultProps$3.environment,
   getA11yRemovalMessage: getA11yRemovalMessage,
@@ -3621,7 +3631,9 @@ function downshiftMultipleSelectionReducer(state, action) {
     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;
         }
@@ -3705,8 +3717,10 @@ function useMultipleSelection(userProps) {
       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,