downshift 5.0.1 → 5.0.5

package/README.md

@@ -1388,6 +1388,8 @@ Thanks goes to these people ([emoji key][emojis]):
   <tr>
     <td align="center"><a href="https://kubajastrz.com"><img src="https://avatars0.githubusercontent.com/u/6443113?v=4" width="100px;" alt=""/><br /><sub><b>Jakub Jastrzębski</b></sub></a><br /><a href="https://github.com/downshift-js/downshift/commits?author=KubaJastrz" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/mufasa71"><img src="https://avatars1.githubusercontent.com/u/626420?v=4" width="100px;" alt=""/><br /><sub><b>Shukhrat Mukimov</b></sub></a><br /><a href="https://github.com/downshift-js/downshift/commits?author=mufasa71" title="Code">💻</a></td>
+    <td align="center"><a href="http://jhonnymoreira.dev"><img src="https://avatars0.githubusercontent.com/u/2177742?v=4" width="100px;" alt=""/><br /><sub><b>Jhonny Moreira</b></sub></a><br /><a href="https://github.com/downshift-js/downshift/commits?author=jhonnymoreira" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/stefanprobst"><img src="https://avatars0.githubusercontent.com/u/20753323?v=4" width="100px;" alt=""/><br /><sub><b>stefanprobst</b></sub></a><br /><a href="https://github.com/downshift-js/downshift/commits?author=stefanprobst" title="Code">💻</a> <a href="https://github.com/downshift-js/downshift/commits?author=stefanprobst" title="Tests">⚠️</a></td>
   </tr>
 </table>
 

package/dist/downshift.cjs.js

@@ -1735,8 +1735,7 @@ function getPropTypesValidator(caller, propTypes) {
       options = {};
     }
 
