downshift 6.0.2 → 6.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "downshift",
-  "version": "6.0.2",
+  "version": "6.0.6",
   "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",
@@ -66,51 +66,47 @@
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.10.2",
+    "@babel/runtime": "^7.11.2",
     "compute-scroll-into-view": "^1.0.14",
     "prop-types": "^15.7.2",
     "react-is": "^16.13.1"
   },
   "devDependencies": {
-    "@babel/helpers": "^7.10.1",
-    "@material-ui/core": "^4.10.2",
-    "@material-ui/icons": "^4.9.1",
-    "@rollup/plugin-commonjs": "^13.0.0",
+    "@babel/helpers": "^7.10.4",
+    "@rollup/plugin-commonjs": "^14.0.0",
     "@testing-library/cypress": "^6.0.0",
-    "@testing-library/dom": "^7.16.1",
-    "@testing-library/jest-dom": "^5.10.1",
-    "@testing-library/preact": "^1.0.2",
-    "@testing-library/react": "^10.2.1",
-    "@testing-library/react-hooks": "^3.3.0",
-    "@testing-library/user-event": "^11.4.2",
-    "@types/jest": "^26.0.0",
-    "@types/react": "^16.9.36",
+    "@testing-library/dom": "^7.22.1",
+    "@testing-library/jest-dom": "^5.11.2",
+    "@testing-library/preact": "^2.0.0",
+    "@testing-library/react": "^10.4.8",
+    "@testing-library/react-hooks": "^3.4.1",
+    "@testing-library/user-event": "^12.1.1",
+    "@types/jest": "^26.0.9",
+    "@types/react": "^16.9.46",
     "babel-plugin-macros": "^2.8.0",
     "babel-plugin-no-side-effect-class-properties": "0.0.7",
     "babel-preset-react-native": "^4.0.1",
     "buble": "^0.20.0",
     "cpy-cli": "^3.1.1",
     "cross-env": "^7.0.2",
-    "cypress": "^4.8.0",
+    "cypress": "^4.12.1",
     "docz": "^2.3.1",
     "docz-theme-default": "^1.2.0",
     "eslint-plugin-cypress": "^2.11.1",
-    "eslint-plugin-react": "7.20.0",
-    "flow-bin": "^0.127.0",
+    "eslint-plugin-react": "7.20.5",
+    "flow-bin": "^0.131.0",
     "flow-coverage-report": "^0.7.0",
-    "kcd-scripts": "^6.2.3",
+    "kcd-scripts": "^6.2.4",
     "npm-run-all": "^4.1.5",
-    "preact": "^10.4.4",
+    "preact": "^10.4.7",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-frame-component": "^4.1.2",
-    "react-native": "^0.62.2",
+    "react-native": "^0.63.2",
     "react-test-renderer": "^16.13.1",
-    "react-virtual": "^2.2.0",
     "rollup-plugin-babel": "^4.4.0",
     "serve": "^11.3.2",
-    "start-server-and-test": "^1.11.0",
-    "typescript": "^3.9.5"
+    "start-server-and-test": "^1.11.3",
+    "typescript": "^3.9.7"
   },
   "eslintConfig": {
     "extends": "./node_modules/kcd-scripts/eslint.js",
@@ -125,11 +121,22 @@
       "react/prop-types": "off",
       "jsx-a11y/label-has-for": "off",
       "jsx-a11y/label-has-associated-control": "off",
+      "jsx-a11y/autocomplete-valid": "off",
       "complexity": [
         "error",
         12
       ]
-    }
+    },
+    "overrides": [
+      {
+        "files": [
+          "cypress/**/*.js"
+        ],
+        "rules": {
+          "testing-library/prefer-screen-queries": "off"
+        }
+      }
+    ]
   },
   "eslintIgnore": [
     "node_modules",
@@ -145,7 +152,7 @@
   "bugs": {
     "url": "https://github.com/downshift-js/downshift/issues"
   },
-  "homepage": "https://github.com/downshift-js/downshift#readme",
+  "homepage": "https://downshift-js.com",
   "flow-coverage-report": {
     "includeGlob": [
       "test/**/*.js"

package/preact/dist/downshift.cjs.js

@@ -2046,6 +2046,69 @@ function useGetterPropsCalledChecker() {
   }, []);
   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(_ref2, ["isInitialMount", "previousResultCount", "highlightedIndex", "items", "environment"]);
+
+  // Sets a11y status message on changes in state.
+  preact.useEffect(function () {
+    if (isInitialMount) {
+      return;
+    }
+
+    updateA11yStatus(function () {
+      return getA11yMessage(_extends({
+        highlightedIndex: highlightedIndex,
+        highlightedItem: items[highlightedIndex],
+        resultCount: items.length,
+        previousResultCount: previousResultCount
+      }, rest));
+    }, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, dependencyArray);
+}
+function useScrollIntoView(_ref3) {
+  var highlightedIndex = _ref3.highlightedIndex,
+      isOpen = _ref3.isOpen,
+      itemRefs = _ref3.itemRefs,
+      getItemNodeFromIndex = _ref3.getItemNodeFromIndex,
+      menuElement = _ref3.menuElement,
+      scrollIntoViewProp = _ref3.scrollIntoView;
+  // used not to scroll on highlight by mouse.
+  var shouldScrollRef = preact.useRef(true); // Scroll on highlighted item if change comes from keyboard.
+
+  preact.useEffect(function () {
+    if (highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length) {
+      return;
+    }
+
+    if (shouldScrollRef.current === false) {
+      shouldScrollRef.current = true;
+    } else {
+      scrollIntoViewProp(getItemNodeFromIndex(highlightedIndex), menuElement);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [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 = preact.useRef(props);
+  preact.useEffect(function () {
+    if (isInitialMount) {
+      return;
+    }
+
+    validateControlledUnchanged(state, prevPropsRef.current, props);
+    prevPropsRef.current = props;
+  }, [state, props, isInitialMount]);
+}
 
 function getItemIndexByCharacterKey(keysSoFar, highlightedIndex, items, itemToStringParam, getItemNodeFromIndex) {
   var lowerCasedItemStrings = items.map(function (item) {
@@ -2412,9 +2475,7 @@ function useSelect(userProps) {
   var toggleButtonRef = preact.useRef(null);
   var menuRef = preact.useRef(null);
   var itemRefs = preact.useRef();
-  itemRefs.current = {}; // used not to scroll when highlight by mouse.
-
-  var shouldScrollRef = preact.useRef(true); // used not to trigger menu blur action in some scenarios.
+  itemRefs.current = {}; // used not to trigger menu blur action in some scenarios.
 
   var shouldBlurRef = preact.useRef(true); // used to keep the inputValue clearTimeout object between renders.
 
@@ -2423,9 +2484,7 @@ function useSelect(userProps) {
   var elementIdsRef = preact.useRef(getElementIds(props)); // used to keep track of how many items we had on previous cycle.
 
   var previousResultCountRef = preact.useRef();
-  var isInitialMountRef = preact.useRef(true); // used for checking when props are moving from controlled to uncontrolled.
-
-  var prevPropsRef = preact.useRef(props); // utility callback to get item element.
+  var isInitialMountRef = preact.useRef(true); // utility callback to get item element.
 
   var latest = useLatestRef({
     state: state,
@@ -2438,45 +2497,30 @@ function useSelect(userProps) {
   // Sets a11y status message on changes in state.
 
 
-  preact.useEffect(function () {
-    if (isInitialMountRef.current) {
-      return;
-    }
-
-    var previousResultCount = previousResultCountRef.current;
-    updateA11yStatus(function () {
-      return getA11yStatusMessage({
-        isOpen: isOpen,
-        highlightedIndex: highlightedIndex,
-        selectedItem: selectedItem,
-        inputValue: inputValue,
-        highlightedItem: items[highlightedIndex],
-        resultCount: items.length,
-        itemToString: itemToString,
-        previousResultCount: previousResultCount
-      });
-    }, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen, highlightedIndex, inputValue, items]); // Sets a11y status message on changes in selectedItem.
-
-  preact.useEffect(function () {
-    if (isInitialMountRef.current) {
-      return;
-    }
-
-    var previousResultCount = previousResultCountRef.current;
-    updateA11yStatus(function () {
-      return getA11ySelectionMessage({
-        isOpen: isOpen,
-        highlightedIndex: highlightedIndex,
-        selectedItem: selectedItem,
-        inputValue: inputValue,
-        highlightedItem: items[highlightedIndex],
-        resultCount: items.length,
-        itemToString: itemToString,
-        previousResultCount: previousResultCount
-      });
-    }, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedItem]); // Sets cleanup for the keysSoFar after 500ms.
+  useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends({
+    isInitialMount: isInitialMountRef.current,
+    previousResultCount: previousResultCountRef.current,
+    items: items,
+    environment: environment,
+    itemToString: itemToString
+  }, state)); // Sets a11y status message on changes in selectedItem.
+
+  useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends({
+    isInitialMount: isInitialMountRef.current,
+    previousResultCount: previousResultCountRef.current,
+    items: items,
+    environment: environment,
+    itemToString: itemToString
+  }, state)); // Scroll on highlighted item if change comes from keyboard.
+
+  var shouldScrollRef = useScrollIntoView({
+    menuElement: menuRef.current,
+    highlightedIndex: highlightedIndex,
+    isOpen: isOpen,
+    itemRefs: itemRefs,
+    scrollIntoView: scrollIntoView,
+    getItemNodeFromIndex: getItemNodeFromIndex
+  }); // Sets cleanup for the keysSoFar after 500ms.
 
   preact.useEffect(function () {
     // init the clean function here as we need access to dispatch.
@@ -2493,8 +2537,13 @@ function useSelect(userProps) {
       return;
     }
 
-    clearTimeoutRef.current(dispatch); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [inputValue]);
+    clearTimeoutRef.current(dispatch);
+  }, [dispatch, inputValue]);
+  useControlPropsValidator({
+    isInitialMount: isInitialMountRef.current,
+    props: props,
+    state: state
+  });
   /* Controls the focus on the menu or the toggle button. */
 
   preact.useEffect(function () {
@@ -2527,35 +2576,14 @@ function useSelect(userProps) {
       }
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [isOpen]); // Scroll on highlighted item if change comes from keyboard.
-
-  preact.useEffect(function () {
-    if (highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length) {
-      return;
-    }
-
-    if (shouldScrollRef.current === false) {
-      shouldScrollRef.current = true;
-    } else {
-      scrollIntoView(getItemNodeFromIndex(highlightedIndex), menuRef.current);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [highlightedIndex]);
+  }, [isOpen]);
   preact.useEffect(function () {
     if (isInitialMountRef.current) {
       return;
     }
 
     previousResultCountRef.current = items.length;
-  });
-  preact.useEffect(function () {
-    if (isInitialMountRef.current) {
-      return;
-    }
-
-    validateControlledUnchanged(state, prevPropsRef.current, props);
-    prevPropsRef.current = props;
-  }, [state, props]); // Add mouse/touch events to document.
+  }); // Add mouse/touch events to document.
 
   var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, function () {
     dispatch({
@@ -2849,7 +2877,7 @@ function useSelect(userProps) {
     }
 
     return itemProps;
-  }, [dispatch, latest]);
+  }, [dispatch, latest, shouldScrollRef]);
   return {
     // prop getters.
     getToggleButtonProps: getToggleButtonProps,
@@ -3075,7 +3103,7 @@ function downshiftUseComboboxReducer(state, action) {
       break;
 
     case InputKeyDownEnter:
-      changes = _extends({}, state.highlightedIndex >= 0 && {
+      changes = _extends({}, state.isOpen && state.highlightedIndex >= 0 && {
         selectedItem: props.items[state.highlightedIndex],
         isOpen: getDefaultValue(props, 'isOpen'),
         highlightedIndex: getDefaultValue(props, 'highlightedIndex'),
@@ -3094,25 +3122,28 @@ function downshiftUseComboboxReducer(state, action) {
       break;
 
     case InputKeyDownHome:
-      changes = {
+      changes = _extends({}, state.isOpen && {
         highlightedIndex: getNextNonDisabledIndex(1, 0, props.items.length, action.getItemNodeFromIndex, false)
-      };
+      });
       break;
 
     case InputKeyDownEnd:
-      changes = {
+      changes = _extends({}, state.isOpen && {
         highlightedIndex: getNextNonDisabledIndex(-1, props.items.length - 1, props.items.length, action.getItemNodeFromIndex, false)
-      };
+      });
       break;
 
     case InputBlur:
-      changes = _extends({
-        isOpen: false,
-        highlightedIndex: -1
-      }, state.highlightedIndex >= 0 && action.selectItem && {
-        selectedItem: props.items[state.highlightedIndex],
-        inputValue: props.itemToString(props.items[state.highlightedIndex])
-      });
+      if (state.isOpen) {
+        changes = _extends({
+          isOpen: false,
+          highlightedIndex: -1
+        }, state.highlightedIndex >= 0 && action.selectItem && {
+          selectedItem: props.items[state.highlightedIndex],
+          inputValue: props.itemToString(props.items[state.highlightedIndex])
+        });
+      }
+
       break;
 
     case InputChange:
@@ -3230,16 +3261,12 @@ function useCombobox(userProps) {
   var inputRef = preact.useRef(null);
   var toggleButtonRef = preact.useRef(null);
   var comboboxRef = preact.useRef(null);
-  itemRefs.current = {}; // used not to scroll on highlight by mouse.
-
-  var shouldScrollRef = preact.useRef(true);
+  itemRefs.current = {};
   var isInitialMountRef = preact.useRef(true); // prevent id re-generation between renders.
 
   var elementIdsRef = preact.useRef(getElementIds$1(props)); // used to keep track of how many items we had on previous cycle.
 
-  var previousResultCountRef = preact.useRef(); // used for checking when props are moving from controlled to uncontrolled.
-
-  var prevPropsRef = preact.useRef(props); // utility callback to get item element.
+  var previousResultCountRef = preact.useRef(); // utility callback to get item element.
 
   var latest = useLatestRef({
     state: state,
@@ -3252,58 +3279,35 @@ function useCombobox(userProps) {
   // Sets a11y status message on changes in state.
 
 
-  preact.useEffect(function () {
-    if (isInitialMountRef.current) {
-      return;
-    }
-
-    var previousResultCount = previousResultCountRef.current;
-    updateA11yStatus(function () {
-      return getA11yStatusMessage({
-        isOpen: isOpen,
-        highlightedIndex: highlightedIndex,
-        selectedItem: selectedItem,
-        inputValue: inputValue,
-        highlightedItem: items[highlightedIndex],
-        resultCount: items.length,
-        itemToString: itemToString,
-        previousResultCount: previousResultCount
-      });
-    }, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen, highlightedIndex, inputValue, items]); // Sets a11y status message on changes in selectedItem.
-
-  preact.useEffect(function () {
-    if (isInitialMountRef.current) {
-      return;
-    }
-
-    var previousResultCount = previousResultCountRef.current;
-    updateA11yStatus(function () {
-      return getA11ySelectionMessage({
-        isOpen: isOpen,
-        highlightedIndex: highlightedIndex,
-        selectedItem: selectedItem,
-        inputValue: inputValue,
-        highlightedItem: items[highlightedIndex],
-        resultCount: items.length,
-        itemToString: itemToString,
-        previousResultCount: previousResultCount
-      });
-    }, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedItem]); // Scroll on highlighted item if change comes from keyboard.
-
-  preact.useEffect(function () {
-    if (highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length) {
-      return;
-    }
-
-    if (shouldScrollRef.current === false) {
-      shouldScrollRef.current = true;
-    } else {
-      scrollIntoView(getItemNodeFromIndex(highlightedIndex), menuRef.current);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [highlightedIndex]); // Controls the focus on the menu or the toggle button.
+  useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], _extends({
+    isInitialMount: isInitialMountRef.current,
+    previousResultCount: previousResultCountRef.current,
+    items: items,
+    environment: environment,
+    itemToString: itemToString
+  }, state)); // Sets a11y status message on changes in selectedItem.
+
+  useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], _extends({
+    isInitialMount: isInitialMountRef.current,
+    previousResultCount: previousResultCountRef.current,
+    items: items,
+    environment: environment,
+    itemToString: itemToString
+  }, state)); // Scroll on highlighted item if change comes from keyboard.
+
+  var shouldScrollRef = useScrollIntoView({
+    menuElement: menuRef.current,
+    highlightedIndex: highlightedIndex,
+    isOpen: isOpen,
+    itemRefs: itemRefs,
+    scrollIntoView: scrollIntoView,
+    getItemNodeFromIndex: getItemNodeFromIndex
+  });
+  useControlPropsValidator({
+    isInitialMount: isInitialMountRef.current,
+    props: props,
+    state: state
+  }); // Controls the focus on the input on open.
 
   preact.useEffect(function () {
     // Don't focus menu on first render.
@@ -3323,15 +3327,7 @@ function useCombobox(userProps) {
     }
 
     previousResultCountRef.current = items.length;
-  });
-  preact.useEffect(function () {
-    if (isInitialMountRef.current) {
-      return;
-    }
-
-    validateControlledUnchanged(state, prevPropsRef.current, props);
-    prevPropsRef.current = props;
-  }, [state, props]); // Add mouse/touch events to document.
+  }); // Add mouse/touch events to document.
 
   var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [comboboxRef, menuRef, toggleButtonRef], environment, function () {
     dispatch({
@@ -3391,13 +3387,14 @@ function useCombobox(userProps) {
 
         var latestState = latest.current.state;
 
-        if (latestState.isOpen && latestState.highlightedIndex > -1) {
+        if (latestState.isOpen) {
           event.preventDefault();
-          dispatch({
-            type: InputKeyDownEnter,
-            getItemNodeFromIndex: getItemNodeFromIndex
-          });
         }
+
+        dispatch({
+          type: InputKeyDownEnter,
+          getItemNodeFromIndex: getItemNodeFromIndex
+        });
       }
     };
   }, [dispatch, latest]); // Getter props.
@@ -3482,7 +3479,7 @@ function useCombobox(userProps) {
         inputRef.current.focus();
       }
     }), _ref4), rest);
-  }, [dispatch, latest]);
+  }, [dispatch, latest, shouldScrollRef]);
   var getToggleButtonProps = preact.useCallback(function (_temp4) {
     var _extends4;
 
@@ -3962,9 +3959,7 @@ function useMultipleSelection(userProps) {
   var dropdownRef = preact.useRef(null);
   var previousSelectedItemsRef = preact.useRef(selectedItems);
   var selectedItemRefs = preact.useRef();
-  selectedItemRefs.current = []; // used for checking when props are moving from controlled to uncontrolled.
-
-  var prevPropsRef = preact.useRef(props);
+  selectedItemRefs.current = [];
   var latest = useLatestRef({
     state: state,
     props: props
@@ -4004,14 +3999,11 @@ function useMultipleSelection(userProps) {
       selectedItemRefs.current[activeIndex].focus();
     }
   }, [activeIndex]);
-  preact.useEffect(function () {
-    if (isInitialMountRef.current) {
-      return;
-    }
-
-    validateControlledUnchanged(state, prevPropsRef.current, props);
-    prevPropsRef.current = props;
-  }, [state, props]);
+  useControlPropsValidator({
+    isInitialMount: isInitialMountRef.current,
+    props: props,
+    state: state
+  });
   var setGetterPropCallInfo = useGetterPropsCalledChecker('getDropdownProps'); // Make initial ref false.
 
   preact.useEffect(function () {