downshift 7.2.2-alpha.0 → 7.2.2

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# CHANGELOG
+
+The changelog is automatically updated using
+[semantic-release](https://github.com/semantic-release/semantic-release). You
+can see it on the [releases page](../../releases).

package/README.md

@@ -57,7 +57,7 @@ has been around for a while. It established a successful pattern for making
 components accessible and functional while giving developers complete freedom
 when building the UI.
 
-Both _useSelect_ and _useCombobox_ support he latest ARIA combobox patterns for
+Both _useSelect_ and _useCombobox_ support the latest ARIA combobox patterns for
 W3C, which _Downshift_ does not. Consequently, we strongly recommend the you use
 the hooks. The hooks have been migrated to the ARIA 1.2 combobox pattern in the
 version 7 of _downshift_. There is a [Migration Guide][migration-guide-v7] that

package/dist/downshift.cjs.js

@@ -510,9 +510,18 @@ var Downshift = /*#__PURE__*/function () {
       };
       _this.input = null;
       _this.items = [];
+      // itemCount can be changed asynchronously
+      // from within downshift (so it can't come from a prop)
+      // this is why we store it as an instance and use
+      // getItemCount rather than just use items.length
+      // (to support windowing + async)
       _this.itemCount = null;
       _this.previousResultCount = 0;
       _this.timeoutIds = [];
+      /**
+       * @param {Function} fn the function to call after the time
+       * @param {Number} time the time to wait
+       */
       _this.internalSetTimeout = function (fn, time) {
         var id = setTimeout(function () {
           _this.timeoutIds = _this.timeoutIds.filter(function (i) {
@@ -567,6 +576,14 @@ var Downshift = /*#__PURE__*/function () {
       _this.selectHighlightedItem = function (otherStateToSet, cb) {
         return _this.selectItemAtIndex(_this.getState().highlightedIndex, otherStateToSet, cb);
       };
+      // any piece of our state can live in two places:
+      // 1. Uncontrolled: it's internal (this.state)
+      //    We will call this.setState to update that state
+      // 2. Controlled: it's external (this.props)
+      //    We will call this.props.onStateChange to update that state
+      //
+      // In addition, we'll call this.props.onChange if the
+      // selectedItem is changed.
       _this.internalSetState = function (stateToSet, cb) {
         var isItemSelected, onChangeArg;
         var onStateChangeArg = {};
@@ -649,6 +666,7 @@ var Downshift = /*#__PURE__*/function () {
           _this.props.onUserAction(onStateChangeArg, _this.getStateAndHelpers());
         });
       };
+      //////////////////////////// ROOT
       _this.rootRef = function (node) {
         return _this._rootNode = node;
       };
@@ -671,6 +689,7 @@ var Downshift = /*#__PURE__*/function () {
           isOpen = _this$getState.isOpen;
         return _extends__default["default"]((_extends2 = {}, _extends2[refKey] = handleRefs(ref, _this.rootRef), _extends2.role = 'combobox', _extends2['aria-expanded'] = isOpen, _extends2['aria-haspopup'] = 'listbox', _extends2['aria-owns'] = isOpen ? _this.menuId : null, _extends2['aria-labelledby'] = _this.labelId, _extends2), rest);
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\ ROOT
       _this.keyDownHandlers = {
         ArrowDown: function ArrowDown(event) {
           var _this2 = this;
@@ -755,6 +774,7 @@ var Downshift = /*#__PURE__*/function () {
           }));
         }
       };
+      //////////////////////////// BUTTON
       _this.buttonKeyDownHandlers = _extends__default["default"]({}, _this.keyDownHandlers, {
         ' ': function _(event) {
           event.preventDefault();
@@ -878,12 +898,16 @@ var Downshift = /*#__PURE__*/function () {
           }
         });
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ BUTTON
+      /////////////////////////////// LABEL
       _this.getLabelProps = function (props) {
         return _extends__default["default"]({
           htmlFor: _this.inputId,
           id: _this.labelId
         }, props);
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ LABEL
+      /////////////////////////////// INPUT
       _this.getInputProps = function (_temp4) {
         var _ref4 = _temp4 === void 0 ? {} : _temp4,
           onKeyDown = _ref4.onKeyDown,
@@ -944,6 +968,8 @@ var Downshift = /*#__PURE__*/function () {
           }
         });
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ INPUT
+      /////////////////////////////// MENU
       _this.menuRef = function (node) {
         _this._menuNode = node;
       };
@@ -962,6 +988,8 @@ var Downshift = /*#__PURE__*/function () {
         _this.getMenuProps.suppressRefError = suppressRefError;
         return _extends__default["default"]((_extends3 = {}, _extends3[refKey] = handleRefs(ref, _this.menuRef), _extends3.role = 'listbox', _extends3['aria-labelledby'] = props && props['aria-label'] ? null : _this.labelId, _extends3.id = _this.menuId, _extends3), props);
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ MENU
+      /////////////////////////////// ITEM
       _this.getItemProps = function (_temp7) {
         var _enabledEventHandlers;
         var _ref7 = _temp7 === void 0 ? {} : _temp7,
@@ -1025,6 +1053,7 @@ var Downshift = /*#__PURE__*/function () {
           'aria-selected': _this.getState().highlightedIndex === index
         }, eventHandlers, rest);
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ITEM
       _this.clearItems = function () {
         _this.items = [];
       };
@@ -1232,10 +1261,7 @@ var Downshift = /*#__PURE__*/function () {
         isOpen: isOpen,
         selectedItem: selectedItem
       };
-    }
-
-    //////////////////////////// ROOT
-    ;
+    };
     _proto.componentDidMount = function componentDidMount() {
       var _this7 = this;
       /* istanbul ignore if (react-native) */
@@ -1747,8 +1773,11 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
     isTouchMove: false
   });
   react.useEffect(function () {
+    if ((environment == null ? void 0 : environment.addEventListener) == null) {
+      return;
+    }
 
-    // The same strategy for checking if a click occurred inside or outside downsift
+    // The same strategy for checking if a click occurred inside or outside downshift
     // as in downshift.js.
     var onMouseDown = function onMouseDown() {
       mouseAndTouchTrackersRef.current.isMouseDown = true;
@@ -2216,8 +2245,8 @@ function downshiftSelectReducer(state, action) {
 /* eslint-enable complexity */
 
 var _excluded$2 = ["onMouseLeave", "refKey", "onKeyDown", "onBlur", "ref"],
-  _excluded2$2 = ["onBlur", "onClick", "onPress", "onKeyDown", "refKey", "ref"],
-  _excluded3$1 = ["item", "index", "onMouseMove", "onClick", "onPress", "refKey", "ref", "disabled"];
+  _excluded2$2 = ["onBlur", "onClick", "onKeyDown", "refKey", "ref"],
+  _excluded3$1 = ["item", "index", "onMouseMove", "onClick", "refKey", "ref", "disabled"];
 useSelect.stateChangeTypes = stateChangeTypes$2;
 function useSelect(userProps) {
   if (userProps === void 0) {
@@ -2507,9 +2536,8 @@ function useSelect(userProps) {
     var _extends3;
     var _ref3 = _temp3 === void 0 ? {} : _temp3,
       onBlur = _ref3.onBlur,
-      onClick = _ref3.onClick;
-      _ref3.onPress;
-      var onKeyDown = _ref3.onKeyDown,
+      onClick = _ref3.onClick,
+      onKeyDown = _ref3.onKeyDown,
       _ref3$refKey = _ref3.refKey,
       refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
       ref = _ref3.ref,
@@ -2546,11 +2574,8 @@ function useSelect(userProps) {
       toggleButtonRef.current = toggleButtonNode;
     }), _extends3['aria-activedescendant'] = latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : '', _extends3['aria-controls'] = elementIds.menuId, _extends3['aria-expanded'] = latest.current.state.isOpen, _extends3['aria-haspopup'] = 'listbox', _extends3['aria-labelledby'] = "" + elementIds.labelId, _extends3.id = elementIds.toggleButtonId, _extends3.role = 'combobox', _extends3.tabIndex = 0, _extends3.onBlur = callAllEventHandlers(onBlur, toggleButtonHandleBlur), _extends3), rest);
     if (!rest.disabled) {
-      /* istanbul ignore if (react-native) */
-      {
-        toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick);
-        toggleProps.onKeyDown = callAllEventHandlers(onKeyDown, toggleButtonHandleKeyDown);
-      }
+      toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick);
+      toggleProps.onKeyDown = callAllEventHandlers(onKeyDown, toggleButtonHandleKeyDown);
     }
     setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
     return toggleProps;
@@ -2561,9 +2586,8 @@ function useSelect(userProps) {
       itemProp = _ref5.item,
       indexProp = _ref5.index,
       onMouseMove = _ref5.onMouseMove,
-      onClick = _ref5.onClick;
-      _ref5.onPress;
-      var _ref5$refKey = _ref5.refKey,
+      onClick = _ref5.onClick,
+      _ref5$refKey = _ref5.refKey,
       refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
       ref = _ref5.ref,
       disabled = _ref5.disabled,
@@ -2605,10 +2629,7 @@ function useSelect(userProps) {
       }
     }), _extends4), rest);
     if (!disabled) {
-      /* istanbul ignore next (react-native) */
-      {
-        itemProps.onClick = callAllEventHandlers(onClick, itemHandleClick);
-      }
+      itemProps.onClick = callAllEventHandlers(onClick, itemHandleClick);
     }
     itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
     return itemProps;
@@ -3020,13 +3041,14 @@ function useCombobox(userProps) {
   }, []);
   // Reset itemRefs on close.
   react.useEffect(function () {
+    var _environment$document;
     if (!isOpen) {
       itemRefs.current = {};
-    } else if (document.activeElement !== inputRef.current) {
+    } else if (((_environment$document = environment.document) == null ? void 0 : _environment$document.activeElement) !== inputRef.current) {
       var _inputRef$current;
       inputRef == null ? void 0 : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
     }
-  }, [isOpen]);
+  }, [isOpen, environment]);
 
   /* Event handler functions */
   var inputKeyDownHandlers = react.useMemo(function () {

package/dist/downshift.esm.js

@@ -497,9 +497,18 @@ var Downshift = /*#__PURE__*/function () {
       };
       _this.input = null;
       _this.items = [];
+      // itemCount can be changed asynchronously
+      // from within downshift (so it can't come from a prop)
+      // this is why we store it as an instance and use
+      // getItemCount rather than just use items.length
+      // (to support windowing + async)
       _this.itemCount = null;
       _this.previousResultCount = 0;
       _this.timeoutIds = [];
+      /**
+       * @param {Function} fn the function to call after the time
+       * @param {Number} time the time to wait
+       */
       _this.internalSetTimeout = function (fn, time) {
         var id = setTimeout(function () {
           _this.timeoutIds = _this.timeoutIds.filter(function (i) {
@@ -554,6 +563,14 @@ var Downshift = /*#__PURE__*/function () {
       _this.selectHighlightedItem = function (otherStateToSet, cb) {
         return _this.selectItemAtIndex(_this.getState().highlightedIndex, otherStateToSet, cb);
       };
+      // any piece of our state can live in two places:
+      // 1. Uncontrolled: it's internal (this.state)
+      //    We will call this.setState to update that state
+      // 2. Controlled: it's external (this.props)
+      //    We will call this.props.onStateChange to update that state
+      //
+      // In addition, we'll call this.props.onChange if the
+      // selectedItem is changed.
       _this.internalSetState = function (stateToSet, cb) {
         var isItemSelected, onChangeArg;
         var onStateChangeArg = {};
@@ -636,6 +653,7 @@ var Downshift = /*#__PURE__*/function () {
           _this.props.onUserAction(onStateChangeArg, _this.getStateAndHelpers());
         });
       };
+      //////////////////////////// ROOT
       _this.rootRef = function (node) {
         return _this._rootNode = node;
       };
@@ -658,6 +676,7 @@ var Downshift = /*#__PURE__*/function () {
           isOpen = _this$getState.isOpen;
         return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, _this.rootRef), _extends2.role = 'combobox', _extends2['aria-expanded'] = isOpen, _extends2['aria-haspopup'] = 'listbox', _extends2['aria-owns'] = isOpen ? _this.menuId : null, _extends2['aria-labelledby'] = _this.labelId, _extends2), rest);
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\ ROOT
       _this.keyDownHandlers = {
         ArrowDown: function ArrowDown(event) {
           var _this2 = this;
@@ -742,6 +761,7 @@ var Downshift = /*#__PURE__*/function () {
           }));
         }
       };
+      //////////////////////////// BUTTON
       _this.buttonKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
         ' ': function _(event) {
           event.preventDefault();
@@ -865,12 +885,16 @@ var Downshift = /*#__PURE__*/function () {
           }
         });
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ BUTTON
+      /////////////////////////////// LABEL
       _this.getLabelProps = function (props) {
         return _extends({
           htmlFor: _this.inputId,
           id: _this.labelId
         }, props);
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ LABEL
+      /////////////////////////////// INPUT
       _this.getInputProps = function (_temp4) {
         var _ref4 = _temp4 === void 0 ? {} : _temp4,
           onKeyDown = _ref4.onKeyDown,
@@ -931,6 +955,8 @@ var Downshift = /*#__PURE__*/function () {
           }
         });
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ INPUT
+      /////////////////////////////// MENU
       _this.menuRef = function (node) {
         _this._menuNode = node;
       };
@@ -949,6 +975,8 @@ var Downshift = /*#__PURE__*/function () {
         _this.getMenuProps.suppressRefError = suppressRefError;
         return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, _this.menuRef), _extends3.role = 'listbox', _extends3['aria-labelledby'] = props && props['aria-label'] ? null : _this.labelId, _extends3.id = _this.menuId, _extends3), props);
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ MENU
+      /////////////////////////////// ITEM
       _this.getItemProps = function (_temp7) {
         var _enabledEventHandlers;
         var _ref7 = _temp7 === void 0 ? {} : _temp7,
@@ -1012,6 +1040,7 @@ var Downshift = /*#__PURE__*/function () {
           'aria-selected': _this.getState().highlightedIndex === index
         }, eventHandlers, rest);
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ITEM
       _this.clearItems = function () {
         _this.items = [];
       };
