downshift 7.0.4 → 7.1.0

package/dist/downshift.cjs.js

@@ -2002,12 +2002,11 @@ function getItemIndexByCharacterKey(_a) {
     var keysSoFar = _a.keysSoFar, highlightedIndex = _a.highlightedIndex, items = _a.items, itemToString = _a.itemToString, getItemNodeFromIndex = _a.getItemNodeFromIndex;
     var lowerCasedKeysSoFar = keysSoFar.toLowerCase();
     for (var index = 0; index < items.length; index++) {
-        var offsetIndex = (index + highlightedIndex + 1) % items.length;
+        // if we already have a search query in progress, we also consider the current highlighted item.
+        var offsetIndex = (index + highlightedIndex + (keysSoFar.length < 2 ? 1 : 0)) % items.length;
         var item = items[offsetIndex];
         if (item !== undefined &&
-            itemToString(item)
-                .toLowerCase()
-                .startsWith(lowerCasedKeysSoFar)) {
+            itemToString(item).toLowerCase().startsWith(lowerCasedKeysSoFar)) {
             var element = getItemNodeFromIndex(offsetIndex);
             if (!(element === null || element === void 0 ? void 0 : element.hasAttribute('disabled'))) {
                 return offsetIndex;
@@ -2376,6 +2375,9 @@ function useSelect(userProps) {
   // Make initial ref false.
   react.useEffect(() => {
     isInitialMountRef.current = false;
+    return () => {
+      isInitialMountRef.current = true;
+    };
   }, []);
   // Reset itemRefs on close.
   react.useEffect(() => {
@@ -2449,9 +2451,24 @@ function useSelect(userProps) {
     },
     ' '(event) {
       event.preventDefault();
-      dispatch({
-        type: latest.current.state.isOpen ? ToggleButtonKeyDownSpaceButton : ToggleButtonClick$1
-      });
+      const currentState = latest.current.state;
+      if (!currentState.isOpen) {
+        dispatch({
+          type: ToggleButtonClick$1
+        });
+        return;
+      }
+      if (currentState.inputValue) {
+        dispatch({
+          type: ToggleButtonKeyDownCharacter,
+          key: ' ',
+          getItemNodeFromIndex
+        });
+      } else {
+        dispatch({
+          type: ToggleButtonKeyDownSpaceButton
+        });
+      }
     }
   }), [dispatch, getItemNodeFromIndex, latest]);
 
@@ -3061,14 +3078,16 @@ function useCombobox(userProps) {
   // Make initial ref false.
   react.useEffect(() => {
     isInitialMountRef.current = false;
+    return () => {
+      isInitialMountRef.current = true;
+    };
   }, []);
   // Reset itemRefs on close.
   react.useEffect(() => {
     if (!isOpen) {
       itemRefs.current = {};
     } else if (document.activeElement !== inputRef.current) {
-      var _inputRef$current;
-      inputRef == null ? void 0 : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+      inputRef?.current?.focus();
     }
   }, [isOpen]);
 
@@ -3764,6 +3783,9 @@ function useMultipleSelection(userProps) {
   // Make initial ref false.
   react.useEffect(() => {
     isInitialMountRef.current = false;
+    return () => {
+      isInitialMountRef.current = true;
+    };
   }, []);
 
   // Event handler functions.

package/dist/downshift.esm.js

@@ -1993,12 +1993,11 @@ function getItemIndexByCharacterKey(_a) {
     var keysSoFar = _a.keysSoFar, highlightedIndex = _a.highlightedIndex, items = _a.items, itemToString = _a.itemToString, getItemNodeFromIndex = _a.getItemNodeFromIndex;
     var lowerCasedKeysSoFar = keysSoFar.toLowerCase();
     for (var index = 0; index < items.length; index++) {
-        var offsetIndex = (index + highlightedIndex + 1) % items.length;
+        // if we already have a search query in progress, we also consider the current highlighted item.
+        var offsetIndex = (index + highlightedIndex + (keysSoFar.length < 2 ? 1 : 0)) % items.length;
         var item = items[offsetIndex];
         if (item !== undefined &&
-            itemToString(item)
-                .toLowerCase()
-                .startsWith(lowerCasedKeysSoFar)) {
+            itemToString(item).toLowerCase().startsWith(lowerCasedKeysSoFar)) {
             var element = getItemNodeFromIndex(offsetIndex);
             if (!(element === null || element === void 0 ? void 0 : element.hasAttribute('disabled'))) {
                 return offsetIndex;
@@ -2367,6 +2366,9 @@ function useSelect(userProps) {
   // Make initial ref false.
   useEffect(() => {
     isInitialMountRef.current = false;
+    return () => {
+      isInitialMountRef.current = true;
+    };
   }, []);
   // Reset itemRefs on close.
   useEffect(() => {
@@ -2440,9 +2442,24 @@ function useSelect(userProps) {
     },
     ' '(event) {
       event.preventDefault();
-      dispatch({
-        type: latest.current.state.isOpen ? ToggleButtonKeyDownSpaceButton : ToggleButtonClick$1
-      });
+      const currentState = latest.current.state;
+      if (!currentState.isOpen) {
+        dispatch({
+          type: ToggleButtonClick$1
+        });
+        return;
+      }
+      if (currentState.inputValue) {
+        dispatch({
+          type: ToggleButtonKeyDownCharacter,
+          key: ' ',
+          getItemNodeFromIndex
+        });
+      } else {
+        dispatch({
+          type: ToggleButtonKeyDownSpaceButton
+        });
+      }
     }
   }), [dispatch, getItemNodeFromIndex, latest]);
 
@@ -3052,14 +3069,16 @@ function useCombobox(userProps) {
   // Make initial ref false.
   useEffect(() => {
     isInitialMountRef.current = false;
+    return () => {
+      isInitialMountRef.current = true;
+    };
   }, []);
   // Reset itemRefs on close.
   useEffect(() => {
     if (!isOpen) {
       itemRefs.current = {};
     } else if (document.activeElement !== inputRef.current) {
-      var _inputRef$current;
-      inputRef == null ? void 0 : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+      inputRef?.current?.focus();
     }
   }, [isOpen]);
 
@@ -3755,6 +3774,9 @@ function useMultipleSelection(userProps) {
   // Make initial ref false.
   useEffect(() => {
     isInitialMountRef.current = false;
+    return () => {
+      isInitialMountRef.current = true;
+    };
   }, []);
 
   // Event handler functions.

package/dist/downshift.native.cjs.js

@@ -1940,12 +1940,11 @@ function getItemIndexByCharacterKey(_a) {
     var keysSoFar = _a.keysSoFar, highlightedIndex = _a.highlightedIndex, items = _a.items, itemToString = _a.itemToString, getItemNodeFromIndex = _a.getItemNodeFromIndex;
     var lowerCasedKeysSoFar = keysSoFar.toLowerCase();
     for (var index = 0; index < items.length; index++) {
-        var offsetIndex = (index + highlightedIndex + 1) % items.length;
+        // if we already have a search query in progress, we also consider the current highlighted item.
+        var offsetIndex = (index + highlightedIndex + (keysSoFar.length < 2 ? 1 : 0)) % items.length;
         var item = items[offsetIndex];
         if (item !== undefined &&
-            itemToString(item)
-                .toLowerCase()
-                .startsWith(lowerCasedKeysSoFar)) {
+            itemToString(item).toLowerCase().startsWith(lowerCasedKeysSoFar)) {
             var element = getItemNodeFromIndex(offsetIndex);
             if (!(element === null || element === void 0 ? void 0 : element.hasAttribute('disabled'))) {
                 return offsetIndex;
@@ -2314,6 +2313,9 @@ function useSelect(userProps) {
   // Make initial ref false.
   react.useEffect(() => {
     isInitialMountRef.current = false;
+    return () => {
+      isInitialMountRef.current = true;
+    };
   }, []);
   // Reset itemRefs on close.
   react.useEffect(() => {
@@ -2387,9 +2389,24 @@ function useSelect(userProps) {
     },
     ' '(event) {
       event.preventDefault();
-      dispatch({
-        type: latest.current.state.isOpen ? ToggleButtonKeyDownSpaceButton : ToggleButtonClick$1
-      });
+      const currentState = latest.current.state;
+      if (!currentState.isOpen) {
+        dispatch({
+          type: ToggleButtonClick$1
+        });
+        return;
+      }
+      if (currentState.inputValue) {
+        dispatch({
+          type: ToggleButtonKeyDownCharacter,
+          key: ' ',
+          getItemNodeFromIndex
+        });
+      } else {
+        dispatch({
+          type: ToggleButtonKeyDownSpaceButton
+        });
+      }
     }
   }), [dispatch, getItemNodeFromIndex, latest]);
 
@@ -2999,14 +3016,16 @@ function useCombobox(userProps) {
   // Make initial ref false.
   react.useEffect(() => {
     isInitialMountRef.current = false;
+    return () => {
+      isInitialMountRef.current = true;
+    };
   }, []);
   // Reset itemRefs on close.
   react.useEffect(() => {
     if (!isOpen) {
       itemRefs.current = {};
     } else if (document.activeElement !== inputRef.current) {
-      var _inputRef$current;
-      inputRef == null ? void 0 : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+      inputRef?.current?.focus();
     }
   }, [isOpen]);
 
@@ -3714,6 +3733,9 @@ function useMultipleSelection(userProps) {
   // Make initial ref false.
   react.useEffect(() => {
     isInitialMountRef.current = false;
+    return () => {
+      isInitialMountRef.current = true;
+    };
   }, []);
 
   // Event handler functions.

package/dist/downshift.umd.js

@@ -1263,7 +1263,7 @@
     reactIs.exports = reactIs_development;
   }
 
-  function t(t){return "object"==typeof t&&null!=t&&1===t.nodeType}function e(t,e){return (!e||"hidden"!==t)&&"visible"!==t&&"clip"!==t}function n(t,n){if(t.clientHeight<t.scrollHeight||t.clientWidth<t.scrollWidth){var r=getComputedStyle(t,null);return e(r.overflowY,n)||e(r.overflowX,n)||function(t){var e=function(t){if(!t.ownerDocument||!t.ownerDocument.defaultView)return null;try{return t.ownerDocument.defaultView.frameElement}catch(t){return null}}(t);return !!e&&(e.clientHeight<t.scrollHeight||e.clientWidth<t.scrollWidth)}(t)}return !1}function r(t,e,n,r,i,o,l,d){return o<t&&l>e||o>t&&l<e?0:o<=t&&d<=n||l>=e&&d>=n?o-t-r:l>e&&d<n||o<t&&d>n?l-e+i:0}function computeScrollIntoView(e,i){var o=window,l=i.scrollMode,d=i.block,u=i.inline,h=i.boundary,a=i.skipOverflowHiddenElements,c="function"==typeof h?h:function(t){return t!==h};if(!t(e))throw new TypeError("Invalid target");for(var f=document.scrollingElement||document.documentElement,s=[],p=e;t(p)&&c(p);){if((p=p.parentElement)===f){s.push(p);break}null!=p&&p===document.body&&n(p)&&!n(document.documentElement)||null!=p&&n(p,a)&&s.push(p);}for(var m=o.visualViewport?o.visualViewport.width:innerWidth,g=o.visualViewport?o.visualViewport.height:innerHeight,w=window.scrollX||pageXOffset,v=window.scrollY||pageYOffset,W=e.getBoundingClientRect(),b=W.height,H=W.width,y=W.top,E=W.right,M=W.bottom,V=W.left,x="start"===d||"nearest"===d?y:"end"===d?M:y+b/2,I="center"===u?V+H/2:"end"===u?E:V,C=[],T=0;T<s.length;T++){var k=s[T],B=k.getBoundingClientRect(),D=B.height,O=B.width,R=B.top,X=B.right,Y=B.bottom,L=B.left;if("if-needed"===l&&y>=0&&V>=0&&M<=g&&E<=m&&y>=R&&M<=Y&&V>=L&&E<=X)return C;var S=getComputedStyle(k),j=parseInt(S.borderLeftWidth,10),q=parseInt(S.borderTopWidth,10),z=parseInt(S.borderRightWidth,10),A=parseInt(S.borderBottomWidth,10),F=0,G=0,J="offsetWidth"in k?k.offsetWidth-k.clientWidth-j-z:0,K="offsetHeight"in k?k.offsetHeight-k.clientHeight-q-A:0;if(f===k)F="start"===d?x:"end"===d?x-g:"nearest"===d?r(v,v+g,g,q,A,v+x,v+x+b,b):x-g/2,G="start"===u?I:"center"===u?I-m/2:"end"===u?I-m:r(w,w+m,m,j,z,w+I,w+I+H,H),F=Math.max(0,F+v),G=Math.max(0,G+w);else {F="start"===d?x-R-q:"end"===d?x-Y+A+K:"nearest"===d?r(R,Y,D,q,A+K,x,x+b,b):x-(R+D/2)+K/2,G="start"===u?I-L-j:"center"===u?I-(L+O/2)+J/2:"end"===u?I-X+z+J:r(L,X,O,j,z+J,I,I+H,H);var N=k.scrollLeft,P=k.scrollTop;x+=P-(F=Math.max(0,Math.min(P+F,k.scrollHeight-D+K))),I+=N-(G=Math.max(0,Math.min(N+G,k.scrollWidth-O+J)));}C.push({el:k,top:F,left:G});}return C}
+  function t(t){return "object"==typeof t&&null!=t&&1===t.nodeType}function e(t,e){return (!e||"hidden"!==t)&&"visible"!==t&&"clip"!==t}function n(t,n){if(t.clientHeight<t.scrollHeight||t.clientWidth<t.scrollWidth){var r=getComputedStyle(t,null);return e(r.overflowY,n)||e(r.overflowX,n)||function(t){var e=function(t){if(!t.ownerDocument||!t.ownerDocument.defaultView)return null;try{return t.ownerDocument.defaultView.frameElement}catch(t){return null}}(t);return !!e&&(e.clientHeight<t.scrollHeight||e.clientWidth<t.scrollWidth)}(t)}return !1}function r(t,e,n,r,i,o,l,d){return o<t&&l>e||o>t&&l<e?0:o<=t&&d<=n||l>=e&&d>=n?o-t-r:l>e&&d<n||o<t&&d>n?l-e+i:0}var i=function(e,i){var o=window,l=i.scrollMode,d=i.block,f=i.inline,h=i.boundary,u=i.skipOverflowHiddenElements,s="function"==typeof h?h:function(t){return t!==h};if(!t(e))throw new TypeError("Invalid target");for(var a,c,g=document.scrollingElement||document.documentElement,p=[],m=e;t(m)&&s(m);){if((m=null==(c=(a=m).parentElement)?a.getRootNode().host||null:c)===g){p.push(m);break}null!=m&&m===document.body&&n(m)&&!n(document.documentElement)||null!=m&&n(m,u)&&p.push(m);}for(var w=o.visualViewport?o.visualViewport.width:innerWidth,v=o.visualViewport?o.visualViewport.height:innerHeight,W=window.scrollX||pageXOffset,H=window.scrollY||pageYOffset,b=e.getBoundingClientRect(),y=b.height,E=b.width,M=b.top,V=b.right,x=b.bottom,I=b.left,C="start"===d||"nearest"===d?M:"end"===d?x:M+y/2,R="center"===f?I+E/2:"end"===f?V:I,T=[],k=0;k<p.length;k++){var B=p[k],D=B.getBoundingClientRect(),O=D.height,X=D.width,Y=D.top,L=D.right,S=D.bottom,j=D.left;if("if-needed"===l&&M>=0&&I>=0&&x<=v&&V<=w&&M>=Y&&x<=S&&I>=j&&V<=L)return T;var N=getComputedStyle(B),q=parseInt(N.borderLeftWidth,10),z=parseInt(N.borderTopWidth,10),A=parseInt(N.borderRightWidth,10),F=parseInt(N.borderBottomWidth,10),G=0,J=0,K="offsetWidth"in B?B.offsetWidth-B.clientWidth-q-A:0,P="offsetHeight"in B?B.offsetHeight-B.clientHeight-z-F:0,Q="offsetWidth"in B?0===B.offsetWidth?0:X/B.offsetWidth:0,U="offsetHeight"in B?0===B.offsetHeight?0:O/B.offsetHeight:0;if(g===B)G="start"===d?C:"end"===d?C-v:"nearest"===d?r(H,H+v,v,z,F,H+C,H+C+y,y):C-v/2,J="start"===f?R:"center"===f?R-w/2:"end"===f?R-w:r(W,W+w,w,q,A,W+R,W+R+E,E),G=Math.max(0,G+H),J=Math.max(0,J+W);else {G="start"===d?C-Y-z:"end"===d?C-S+F+P:"nearest"===d?r(Y,S,O,z,F+P,C,C+y,y):C-(Y+O/2)+P/2,J="start"===f?R-j-q:"center"===f?R-(j+X/2)+K/2:"end"===f?R-L+A+K:r(j,L,X,q,A+K,R,R+E,E);var Z=B.scrollLeft,$=B.scrollTop;C+=$-(G=Math.max(0,Math.min($+G/U,B.scrollHeight-O/U+P))),R+=Z-(J=Math.max(0,Math.min(Z+J/Q,B.scrollWidth-X/Q+K)));}T.push({el:B,top:G,left:J});}return T};
 
   let idCounter = 0;
 
@@ -1289,7 +1289,7 @@
     if (!node) {
       return;
     }
-    const actions = computeScrollIntoView(node, {
+    const actions = i(node, {
       boundary: menuNode,
       block: 'nearest',
       scrollMode: 'if-needed'
@@ -3273,12 +3273,11 @@
       var keysSoFar = _a.keysSoFar, highlightedIndex = _a.highlightedIndex, items = _a.items, itemToString = _a.itemToString, getItemNodeFromIndex = _a.getItemNodeFromIndex;
       var lowerCasedKeysSoFar = keysSoFar.toLowerCase();
       for (var index = 0; index < items.length; index++) {
-          var offsetIndex = (index + highlightedIndex + 1) % items.length;
+          // if we already have a search query in progress, we also consider the current highlighted item.
+          var offsetIndex = (index + highlightedIndex + (keysSoFar.length < 2 ? 1 : 0)) % items.length;
           var item = items[offsetIndex];
           if (item !== undefined &&
-              itemToString(item)
-                  .toLowerCase()
-                  .startsWith(lowerCasedKeysSoFar)) {
+              itemToString(item).toLowerCase().startsWith(lowerCasedKeysSoFar)) {
               var element = getItemNodeFromIndex(offsetIndex);
               if (!(element === null || element === void 0 ? void 0 : element.hasAttribute('disabled'))) {
                   return offsetIndex;
@@ -3647,6 +3646,9 @@
     // Make initial ref false.
     react.useEffect(() => {
       isInitialMountRef.current = false;
+      return () => {
+        isInitialMountRef.current = true;
+      };
     }, []);
     // Reset itemRefs on close.
     react.useEffect(() => {
@@ -3720,9 +3722,24 @@
       },
       ' '(event) {
         event.preventDefault();
-        dispatch({
-          type: latest.current.state.isOpen ? ToggleButtonKeyDownSpaceButton : ToggleButtonClick$1
-        });
+        const currentState = latest.current.state;
+        if (!currentState.isOpen) {
+          dispatch({
+            type: ToggleButtonClick$1
+          });
+          return;
+        }
+        if (currentState.inputValue) {
+          dispatch({
+            type: ToggleButtonKeyDownCharacter,
+            key: ' ',
+            getItemNodeFromIndex
+          });
+        } else {
+          dispatch({
+            type: ToggleButtonKeyDownSpaceButton
+          });
+        }
       }
     }), [dispatch, getItemNodeFromIndex, latest]);
 
@@ -4332,14 +4349,16 @@
     // Make initial ref false.
     react.useEffect(() => {
       isInitialMountRef.current = false;
+      return () => {
+        isInitialMountRef.current = true;
+      };
     }, []);
     // Reset itemRefs on close.
     react.useEffect(() => {
       if (!isOpen) {
         itemRefs.current = {};
       } else if (document.activeElement !== inputRef.current) {
-        var _inputRef$current;
-        inputRef == null ? void 0 : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+        inputRef?.current?.focus();
       }
     }, [isOpen]);
 
@@ -5035,6 +5054,9 @@
     // Make initial ref false.
     react.useEffect(() => {
       isInitialMountRef.current = false;
+      return () => {
+        isInitialMountRef.current = true;
+      };
     }, []);
 
     // Event handler functions.