@reach/combobox - npm Package Compare versions

Comparing version 0.16.1 to 0.16.2

dist/declarations/src/index.d.ts

@@ -220,2 +220,8 @@ /**
 /**
+ * We want the same events when the input or the popup have focus (HOW COOL ARE
+ * HOOKS BTW?) This is probably the hairiest piece but it's not bad.
+ */
+declare function useKeyDown(): (event: React.KeyboardEvent) => void;
+export { useKeyDown as unstable_useKeyDown };
+/**
  * Escape regexp special characters in `str`
@@ -251,2 +257,1 @@ *
 declare type State = "IDLE" | "SUGGESTING" | "NAVIGATING" | "INTERACTING";
-export {};

dist/reach-combobox.cjs.dev.js

@@ -14,3 +14,2 @@ 'use strict';
 var composeRefs = require('@reach/utils/compose-refs');
-var useUpdateEffect = require('@reach/utils/use-update-effect');
 var useStatefulRefValue = require('@reach/utils/use-stateful-ref-value');
@@ -254,7 +253,8 @@ var composeEventHandlers = require('@reach/utils/compose-event-handlers');
 
-var CHANGE = "CHANGE"; // Initial input value change handler for syncing user state with state machine
-// Prevents initial change from sending the user to the NAVIGATING state
+var CHANGE = "CHANGE"; // Any input change that is not triggered by an actual onChange event.
+// For example an initial value or a controlled value that was changed.
+// Prevents sending the user to the NAVIGATING state
 // https://github.com/reach/reach-ui/issues/464
 
-var INITIAL_CHANGE = "INITIAL_CHANGE"; // User is navigating w/ the keyboard
+var SIMULATED_CHANGE = "SIMULATED_CHANGE"; // User is navigating w/ the keyboard
 
@@ -279,3 +279,3 @@ var NAVIGATE = "NAVIGATE"; // User can be navigating with keyboard and then click instead, we want the
   states: (_states = {}, _states[IDLE] = {
-    on: (_on = {}, _on[BLUR] = IDLE, _on[CLEAR] = IDLE, _on[CHANGE] = SUGGESTING, _on[INITIAL_CHANGE] = IDLE, _on[FOCUS] = SUGGESTING, _on[NAVIGATE] = NAVIGATING, _on[OPEN_WITH_BUTTON] = SUGGESTING, _on[OPEN_WITH_INPUT_CLICK] = SUGGESTING, _on)
+    on: (_on = {}, _on[BLUR] = IDLE, _on[CLEAR] = IDLE, _on[CHANGE] = SUGGESTING, _on[SIMULATED_CHANGE] = IDLE, _on[FOCUS] = SUGGESTING, _on[NAVIGATE] = NAVIGATING, _on[OPEN_WITH_BUTTON] = SUGGESTING, _on[OPEN_WITH_INPUT_CLICK] = SUGGESTING, _on)
   }, _states[SUGGESTING] = {
@@ -297,3 +297,3 @@ on: (_on2 = {}, _on2[CHANGE] = SUGGESTING, _on2[FOCUS] = SUGGESTING, _on2[NAVIGATE] = NAVIGATING, _on2[CLEAR] = IDLE, _on2[ESCAPE] = IDLE, _on2[BLUR] = IDLE, _on2[SELECT_WITH_CLICK] = IDLE, _on2[INTERACT] = INTERACTING, _on2[CLOSE_WITH_BUTTON] = IDLE, _on2)
     case CHANGE:
-    case INITIAL_CHANGE:
+    case SIMULATED_CHANGE:
       return _extends({}, nextState, {
@@ -508,10 +508,5 @@ navigationValue: null,
   // https://github.com/reach/reach-ui/issues/464
-  var _React$useRef = React.useRef(controlledValue),
-      initialControlledValue = _React$useRef.current;
+  // https://github.com/reach/reach-ui/issues/755
+  var inputValueChangedRef = React.useRef(false);
 
-  var controlledValueChangedRef = React.useRef(false);
-  useUpdateEffect.useUpdateEffect(function () {
-    controlledValueChangedRef.current = true;
-  }, [controlledValue]);
-
   var _React$useContext = React.useContext(ComboboxContext),
@@ -549,4 +544,4 @@ _React$useContext$dat = _React$useContext.data,
       transition(CLEAR);
-    } else if (value === initialControlledValue && !controlledValueChangedRef.current) {
-      transition(INITIAL_CHANGE, {
+    } else if (!inputValueChangedRef.current) {
+      transition(SIMULATED_CHANGE, {
         value: value
@@ -559,3 +554,3 @@ });
     }
-  }, [initialControlledValue, transition]);
+  }, [transition]);
   React.useEffect(function () {
@@ -568,3 +563,7 @@ // If they are controlling the value we still need to do our transitions,
       handleValueChange(controlledValue);
-    }
+    } // After we handled the changed value, we need to make sure the next
+    // controlled change won't trigger a CHANGE event. (instead of a SIMULATED_CHANGE)
+
+
+    inputValueChangedRef.current = false;
   }, [controlledValue, handleValueChange, isControlled, value]); // [*]... and when controlled, we don't trigger handleValueChange as the
@@ -576,2 +575,3 @@ // user types, instead the developer controls it with the normal input
     var value = event.target.value;
+    inputValueChangedRef.current = true;
 
@@ -1291,3 +1291,4 @@ if (!isControlled) {
 exports.escapeRegexp = escapeRegexp;
+exports.unstable_useKeyDown = useKeyDown;
 exports.useComboboxContext = useComboboxContext;
 exports.useComboboxOptionContext = useComboboxOptionContext;

dist/reach-combobox.cjs.prod.js

@@ -14,3 +14,2 @@ 'use strict';
 var composeRefs = require('@reach/utils/compose-refs');
-var useUpdateEffect = require('@reach/utils/use-update-effect');
 var useStatefulRefValue = require('@reach/utils/use-stateful-ref-value');
@@ -250,7 +249,8 @@ var composeEventHandlers = require('@reach/utils/compose-event-handlers');
 
-var CHANGE = "CHANGE"; // Initial input value change handler for syncing user state with state machine
-// Prevents initial change from sending the user to the NAVIGATING state
+var CHANGE = "CHANGE"; // Any input change that is not triggered by an actual onChange event.
+// For example an initial value or a controlled value that was changed.
+// Prevents sending the user to the NAVIGATING state
 // https://github.com/reach/reach-ui/issues/464
 
-var INITIAL_CHANGE = "INITIAL_CHANGE"; // User is navigating w/ the keyboard
+var SIMULATED_CHANGE = "SIMULATED_CHANGE"; // User is navigating w/ the keyboard
 
@@ -275,3 +275,3 @@ var NAVIGATE = "NAVIGATE"; // User can be navigating with keyboard and then click instead, we want the
   states: (_states = {}, _states[IDLE] = {
-    on: (_on = {}, _on[BLUR] = IDLE, _on[CLEAR] = IDLE, _on[CHANGE] = SUGGESTING, _on[INITIAL_CHANGE] = IDLE, _on[FOCUS] = SUGGESTING, _on[NAVIGATE] = NAVIGATING, _on[OPEN_WITH_BUTTON] = SUGGESTING, _on[OPEN_WITH_INPUT_CLICK] = SUGGESTING, _on)
+    on: (_on = {}, _on[BLUR] = IDLE, _on[CLEAR] = IDLE, _on[CHANGE] = SUGGESTING, _on[SIMULATED_CHANGE] = IDLE, _on[FOCUS] = SUGGESTING, _on[NAVIGATE] = NAVIGATING, _on[OPEN_WITH_BUTTON] = SUGGESTING, _on[OPEN_WITH_INPUT_CLICK] = SUGGESTING, _on)
   }, _states[SUGGESTING] = {
@@ -293,3 +293,3 @@ on: (_on2 = {}, _on2[CHANGE] = SUGGESTING, _on2[FOCUS] = SUGGESTING, _on2[NAVIGATE] = NAVIGATING, _on2[CLEAR] = IDLE, _on2[ESCAPE] = IDLE, _on2[BLUR] = IDLE, _on2[SELECT_WITH_CLICK] = IDLE, _on2[INTERACT] = INTERACTING, _on2[CLOSE_WITH_BUTTON] = IDLE, _on2)
     case CHANGE:
-    case INITIAL_CHANGE:
+    case SIMULATED_CHANGE:
       return _extends({}, nextState, {
@@ -492,10 +492,5 @@ navigationValue: null,
   // https://github.com/reach/reach-ui/issues/464
-  var _React$useRef = React.useRef(controlledValue),
-      initialControlledValue = _React$useRef.current;
+  // https://github.com/reach/reach-ui/issues/755
+  var inputValueChangedRef = React.useRef(false);
 
-  var controlledValueChangedRef = React.useRef(false);
-  useUpdateEffect.useUpdateEffect(function () {
-    controlledValueChangedRef.current = true;
-  }, [controlledValue]);
-
   var _React$useContext = React.useContext(ComboboxContext),
@@ -533,4 +528,4 @@ _React$useContext$dat = _React$useContext.data,
       transition(CLEAR);
-    } else if (value === initialControlledValue && !controlledValueChangedRef.current) {
-      transition(INITIAL_CHANGE, {
+    } else if (!inputValueChangedRef.current) {
+      transition(SIMULATED_CHANGE, {
         value: value
@@ -543,3 +538,3 @@ });
     }
-  }, [initialControlledValue, transition]);
+  }, [transition]);
   React.useEffect(function () {
@@ -552,3 +547,7 @@ // If they are controlling the value we still need to do our transitions,
       handleValueChange(controlledValue);
-    }
+    } // After we handled the changed value, we need to make sure the next
+    // controlled change won't trigger a CHANGE event. (instead of a SIMULATED_CHANGE)
+
+
+    inputValueChangedRef.current = false;
   }, [controlledValue, handleValueChange, isControlled, value]); // [*]... and when controlled, we don't trigger handleValueChange as the
@@ -560,2 +559,3 @@ // user types, instead the developer controls it with the normal input
     var value = event.target.value;
+    inputValueChangedRef.current = true;
 
@@ -1242,3 +1242,4 @@ if (!isControlled) {
 exports.escapeRegexp = escapeRegexp;
+exports.unstable_useKeyDown = useKeyDown;
 exports.useComboboxContext = useComboboxContext;
 exports.useComboboxOptionContext = useComboboxOptionContext;

dist/reach-combobox.esm.js

@@ -10,3 +10,2 @@ import { forwardRef, useRef, createElement, useContext, useCallback, useEffect, useMemo, Fragment, useState, useReducer } from 'react';
 import { useComposedRefs } from '@reach/utils/compose-refs';
-import { useUpdateEffect } from '@reach/utils/use-update-effect';
 import { useStatefulRefValue } from '@reach/utils/use-stateful-ref-value';
@@ -246,7 +245,8 @@ import { composeEventHandlers } from '@reach/utils/compose-event-handlers';
 
-var CHANGE = "CHANGE"; // Initial input value change handler for syncing user state with state machine
-// Prevents initial change from sending the user to the NAVIGATING state
+var CHANGE = "CHANGE"; // Any input change that is not triggered by an actual onChange event.
+// For example an initial value or a controlled value that was changed.
+// Prevents sending the user to the NAVIGATING state
 // https://github.com/reach/reach-ui/issues/464
 
-var INITIAL_CHANGE = "INITIAL_CHANGE"; // User is navigating w/ the keyboard
+var SIMULATED_CHANGE = "SIMULATED_CHANGE"; // User is navigating w/ the keyboard
 
@@ -271,3 +271,3 @@ var NAVIGATE = "NAVIGATE"; // User can be navigating with keyboard and then click instead, we want the
   states: (_states = {}, _states[IDLE] = {
-    on: (_on = {}, _on[BLUR] = IDLE, _on[CLEAR] = IDLE, _on[CHANGE] = SUGGESTING, _on[INITIAL_CHANGE] = IDLE, _on[FOCUS] = SUGGESTING, _on[NAVIGATE] = NAVIGATING, _on[OPEN_WITH_BUTTON] = SUGGESTING, _on[OPEN_WITH_INPUT_CLICK] = SUGGESTING, _on)
+    on: (_on = {}, _on[BLUR] = IDLE, _on[CLEAR] = IDLE, _on[CHANGE] = SUGGESTING, _on[SIMULATED_CHANGE] = IDLE, _on[FOCUS] = SUGGESTING, _on[NAVIGATE] = NAVIGATING, _on[OPEN_WITH_BUTTON] = SUGGESTING, _on[OPEN_WITH_INPUT_CLICK] = SUGGESTING, _on)
   }, _states[SUGGESTING] = {
@@ -289,3 +289,3 @@ on: (_on2 = {}, _on2[CHANGE] = SUGGESTING, _on2[FOCUS] = SUGGESTING, _on2[NAVIGATE] = NAVIGATING, _on2[CLEAR] = IDLE, _on2[ESCAPE] = IDLE, _on2[BLUR] = IDLE, _on2[SELECT_WITH_CLICK] = IDLE, _on2[INTERACT] = INTERACTING, _on2[CLOSE_WITH_BUTTON] = IDLE, _on2)
     case CHANGE:
-    case INITIAL_CHANGE:
+    case SIMULATED_CHANGE:
       return _extends({}, nextState, {
@@ -500,10 +500,5 @@ navigationValue: null,
   // https://github.com/reach/reach-ui/issues/464
-  var _React$useRef = useRef(controlledValue),
-      initialControlledValue = _React$useRef.current;
+  // https://github.com/reach/reach-ui/issues/755
+  var inputValueChangedRef = useRef(false);
 
-  var controlledValueChangedRef = useRef(false);
-  useUpdateEffect(function () {
-    controlledValueChangedRef.current = true;
-  }, [controlledValue]);
-
   var _React$useContext = useContext(ComboboxContext),
@@ -541,4 +536,4 @@ _React$useContext$dat = _React$useContext.data,
       transition(CLEAR);
-    } else if (value === initialControlledValue && !controlledValueChangedRef.current) {
-      transition(INITIAL_CHANGE, {
+    } else if (!inputValueChangedRef.current) {
+      transition(SIMULATED_CHANGE, {
         value: value
@@ -551,3 +546,3 @@ });
     }
-  }, [initialControlledValue, transition]);
+  }, [transition]);
   useEffect(function () {
@@ -560,3 +555,7 @@ // If they are controlling the value we still need to do our transitions,
       handleValueChange(controlledValue);
-    }
+    } // After we handled the changed value, we need to make sure the next
+    // controlled change won't trigger a CHANGE event. (instead of a SIMULATED_CHANGE)
+
+
+    inputValueChangedRef.current = false;
   }, [controlledValue, handleValueChange, isControlled, value]); // [*]... and when controlled, we don't trigger handleValueChange as the
@@ -568,2 +567,3 @@ // user types, instead the developer controls it with the normal input
     var value = event.target.value;
+    inputValueChangedRef.current = true;
 
@@ -1275,2 +1275,2 @@ if (!isControlled) {
 
-export { Combobox, ComboboxButton, ComboboxInput, ComboboxList, ComboboxOption, ComboboxOptionText, ComboboxPopover, escapeRegexp, useComboboxContext, useComboboxOptionContext };
+export { Combobox, ComboboxButton, ComboboxInput, ComboboxList, ComboboxOption, ComboboxOptionText, ComboboxPopover, escapeRegexp, useKeyDown as unstable_useKeyDown, useComboboxContext, useComboboxOptionContext };

package.json

 {
   "name": "@reach/combobox",
-  "version": "0.16.1",
+  "version": "0.16.2",
   "description": "Accessible React Combobox (Autocomplete).",
@@ -18,4 +18,4 @@ "author": "React Training <[e-mail]>",
     "@reach/descendants": "0.16.1",
-    "@reach/popover": "0.16.0",
-    "@reach/portal": "0.16.0",
+    "@reach/popover": "0.16.2",
+    "@reach/portal": "0.16.2",
     "@reach/utils": "0.16.0",
@@ -46,3 +46,3 @@ "prop-types": "^15.7.2",
   ],
-  "gitHead": "def3e4a96c6bc184ff78725e37854e542225d371"
+  "gitHead": "d81d4627145952b415b42537ef6497838567baa2"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

139486

increased by0.25%

Lines of code

3586

increased by0.11%

Dependency changes

• + Added@reach/popover@0.16.2(transitive)

• + Added@reach/portal@0.16.2(transitive)

• - Removed@reach/popover@0.16.0(transitive)

• - Removed@reach/portal@0.16.0(transitive)

• Updated@reach/popover@0.16.2

• Updated@reach/portal@0.16.2