@@ -1219,10 +1248,7 @@ var Downshift = /*#__PURE__*/function () {
         isOpen: isOpen,
         selectedItem: selectedItem
       };
-    }
-
-    //////////////////////////// ROOT
-    ;
+    };
     _proto.componentDidMount = function componentDidMount() {
       var _this7 = this;
       /* istanbul ignore if (react-native) */
@@ -1734,8 +1760,11 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
     isTouchMove: false
   });
   useEffect(function () {
+    if ((environment == null ? void 0 : environment.addEventListener) == null) {
+      return;
+    }
 
-    // The same strategy for checking if a click occurred inside or outside downsift
+    // The same strategy for checking if a click occurred inside or outside downshift
     // as in downshift.js.
     var onMouseDown = function onMouseDown() {
       mouseAndTouchTrackersRef.current.isMouseDown = true;
@@ -2203,8 +2232,8 @@ function downshiftSelectReducer(state, action) {
 /* eslint-enable complexity */
 
 var _excluded$2 = ["onMouseLeave", "refKey", "onKeyDown", "onBlur", "ref"],
-  _excluded2$2 = ["onBlur", "onClick", "onPress", "onKeyDown", "refKey", "ref"],
-  _excluded3$1 = ["item", "index", "onMouseMove", "onClick", "onPress", "refKey", "ref", "disabled"];
+  _excluded2$2 = ["onBlur", "onClick", "onKeyDown", "refKey", "ref"],
+  _excluded3$1 = ["item", "index", "onMouseMove", "onClick", "refKey", "ref", "disabled"];
 useSelect.stateChangeTypes = stateChangeTypes$2;
 function useSelect(userProps) {
   if (userProps === void 0) {
@@ -2494,9 +2523,8 @@ function useSelect(userProps) {
     var _extends3;
     var _ref3 = _temp3 === void 0 ? {} : _temp3,
       onBlur = _ref3.onBlur,
-      onClick = _ref3.onClick;
-      _ref3.onPress;
-      var onKeyDown = _ref3.onKeyDown,
+      onClick = _ref3.onClick,
+      onKeyDown = _ref3.onKeyDown,
       _ref3$refKey = _ref3.refKey,
       refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey,
       ref = _ref3.ref,
@@ -2533,11 +2561,8 @@ function useSelect(userProps) {
       toggleButtonRef.current = toggleButtonNode;
     }), _extends3['aria-activedescendant'] = latestState.isOpen && latestState.highlightedIndex > -1 ? elementIds.getItemId(latestState.highlightedIndex) : '', _extends3['aria-controls'] = elementIds.menuId, _extends3['aria-expanded'] = latest.current.state.isOpen, _extends3['aria-haspopup'] = 'listbox', _extends3['aria-labelledby'] = "" + elementIds.labelId, _extends3.id = elementIds.toggleButtonId, _extends3.role = 'combobox', _extends3.tabIndex = 0, _extends3.onBlur = callAllEventHandlers(onBlur, toggleButtonHandleBlur), _extends3), rest);
     if (!rest.disabled) {
-      /* istanbul ignore if (react-native) */
-      {
-        toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick);
-        toggleProps.onKeyDown = callAllEventHandlers(onKeyDown, toggleButtonHandleKeyDown);
-      }
+      toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick);
+      toggleProps.onKeyDown = callAllEventHandlers(onKeyDown, toggleButtonHandleKeyDown);
     }
     setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef);
     return toggleProps;
@@ -2548,9 +2573,8 @@ function useSelect(userProps) {
       itemProp = _ref5.item,
       indexProp = _ref5.index,
       onMouseMove = _ref5.onMouseMove,
-      onClick = _ref5.onClick;
-      _ref5.onPress;
-      var _ref5$refKey = _ref5.refKey,
+      onClick = _ref5.onClick,
+      _ref5$refKey = _ref5.refKey,
       refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey,
       ref = _ref5.ref,
       disabled = _ref5.disabled,
@@ -2592,10 +2616,7 @@ function useSelect(userProps) {
       }
     }), _extends4), rest);
     if (!disabled) {
-      /* istanbul ignore next (react-native) */
-      {
-        itemProps.onClick = callAllEventHandlers(onClick, itemHandleClick);
-      }
+      itemProps.onClick = callAllEventHandlers(onClick, itemHandleClick);
     }
     itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove);
     return itemProps;
@@ -3007,13 +3028,14 @@ function useCombobox(userProps) {
   }, []);
   // Reset itemRefs on close.
   useEffect(function () {
+    var _environment$document;
     if (!isOpen) {
       itemRefs.current = {};
-    } else if (document.activeElement !== inputRef.current) {
+    } else if (((_environment$document = environment.document) == null ? void 0 : _environment$document.activeElement) !== inputRef.current) {
       var _inputRef$current;
       inputRef == null ? void 0 : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
     }
-  }, [isOpen]);
+  }, [isOpen, environment]);
 
   /* Event handler functions */
   var inputKeyDownHandlers = useMemo(function () {