downshift 7.2.2-alpha.0 → 7.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "downshift",
-  "version": "7.2.2-alpha.0",
+  "version": "7.3.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

@@ -517,9 +517,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) {
@@ -574,6 +583,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 = {};
@@ -656,6 +673,7 @@ var Downshift = /*#__PURE__*/function () {
           _this.props.onUserAction(onStateChangeArg, _this.getStateAndHelpers());
         });
       };
+      //////////////////////////// ROOT
       _this.rootRef = function (node) {
         return _this._rootNode = node;
       };
@@ -678,6 +696,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;
@@ -762,6 +781,7 @@ var Downshift = /*#__PURE__*/function () {
           }));
         }
       };
+      //////////////////////////// BUTTON
       _this.buttonKeyDownHandlers = _extends__default["default"]({}, _this.keyDownHandlers, {
         ' ': function _(event) {
           event.preventDefault();
@@ -885,12 +905,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,
@@ -951,6 +975,8 @@ var Downshift = /*#__PURE__*/function () {
           }
         });
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ INPUT
+      /////////////////////////////// MENU
       _this.menuRef = function (node) {
         _this._menuNode = node;
       };
@@ -969,6 +995,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,
@@ -1032,6 +1060,7 @@ var Downshift = /*#__PURE__*/function () {
           'aria-selected': _this.getState().highlightedIndex === index
         }, eventHandlers, rest);
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ITEM
       _this.clearItems = function () {
         _this.items = [];
       };
@@ -1239,10 +1268,7 @@ var Downshift = /*#__PURE__*/function () {
         isOpen: isOpen,
         selectedItem: selectedItem
       };
-    }
-
-    //////////////////////////// ROOT
-    ;
+    };
     _proto.componentDidMount = function componentDidMount() {
       var _this7 = this;
       /* istanbul ignore if (react-native) */
@@ -1710,8 +1736,11 @@ function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, hand
     isTouchMove: false
   });
   preact.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;
@@ -2983,13 +3012,14 @@ function useCombobox(userProps) {
   }, []);
   // Reset itemRefs on close.
   preact.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 = preact.useMemo(function () {

package/preact/dist/downshift.esm.js

@@ -504,9 +504,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) {
@@ -561,6 +570,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 = {};
@@ -643,6 +660,7 @@ var Downshift = /*#__PURE__*/function () {
           _this.props.onUserAction(onStateChangeArg, _this.getStateAndHelpers());
         });
       };
+      //////////////////////////// ROOT
       _this.rootRef = function (node) {
         return _this._rootNode = node;
       };
@@ -665,6 +683,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;
@@ -749,6 +768,7 @@ var Downshift = /*#__PURE__*/function () {
           }));
         }
       };
+      //////////////////////////// BUTTON
       _this.buttonKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
         ' ': function _(event) {
           event.preventDefault();
@@ -872,12 +892,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,
@@ -938,6 +962,8 @@ var Downshift = /*#__PURE__*/function () {
           }
         });
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ INPUT
+      /////////////////////////////// MENU
       _this.menuRef = function (node) {
         _this._menuNode = node;
       };
@@ -956,6 +982,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,
@@ -1019,6 +1047,7 @@ var Downshift = /*#__PURE__*/function () {
           'aria-selected': _this.getState().highlightedIndex === index
         }, eventHandlers, rest);
       };
+      //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ITEM
       _this.clearItems = function () {
         _this.items = [];
       };
@@ -1226,10 +1255,7 @@ var Downshift = /*#__PURE__*/function () {
         isOpen: isOpen,
         selectedItem: selectedItem
       };
-    }
-
-    //////////////////////////// ROOT
-    ;
+    };
     _proto.componentDidMount = function componentDidMount() {
       var _this7 = this;
       /* istanbul ignore if (react-native) */
@@ -1697,8 +1723,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;
@@ -2970,13 +2999,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 () {

package/preact/dist/downshift.umd.js

@@ -794,9 +794,18 @@
         };
         _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) {
@@ -851,6 +860,14 @@
         _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 = {};
@@ -933,6 +950,7 @@
             _this.props.onUserAction(onStateChangeArg, _this.getStateAndHelpers());
           });
         };
+        //////////////////////////// ROOT
         _this.rootRef = function (node) {
           return _this._rootNode = node;
         };
@@ -955,6 +973,7 @@
             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;
@@ -1039,6 +1058,7 @@
             }));
           }
         };
+        //////////////////////////// BUTTON
         _this.buttonKeyDownHandlers = _extends({}, _this.keyDownHandlers, {
           ' ': function _(event) {
             event.preventDefault();
@@ -1158,12 +1178,16 @@
             }
           });
         };
+        //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 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,
@@ -1224,6 +1248,8 @@
             }
           });
         };
+        //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ INPUT
+        /////////////////////////////// MENU
         _this.menuRef = function (node) {
           _this._menuNode = node;
         };
@@ -1242,6 +1268,8 @@
           _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,
@@ -1305,6 +1333,7 @@
             'aria-selected': _this.getState().highlightedIndex === index
           }, eventHandlers, rest);
         };
+        //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ITEM
         _this.clearItems = function () {
           _this.items = [];
         };
@@ -1512,10 +1541,7 @@
           isOpen: isOpen,
           selectedItem: selectedItem
         };
-      }
-
-      //////////////////////////// ROOT
-      ;
+      };
       _proto.componentDidMount = function componentDidMount() {
         var _this7 = this;
         /* istanbul ignore if (react-native) */
@@ -1980,8 +2006,11 @@
       isTouchMove: false
     });
     preact.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;
@@ -3279,13 +3308,14 @@
     }, []);
     // Reset itemRefs on close.
     preact.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 = preact.useMemo(function () {