downshift 5.0.1 → 5.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "downshift",
-  "version": "5.0.1",
+  "version": "5.0.5",
   "description": "A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete components",
   "main": "dist/downshift.cjs.js",
   "react-native": "dist/downshift.native.cjs.js",

package/preact/dist/downshift.cjs.js

@@ -1693,8 +1693,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);
     });
   };
@@ -1708,21 +1707,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));
   }
 }
 
@@ -1734,7 +1742,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]);
 
@@ -1742,7 +1750,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.
@@ -2202,13 +2214,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 */
 
 
@@ -2563,7 +2569,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),
@@ -2966,13 +2972,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 */
 
 
@@ -3314,7 +3314,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/preact/dist/downshift.esm.js

@@ -1687,8 +1687,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);
     });
   };
@@ -1702,21 +1701,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));
   }
 }
 
@@ -1728,7 +1736,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]);
 
@@ -1736,7 +1744,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.
@@ -2196,13 +2208,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 */
 
 
@@ -2557,7 +2563,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),
@@ -2960,13 +2966,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 */
 
 
@@ -3308,7 +3308,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/preact/dist/downshift.umd.js

@@ -2359,8 +2359,7 @@
         options = {};
       }
 
-      Object.entries(propTypes).forEach(function (_ref2) {
-        var key = _ref2[0];
+      Object.keys(propTypes).forEach(function (key) {
         PropTypes.checkPropTypes(propTypes, options, key, caller.name);
       });
     };
@@ -2374,21 +2373,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));
     }
   }
 
@@ -2400,7 +2408,7 @@
       var newState = stateReduceLocal(state, _extends({}, action, {
         changes: changes
       }));
-      callOnChangeProps(action.props, state, newState);
+      callOnChangeProps(action, state, newState);
       return newState;
     }, [reducer]);
 
@@ -2408,7 +2416,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.
@@ -2863,13 +2875,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 */
 
 
@@ -3224,7 +3230,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),
@@ -3622,13 +3628,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 */
 
 
@@ -3970,7 +3970,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,