@reach/combobox - npm Package Compare versions

Comparing version 0.16.2 to 0.16.3

dist/reach-combobox.cjs.dev.js

@@ -14,2 +14,3 @@ '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');
@@ -253,8 +254,7 @@ var composeEventHandlers = require('@reach/utils/compose-event-handlers');
 
-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
+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
 // https://github.com/reach/reach-ui/issues/464
 
-var SIMULATED_CHANGE = "SIMULATED_CHANGE"; // User is navigating w/ the keyboard
+var INITIAL_CHANGE = "INITIAL_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[SIMULATED_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[INITIAL_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 SIMULATED_CHANGE:
+    case INITIAL_CHANGE:
       return _extends({}, nextState, {
@@ -508,5 +508,10 @@ navigationValue: null,
   // https://github.com/reach/reach-ui/issues/464
-  // https://github.com/reach/reach-ui/issues/755
-  var inputValueChangedRef = React.useRef(false);
+  var _React$useRef = React.useRef(controlledValue),
+      initialControlledValue = _React$useRef.current;
 
+  var controlledValueChangedRef = React.useRef(false);
+  useUpdateEffect.useUpdateEffect(function () {
+    controlledValueChangedRef.current = true;
+  }, [controlledValue]);
+
   var _React$useContext = React.useContext(ComboboxContext),
@@ -544,4 +549,4 @@ _React$useContext$dat = _React$useContext.data,
       transition(CLEAR);
-    } else if (!inputValueChangedRef.current) {
-      transition(SIMULATED_CHANGE, {
+    } else if (value === initialControlledValue && !controlledValueChangedRef.current) {
+      transition(INITIAL_CHANGE, {
         value: value
@@ -554,3 +559,3 @@ });
     }
-  }, [transition]);
+  }, [initialControlledValue, transition]);
   React.useEffect(function () {
@@ -563,7 +568,3 @@ // 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
@@ -575,3 +576,2 @@ // user types, instead the developer controls it with the normal input
     var value = event.target.value;
-    inputValueChangedRef.current = true;
 
@@ -578,0 +578,0 @@ if (!isControlled) {

dist/reach-combobox.cjs.prod.js

@@ -14,2 +14,3 @@ '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');
@@ -249,8 +250,7 @@ var composeEventHandlers = require('@reach/utils/compose-event-handlers');
 
-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
+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
 // https://github.com/reach/reach-ui/issues/464
 
-var SIMULATED_CHANGE = "SIMULATED_CHANGE"; // User is navigating w/ the keyboard
+var INITIAL_CHANGE = "INITIAL_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[SIMULATED_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[INITIAL_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 SIMULATED_CHANGE:
+    case INITIAL_CHANGE:
       return _extends({}, nextState, {
@@ -492,5 +492,10 @@ navigationValue: null,
   // https://github.com/reach/reach-ui/issues/464
-  // https://github.com/reach/reach-ui/issues/755
-  var inputValueChangedRef = React.useRef(false);
+  var _React$useRef = React.useRef(controlledValue),
+      initialControlledValue = _React$useRef.current;
 
+  var controlledValueChangedRef = React.useRef(false);
+  useUpdateEffect.useUpdateEffect(function () {
+    controlledValueChangedRef.current = true;
+  }, [controlledValue]);
+
   var _React$useContext = React.useContext(ComboboxContext),
@@ -528,4 +533,4 @@ _React$useContext$dat = _React$useContext.data,
       transition(CLEAR);
-    } else if (!inputValueChangedRef.current) {
-      transition(SIMULATED_CHANGE, {
+    } else if (value === initialControlledValue && !controlledValueChangedRef.current) {
+      transition(INITIAL_CHANGE, {
         value: value
@@ -538,3 +543,3 @@ });
     }
-  }, [transition]);
+  }, [initialControlledValue, transition]);
   React.useEffect(function () {
@@ -547,7 +552,3 @@ // 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
@@ -559,3 +560,2 @@ // user types, instead the developer controls it with the normal input
     var value = event.target.value;
-    inputValueChangedRef.current = true;
 
@@ -562,0 +562,0 @@ if (!isControlled) {

dist/reach-combobox.esm.js

@@ -10,2 +10,3 @@ 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';
@@ -245,8 +246,7 @@ import { composeEventHandlers } from '@reach/utils/compose-event-handlers';
 
-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
+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
 // https://github.com/reach/reach-ui/issues/464
 
-var SIMULATED_CHANGE = "SIMULATED_CHANGE"; // User is navigating w/ the keyboard
+var INITIAL_CHANGE = "INITIAL_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[SIMULATED_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[INITIAL_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 SIMULATED_CHANGE:
+    case INITIAL_CHANGE:
       return _extends({}, nextState, {
@@ -500,5 +500,10 @@ navigationValue: null,
   // https://github.com/reach/reach-ui/issues/464
-  // https://github.com/reach/reach-ui/issues/755
-  var inputValueChangedRef = useRef(false);
+  var _React$useRef = useRef(controlledValue),
+      initialControlledValue = _React$useRef.current;
 
+  var controlledValueChangedRef = useRef(false);
+  useUpdateEffect(function () {
+    controlledValueChangedRef.current = true;
+  }, [controlledValue]);
+
   var _React$useContext = useContext(ComboboxContext),
@@ -536,4 +541,4 @@ _React$useContext$dat = _React$useContext.data,
       transition(CLEAR);
-    } else if (!inputValueChangedRef.current) {
-      transition(SIMULATED_CHANGE, {
+    } else if (value === initialControlledValue && !controlledValueChangedRef.current) {
+      transition(INITIAL_CHANGE, {
         value: value
@@ -546,3 +551,3 @@ });
     }
-  }, [transition]);
+  }, [initialControlledValue, transition]);
   useEffect(function () {
@@ -555,7 +560,3 @@ // 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
@@ -567,3 +568,2 @@ // user types, instead the developer controls it with the normal input
     var value = event.target.value;
-    inputValueChangedRef.current = true;
 
@@ -570,0 +570,0 @@ if (!isControlled) {

package.json

 {
   "name": "@reach/combobox",
-  "version": "0.16.2",
+  "version": "0.16.3",
   "description": "Accessible React Combobox (Autocomplete).",
@@ -45,3 +45,3 @@ "author": "React Training <[e-mail]>",
   ],
-  "gitHead": "d81d4627145952b415b42537ef6497838567baa2"
+  "gitHead": "692518928d73d885835e6109e4c243dfd5376a1b"
 }

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

139519

increased by0.02%

Lines of code

3589

increased by0.08%

No dependency changes