-    Object.entries(propTypes).forEach(function (_ref2) {
-      var key = _ref2[0];
+    Object.keys(propTypes).forEach(function (key) {
       PropTypes.checkPropTypes(propTypes, options, key, caller.name);
     });
   };
@@ -1750,21 +1749,30 @@ function capitalizeString(string) {
   return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
 }
 
-function invokeOnChangeHandler(propKey, props, state, changes) {
-  var handler = "on" + capitalizeString(propKey) + "Change";
+function invokeOnChangeHandler(key, props, state, newState) {
+  var handler = "on" + capitalizeString(key) + "Change";
 
-  if (props[handler] && changes[propKey] !== undefined && changes[propKey] !== state[propKey]) {
-    props[handler](changes);
+  if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
+    props[handler](newState);
   }
 }
 
-function callOnChangeProps(props, state, changes) {
-  Object.keys(state).forEach(function (stateKey) {
-    invokeOnChangeHandler(stateKey, props, state, changes);
+function callOnChangeProps(action, state, newState) {
+  var props = action.props,
+      type = action.type;
+  var changes = {};
+  Object.keys(state).forEach(function (key) {
+    invokeOnChangeHandler(key, props, state, newState);
+
+    if (newState[key] !== state[key]) {
+      changes[key] = newState[key];
+    }
   });
 
-  if (props.onStateChange && changes !== undefined) {
-    props.onStateChange(changes);
+  if (props.onStateChange && Object.keys(changes).length) {
+    props.onStateChange(_extends({
+      type: type
+    }, changes));
   }
 }
 
@@ -1776,7 +1784,7 @@ function useEnhancedReducer(reducer, initialState, props) {
     var newState = stateReduceLocal(state, _extends({}, action, {
       changes: changes
     }));
-    callOnChangeProps(action.props, state, newState);
+    callOnChangeProps(action, state, newState);
     return newState;
   }, [reducer]);
 
@@ -1784,7 +1792,11 @@ function useEnhancedReducer(reducer, initialState, props) {
       state = _useReducer[0],
       dispatch = _useReducer[1];
 
-  return [getState(state, props), dispatch];
+  return [getState(state, props), function dispatchWithProps(action) {
+    return dispatch(_extends({
+      props: props
+    }, action));
+  }];
 }
 /**
  * Default state reducer that returns the changes.
@@ -2244,13 +2256,7 @@ function useSelect(userProps) {
       highlightedIndex = _useEnhancedReducer$.highlightedIndex,
       selectedItem = _useEnhancedReducer$.selectedItem,
       inputValue = _useEnhancedReducer$.inputValue,
-      dispatchWithoutProps = _useEnhancedReducer[1];
-
-  var dispatch = function (action) {
-    return dispatchWithoutProps(_extends({
-      props: props
-    }, action));
-  };
+      dispatch = _useEnhancedReducer[1];
   /* Refs */
 
 
@@ -2605,7 +2611,7 @@ function useSelect(userProps) {
 
       return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
         menuRef.current = menuNode;
-      }), _extends2.id = elementIds.current.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.current.labelId, _extends2.tabIndex = -1, _extends2), highlightedIndex > -1 && {
+      }), _extends2.id = elementIds.current.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.current.labelId, _extends2.tabIndex = -1, _extends2), isOpen && highlightedIndex > -1 && {
         'aria-activedescendant': elementIds.current.getItemId(highlightedIndex)
       }, {
         onMouseLeave: callAllEventHandlers(onMouseLeave, menuHandleMouseLeave),
@@ -3008,13 +3014,7 @@ function useCombobox(userProps) {
       highlightedIndex = _useEnhancedReducer$.highlightedIndex,
       selectedItem = _useEnhancedReducer$.selectedItem,
       inputValue = _useEnhancedReducer$.inputValue,
-      dispatchWithoutProps = _useEnhancedReducer[1];
-
-  var dispatch = function (action) {
-    return dispatchWithoutProps(_extends({
-      props: props
-    }, action));
-  };
+      dispatch = _useEnhancedReducer[1];
   /* Refs */
 
 
@@ -3356,7 +3356,7 @@ function useCombobox(userProps) {
 
       return _extends((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) {
         inputRef.current = inputNode;
-      }), _extends5.id = elementIds.current.inputId, _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.current.menuId, _extends5), highlightedIndex > -1 && {
+      }), _extends5.id = elementIds.current.inputId, _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.current.menuId, _extends5), isOpen && highlightedIndex > -1 && {
         'aria-activedescendant': elementIds.current.getItemId(highlightedIndex)
       }, {
         'aria-labelledby': elementIds.current.labelId,

package/dist/downshift.esm.js

@@ -1729,8 +1729,7 @@ function getPropTypesValidator(caller, propTypes) {
       options = {};
     }
 
-    Object.entries(propTypes).forEach(function (_ref2) {
-      var key = _ref2[0];
+    Object.keys(propTypes).forEach(function (key) {
       PropTypes.checkPropTypes(propTypes, options, key, caller.name);
     });
   };
@@ -1744,21 +1743,30 @@ function capitalizeString(string) {
   return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
 }
 
-function invokeOnChangeHandler(propKey, props, state, changes) {
-  var handler = "on" + capitalizeString(propKey) + "Change";
+function invokeOnChangeHandler(key, props, state, newState) {
+  var handler = "on" + capitalizeString(key) + "Change";
 
-  if (props[handler] && changes[propKey] !== undefined && changes[propKey] !== state[propKey]) {
-    props[handler](changes);
+  if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
+    props[handler](newState);
   }
 }
 
-function callOnChangeProps(props, state, changes) {
-  Object.keys(state).forEach(function (stateKey) {
-    invokeOnChangeHandler(stateKey, props, state, changes);
+function callOnChangeProps(action, state, newState) {
+  var props = action.props,
+      type = action.type;
+  var changes = {};
+  Object.keys(state).forEach(function (key) {
+    invokeOnChangeHandler(key, props, state, newState);
+
+    if (newState[key] !== state[key]) {
+      changes[key] = newState[key];
+    }
   });
 
-  if (props.onStateChange && changes !== undefined) {
-    props.onStateChange(changes);
+  if (props.onStateChange && Object.keys(changes).length) {
+    props.onStateChange(_extends({
+      type: type
+    }, changes));
   }
 }
 
@@ -1770,7 +1778,7 @@ function useEnhancedReducer(reducer, initialState, props) {
     var newState = stateReduceLocal(state, _extends({}, action, {
       changes: changes
     }));
-    callOnChangeProps(action.props, state, newState);
+    callOnChangeProps(action, state, newState);
     return newState;
   }, [reducer]);
 
@@ -1778,7 +1786,11 @@ function useEnhancedReducer(reducer, initialState, props) {
       state = _useReducer[0],
       dispatch = _useReducer[1];
 
-  return [getState(state, props), dispatch];
+  return [getState(state, props), function dispatchWithProps(action) {
+    return dispatch(_extends({
+      props: props
+    }, action));
+  }];
 }
 /**
  * Default state reducer that returns the changes.
@@ -2238,13 +2250,7 @@ function useSelect(userProps) {
       highlightedIndex = _useEnhancedReducer$.highlightedIndex,
       selectedItem = _useEnhancedReducer$.selectedItem,
       inputValue = _useEnhancedReducer$.inputValue,
-      dispatchWithoutProps = _useEnhancedReducer[1];
-
-  var dispatch = function (action) {
-    return dispatchWithoutProps(_extends({
-      props: props
-    }, action));
-  };
+      dispatch = _useEnhancedReducer[1];
   /* Refs */
 
 
@@ -2599,7 +2605,7 @@ function useSelect(userProps) {
 
       return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
         menuRef.current = menuNode;
-      }), _extends2.id = elementIds.current.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.current.labelId, _extends2.tabIndex = -1, _extends2), highlightedIndex > -1 && {
+      }), _extends2.id = elementIds.current.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.current.labelId, _extends2.tabIndex = -1, _extends2), isOpen && highlightedIndex > -1 && {
         'aria-activedescendant': elementIds.current.getItemId(highlightedIndex)
       }, {
         onMouseLeave: callAllEventHandlers(onMouseLeave, menuHandleMouseLeave),
@@ -3002,13 +3008,7 @@ function useCombobox(userProps) {
       highlightedIndex = _useEnhancedReducer$.highlightedIndex,
       selectedItem = _useEnhancedReducer$.selectedItem,
       inputValue = _useEnhancedReducer$.inputValue,
-      dispatchWithoutProps = _useEnhancedReducer[1];
-
-  var dispatch = function (action) {
-    return dispatchWithoutProps(_extends({
-      props: props
-    }, action));
-  };
+      dispatch = _useEnhancedReducer[1];
   /* Refs */
 
 
@@ -3350,7 +3350,7 @@ function useCombobox(userProps) {
 
       return _extends((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) {
         inputRef.current = inputNode;
-      }), _extends5.id = elementIds.current.inputId, _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.current.menuId, _extends5), highlightedIndex > -1 && {
+      }), _extends5.id = elementIds.current.inputId, _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.current.menuId, _extends5), isOpen && highlightedIndex > -1 && {
         'aria-activedescendant': elementIds.current.getItemId(highlightedIndex)
       }, {
         'aria-labelledby': elementIds.current.labelId,

package/dist/downshift.native.cjs.js

@@ -1668,8 +1668,7 @@ function getPropTypesValidator(caller, propTypes) {
       options = {};
     }
 
-    Object.entries(propTypes).forEach(function (_ref2) {
-      var key = _ref2[0];
+    Object.keys(propTypes).forEach(function (key) {
       PropTypes.checkPropTypes(propTypes, options, key, caller.name);
     });
   };
@@ -1683,21 +1682,30 @@ function capitalizeString(string) {
   return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
 }
 
-function invokeOnChangeHandler(propKey, props, state, changes) {
-  var handler = "on" + capitalizeString(propKey) + "Change";
+function invokeOnChangeHandler(key, props, state, newState) {
+  var handler = "on" + capitalizeString(key) + "Change";
 
-  if (props[handler] && changes[propKey] !== undefined && changes[propKey] !== state[propKey]) {
-    props[handler](changes);
+  if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
+    props[handler](newState);
   }
 }
 
-function callOnChangeProps(props, state, changes) {
-  Object.keys(state).forEach(function (stateKey) {
-    invokeOnChangeHandler(stateKey, props, state, changes);
+function callOnChangeProps(action, state, newState) {
+  var props = action.props,
+      type = action.type;
+  var changes = {};
+  Object.keys(state).forEach(function (key) {
+    invokeOnChangeHandler(key, props, state, newState);
+
+    if (newState[key] !== state[key]) {
+      changes[key] = newState[key];
+    }
   });
 
-  if (props.onStateChange && changes !== undefined) {
-    props.onStateChange(changes);
+  if (props.onStateChange && Object.keys(changes).length) {
+    props.onStateChange(_extends({
+      type: type
+    }, changes));
   }
 }
 
@@ -1709,7 +1717,7 @@ function useEnhancedReducer(reducer, initialState, props) {
     var newState = stateReduceLocal(state, _extends({}, action, {
       changes: changes
     }));
-    callOnChangeProps(action.props, state, newState);
+    callOnChangeProps(action, state, newState);
     return newState;
   }, [reducer]);
 
@@ -1717,7 +1725,11 @@ function useEnhancedReducer(reducer, initialState, props) {
       state = _useReducer[0],
       dispatch = _useReducer[1];
 
-  return [getState(state, props), dispatch];
+  return [getState(state, props), function dispatchWithProps(action) {
+    return dispatch(_extends({
+      props: props
+    }, action));
+  }];
 }
 /**
  * Default state reducer that returns the changes.
@@ -2177,13 +2189,7 @@ function useSelect(userProps) {
       highlightedIndex = _useEnhancedReducer$.highlightedIndex,
       selectedItem = _useEnhancedReducer$.selectedItem,
       inputValue = _useEnhancedReducer$.inputValue,
-      dispatchWithoutProps = _useEnhancedReducer[1];
-
-  var dispatch = function (action) {
-    return dispatchWithoutProps(_extends({
-      props: props
-    }, action));
-  };
+      dispatch = _useEnhancedReducer[1];
   /* Refs */
 
 
@@ -2538,7 +2544,7 @@ function useSelect(userProps) {
 
       return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
         menuRef.current = menuNode;
-      }), _extends2.id = elementIds.current.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.current.labelId, _extends2.tabIndex = -1, _extends2), highlightedIndex > -1 && {
+      }), _extends2.id = elementIds.current.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.current.labelId, _extends2.tabIndex = -1, _extends2), isOpen && highlightedIndex > -1 && {
         'aria-activedescendant': elementIds.current.getItemId(highlightedIndex)
       }, {
         onMouseLeave: callAllEventHandlers(onMouseLeave, menuHandleMouseLeave),
@@ -2941,13 +2947,7 @@ function useCombobox(userProps) {
       highlightedIndex = _useEnhancedReducer$.highlightedIndex,
       selectedItem = _useEnhancedReducer$.selectedItem,
       inputValue = _useEnhancedReducer$.inputValue,
-      dispatchWithoutProps = _useEnhancedReducer[1];
-
-  var dispatch = function (action) {
-    return dispatchWithoutProps(_extends({
-      props: props
-    }, action));
-  };
+      dispatch = _useEnhancedReducer[1];
   /* Refs */
 
 
@@ -3303,7 +3303,7 @@ function useCombobox(userProps) {
       });
       return _extends((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) {
         inputRef.current = inputNode;
-      }), _extends5.id = elementIds.current.inputId, _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.current.menuId, _extends5), highlightedIndex > -1 && {
+      }), _extends5.id = elementIds.current.inputId, _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.current.menuId, _extends5), isOpen && highlightedIndex > -1 && {
         'aria-activedescendant': elementIds.current.getItemId(highlightedIndex)
       }, {
         'aria-labelledby': elementIds.current.labelId,

package/dist/downshift.umd.js

@@ -3235,8 +3235,7 @@
         options = {};
       }
 
-      Object.entries(propTypes$1).forEach(function (_ref2) {
-        var key = _ref2[0];
+      Object.keys(propTypes$1).forEach(function (key) {
         propTypes.checkPropTypes(propTypes$1, options, key, caller.name);
       });
     };
@@ -3250,21 +3249,30 @@
     return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
   }
 
-  function invokeOnChangeHandler(propKey, props, state, changes) {
-    var handler = "on" + capitalizeString(propKey) + "Change";
+  function invokeOnChangeHandler(key, props, state, newState) {
+    var handler = "on" + capitalizeString(key) + "Change";
 
-    if (props[handler] && changes[propKey] !== undefined && changes[propKey] !== state[propKey]) {
-      props[handler](changes);
+    if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
+      props[handler](newState);
     }
   }
 
-  function callOnChangeProps(props, state, changes) {
-    Object.keys(state).forEach(function (stateKey) {
-      invokeOnChangeHandler(stateKey, props, state, changes);
+  function callOnChangeProps(action, state, newState) {
+    var props = action.props,
+        type = action.type;
+    var changes = {};
+    Object.keys(state).forEach(function (key) {
+      invokeOnChangeHandler(key, props, state, newState);
+
+      if (newState[key] !== state[key]) {
+        changes[key] = newState[key];
+      }
     });
 
-    if (props.onStateChange && changes !== undefined) {
-      props.onStateChange(changes);
+    if (props.onStateChange && Object.keys(changes).length) {
+      props.onStateChange(_extends({
+        type: type
+      }, changes));
     }
   }
 
@@ -3276,7 +3284,7 @@
       var newState = stateReduceLocal(state, _extends({}, action, {
         changes: changes
       }));
-      callOnChangeProps(action.props, state, newState);
+      callOnChangeProps(action, state, newState);
       return newState;
     }, [reducer]);
 
@@ -3284,7 +3292,11 @@
         state = _useReducer[0],
         dispatch = _useReducer[1];
 
-    return [getState(state, props), dispatch];
+    return [getState(state, props), function dispatchWithProps(action) {
+      return dispatch(_extends({
+        props: props
+      }, action));
+    }];
   }
   /**
    * Default state reducer that returns the changes.
@@ -3739,13 +3751,7 @@
         highlightedIndex = _useEnhancedReducer$.highlightedIndex,
         selectedItem = _useEnhancedReducer$.selectedItem,
         inputValue = _useEnhancedReducer$.inputValue,
-        dispatchWithoutProps = _useEnhancedReducer[1];
-
-    var dispatch = function (action) {
-      return dispatchWithoutProps(_extends({
-        props: props
-      }, action));
-    };
+        dispatch = _useEnhancedReducer[1];
     /* Refs */
 
 
@@ -4100,7 +4106,7 @@
 
         return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) {
           menuRef.current = menuNode;
-        }), _extends2.id = elementIds.current.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.current.labelId, _extends2.tabIndex = -1, _extends2), highlightedIndex > -1 && {
+        }), _extends2.id = elementIds.current.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.current.labelId, _extends2.tabIndex = -1, _extends2), isOpen && highlightedIndex > -1 && {
           'aria-activedescendant': elementIds.current.getItemId(highlightedIndex)
         }, {
           onMouseLeave: callAllEventHandlers(onMouseLeave, menuHandleMouseLeave),
@@ -4498,13 +4504,7 @@
         highlightedIndex = _useEnhancedReducer$.highlightedIndex,
         selectedItem = _useEnhancedReducer$.selectedItem,
         inputValue = _useEnhancedReducer$.inputValue,
-        dispatchWithoutProps = _useEnhancedReducer[1];
-
-    var dispatch = function (action) {
-      return dispatchWithoutProps(_extends({
-        props: props
-      }, action));
-    };
+        dispatch = _useEnhancedReducer[1];
     /* Refs */
 
 
@@ -4846,7 +4846,7 @@
 
         return _extends((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) {
           inputRef.current = inputNode;
-        }), _extends5.id = elementIds.current.inputId, _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.current.menuId, _extends5), highlightedIndex > -1 && {
+        }), _extends5.id = elementIds.current.inputId, _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.current.menuId, _extends5), isOpen && highlightedIndex > -1 && {
           'aria-activedescendant': elementIds.current.getItemId(highlightedIndex)
         }, {
           'aria-labelledby': elementIds.current.labelId,