@reach/combobox - npm Package Compare versions

Comparing version 0.6.1 to 0.6.2

es/index.js

@@ -33,3 +33,3 @@ var _on, _on2, _on3, _on4, _states;
 var INTERACTING = "INTERACTING"; ////////////////////////////////////////////////////////////////////////////////
-// Actions:
+// Actions
 // User cleared the value w/ backspace, but input still has focus
@@ -144,7 +144,11 @@
   }
-}; ////////////////////////////////////////////////////////////////////////////////
+};
+
+var ComboboxContext = createContext(); // Allows us to put the option's value on context so that ComboboxOptionText
+// can work it's highlight text magic no matter what else is rendered around
+// it.
+
+var OptionContext = createContext(); ////////////////////////////////////////////////////////////////////////////////
 // Combobox
 
-
-var Context = createContext();
 export var Combobox = forwardRef(function Combobox(_ref, forwardedRef) {
@@ -194,20 +198,18 @@ var onSelect = _ref.onSelect,
   var listboxId = makeId("listbox", id);
-  var context = useMemo(function () {
-    return {
-      data: data,
-      inputRef: inputRef,
-      popoverRef: popoverRef,
-      buttonRef: buttonRef,
-      onSelect: onSelect,
-      optionsRef: optionsRef,
-      state: state,
-      transition: transition,
-      listboxId: listboxId,
-      autocompletePropRef: autocompletePropRef,
-      persistSelectionRef: persistSelectionRef,
-      isVisible: isVisible(state),
-      openOnFocus: openOnFocus
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data, onSelect, state, transition, listboxId]);
-  return React.createElement(Context.Provider, {
+  var context = {
+    data: data,
+    inputRef: inputRef,
+    popoverRef: popoverRef,
+    buttonRef: buttonRef,
+    onSelect: onSelect,
+    optionsRef: optionsRef,
+    state: state,
+    transition: transition,
+    listboxId: listboxId,
+    autocompletePropRef: autocompletePropRef,
+    persistSelectionRef: persistSelectionRef,
+    isVisible: isVisible(state),
+    openOnFocus: openOnFocus
+  };
+  return React.createElement(ComboboxContext.Provider, {
     value: context
@@ -223,2 +225,3 @@ }, React.createElement(Comp, _extends({}, rest, {
 });
+Combobox.displayName = "Combobox";
 
@@ -248,3 +251,3 @@ if (process.env.NODE_ENV !== "production") {
 
-  var _useContext = useContext(Context),
+  var _useContext = useContext(ComboboxContext),
       _useContext$data = _useContext.data,
@@ -333,3 +336,4 @@ navigationValue = _useContext$data.navigationValue,
   }));
-}); ////////////////////////////////////////////////////////////////////////////////
+});
+ComboboxInput.displayName = "ComboboxInput"; ////////////////////////////////////////////////////////////////////////////////
 // ComboboxPopover
@@ -344,3 +348,3 @@
 
-  var _useContext2 = useContext(Context),
+  var _useContext2 = useContext(ComboboxContext),
       popoverRef = _useContext2.popoverRef,
@@ -377,3 +381,4 @@ inputRef = _useContext2.inputRef,
   }));
-}); ////////////////////////////////////////////////////////////////////////////////
+});
+ComboboxPopover.displayName = "ComboboxPopover"; ////////////////////////////////////////////////////////////////////////////////
 // ComboboxList
@@ -388,3 +393,3 @@
 
-  var _useContext3 = useContext(Context),
+  var _useContext3 = useContext(ComboboxContext),
       optionsRef = _useContext3.optionsRef,
@@ -412,9 +417,6 @@ persistSelectionRef = _useContext3.persistSelectionRef;
   }));
-}); ////////////////////////////////////////////////////////////////////////////////
+});
+ComboboxList.displayName = "ComboboxList"; ////////////////////////////////////////////////////////////////////////////////
 // ComboboxOption
-// Allows us to put the option's value on context so that ComboboxOptionText
-// can work it's highlight text magic no matter what else is rendered around
-// it.
 
-var OptionContext = createContext();
 export var ComboboxOption = forwardRef(function ComboboxOption(_ref5, forwardedRef) {
@@ -426,3 +428,3 @@ var children = _ref5.children,
 
-  var _useContext4 = useContext(Context),
+  var _useContext4 = useContext(ComboboxContext),
       onSelect = _useContext4.onSelect,
@@ -461,3 +463,4 @@ navigationValue = _useContext4.data.navigationValue,
   })));
-}); ////////////////////////////////////////////////////////////////////////////////
+});
+ComboboxOption.displayName = "ComboboxOption"; ////////////////////////////////////////////////////////////////////////////////
 // ComboboxOptionText
@@ -470,3 +473,3 @@ // We don't forwardRef or spread props because we render multiple spans or null,
 
-  var _useContext5 = useContext(Context),
+  var _useContext5 = useContext(ComboboxContext),
       contextValue = _useContext5.data.value;
@@ -488,3 +491,4 @@
   }) : value;
-} ////////////////////////////////////////////////////////////////////////////////
+}
+ComboboxOptionText.displayName = "ComboboxOptionText"; ////////////////////////////////////////////////////////////////////////////////
 // ComboboxButton
@@ -499,3 +503,3 @@
 
-  var _useContext6 = useContext(Context),
+  var _useContext6 = useContext(ComboboxContext),
       transition = _useContext6.transition,
@@ -527,3 +531,4 @@ state = _useContext6.state,
   }, props));
-}); ////////////////////////////////////////////////////////////////////////////////
+});
+ComboboxButton.displayName = "ComboboxButton"; ////////////////////////////////////////////////////////////////////////////////
 // The rest is all implementation details
@@ -548,3 +553,3 @@ // Move focus back to the input if we start navigating w/ the
 function useKeyDown() {
-  var _useContext7 = useContext(Context),
+  var _useContext7 = useContext(ComboboxContext),
       navigationValue = _useContext7.data.navigationValue,
@@ -684,3 +689,3 @@ onSelect = _useContext7.onSelect,
 function useBlur() {
-  var _useContext8 = useContext(Context),
+  var _useContext8 = useContext(ComboboxContext),
       state = _useContext8.state,
@@ -687,0 +692,0 @@ transition = _useContext8.transition,

index.js

@@ -44,3 +44,3 @@ "use strict";
 var INTERACTING = "INTERACTING"; ////////////////////////////////////////////////////////////////////////////////
-// Actions:
+// Actions
 // User cleared the value w/ backspace, but input still has focus
@@ -155,7 +155,11 @@
   }
-}; ////////////////////////////////////////////////////////////////////////////////
+};
+
+var ComboboxContext = (0, _react.createContext)(); // Allows us to put the option's value on context so that ComboboxOptionText
+// can work it's highlight text magic no matter what else is rendered around
+// it.
+
+var OptionContext = (0, _react.createContext)(); ////////////////////////////////////////////////////////////////////////////////
 // Combobox
 
-
-var Context = (0, _react.createContext)();
 var Combobox = (0, _react.forwardRef)(function Combobox(_ref, forwardedRef) {
@@ -205,20 +209,18 @@ var onSelect = _ref.onSelect,
   var listboxId = (0, _utils.makeId)("listbox", id);
-  var context = (0, _react.useMemo)(function () {
-    return {
-      data: data,
-      inputRef: inputRef,
-      popoverRef: popoverRef,
-      buttonRef: buttonRef,
-      onSelect: onSelect,
-      optionsRef: optionsRef,
-      state: state,
-      transition: transition,
-      listboxId: listboxId,
-      autocompletePropRef: autocompletePropRef,
-      persistSelectionRef: persistSelectionRef,
-      isVisible: isVisible(state),
-      openOnFocus: openOnFocus
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data, onSelect, state, transition, listboxId]);
-  return _react["default"].createElement(Context.Provider, {
+  var context = {
+    data: data,
+    inputRef: inputRef,
+    popoverRef: popoverRef,
+    buttonRef: buttonRef,
+    onSelect: onSelect,
+    optionsRef: optionsRef,
+    state: state,
+    transition: transition,
+    listboxId: listboxId,
+    autocompletePropRef: autocompletePropRef,
+    persistSelectionRef: persistSelectionRef,
+    isVisible: isVisible(state),
+    openOnFocus: openOnFocus
+  };
+  return _react["default"].createElement(ComboboxContext.Provider, {
     value: context
@@ -235,2 +237,3 @@ }, _react["default"].createElement(Comp, _extends({}, rest, {
 exports.Combobox = Combobox;
+Combobox.displayName = "Combobox";
 
@@ -260,3 +263,3 @@ if (process.env.NODE_ENV !== "production") {
 
-  var _useContext = (0, _react.useContext)(Context),
+  var _useContext = (0, _react.useContext)(ComboboxContext),
       _useContext$data = _useContext.data,
@@ -345,6 +348,7 @@ navigationValue = _useContext$data.navigationValue,
   }));
-}); ////////////////////////////////////////////////////////////////////////////////
+});
+exports.ComboboxInput = ComboboxInput;
+ComboboxInput.displayName = "ComboboxInput"; ////////////////////////////////////////////////////////////////////////////////
 // ComboboxPopover
 
-exports.ComboboxInput = ComboboxInput;
 var ComboboxPopover = (0, _react.forwardRef)(function ComboboxPopover(_ref3, forwardedRef) {
@@ -357,3 +361,3 @@ var _ref3$portal = _ref3.portal,
 
-  var _useContext2 = (0, _react.useContext)(Context),
+  var _useContext2 = (0, _react.useContext)(ComboboxContext),
       popoverRef = _useContext2.popoverRef,
@@ -390,6 +394,7 @@ inputRef = _useContext2.inputRef,
   }));
-}); ////////////////////////////////////////////////////////////////////////////////
+});
+exports.ComboboxPopover = ComboboxPopover;
+ComboboxPopover.displayName = "ComboboxPopover"; ////////////////////////////////////////////////////////////////////////////////
 // ComboboxList
 
-exports.ComboboxPopover = ComboboxPopover;
 var ComboboxList = (0, _react.forwardRef)(function ComboboxList(_ref4, forwardedRef) {
@@ -402,3 +407,3 @@ var _ref4$persistSelectio = _ref4.persistSelection,
 
-  var _useContext3 = (0, _react.useContext)(Context),
+  var _useContext3 = (0, _react.useContext)(ComboboxContext),
       optionsRef = _useContext3.optionsRef,
@@ -426,10 +431,7 @@ persistSelectionRef = _useContext3.persistSelectionRef;
   }));
-}); ////////////////////////////////////////////////////////////////////////////////
+});
+exports.ComboboxList = ComboboxList;
+ComboboxList.displayName = "ComboboxList"; ////////////////////////////////////////////////////////////////////////////////
 // ComboboxOption
-// Allows us to put the option's value on context so that ComboboxOptionText
-// can work it's highlight text magic no matter what else is rendered around
-// it.
 
-exports.ComboboxList = ComboboxList;
-var OptionContext = (0, _react.createContext)();
 var ComboboxOption = (0, _react.forwardRef)(function ComboboxOption(_ref5, forwardedRef) {
@@ -441,3 +443,3 @@ var children = _ref5.children,
 
-  var _useContext4 = (0, _react.useContext)(Context),
+  var _useContext4 = (0, _react.useContext)(ComboboxContext),
       onSelect = _useContext4.onSelect,
@@ -476,3 +478,5 @@ navigationValue = _useContext4.data.navigationValue,
   })));
-}); ////////////////////////////////////////////////////////////////////////////////
+});
+exports.ComboboxOption = ComboboxOption;
+ComboboxOption.displayName = "ComboboxOption"; ////////////////////////////////////////////////////////////////////////////////
 // ComboboxOptionText
@@ -482,8 +486,6 @@ // We don't forwardRef or spread props because we render multiple spans or null,
 
-exports.ComboboxOption = ComboboxOption;
-
 function ComboboxOptionText() {
   var value = (0, _react.useContext)(OptionContext);
 
-  var _useContext5 = (0, _react.useContext)(Context),
+  var _useContext5 = (0, _react.useContext)(ComboboxContext),
       contextValue = _useContext5.data.value;
@@ -505,6 +507,7 @@
   }) : value;
-} ////////////////////////////////////////////////////////////////////////////////
+}
+
+ComboboxOptionText.displayName = "ComboboxOptionText"; ////////////////////////////////////////////////////////////////////////////////
 // ComboboxButton
 
-
 var ComboboxButton = (0, _react.forwardRef)(function ComboboxButton(_ref6, forwardedRef) {
@@ -517,3 +520,3 @@ var _ref6$as = _ref6.as,
 
-  var _useContext6 = (0, _react.useContext)(Context),
+  var _useContext6 = (0, _react.useContext)(ComboboxContext),
       transition = _useContext6.transition,
@@ -545,3 +548,5 @@ state = _useContext6.state,
   }, props));
-}); ////////////////////////////////////////////////////////////////////////////////
+});
+exports.ComboboxButton = ComboboxButton;
+ComboboxButton.displayName = "ComboboxButton"; ////////////////////////////////////////////////////////////////////////////////
 // The rest is all implementation details
@@ -552,4 +557,2 @@ // Move focus back to the input if we start navigating w/ the
 
-exports.ComboboxButton = ComboboxButton;
-
 function useFocusManagement(lastActionType, inputRef) {
@@ -569,3 +572,3 @@ // useLayoutEffect so that the cursor goes to the end of the input instead
 function useKeyDown() {
-  var _useContext7 = (0, _react.useContext)(Context),
+  var _useContext7 = (0, _react.useContext)(ComboboxContext),
       navigationValue = _useContext7.data.navigationValue,
@@ -705,3 +708,3 @@ onSelect = _useContext7.onSelect,
 function useBlur() {
-  var _useContext8 = (0, _react.useContext)(Context),
+  var _useContext8 = (0, _react.useContext)(ComboboxContext),
       state = _useContext8.state,
@@ -708,0 +711,0 @@ transition = _useContext8.transition,

package.json

 {
   "name": "@reach/combobox",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Accessible React Combobox (Autocomplete).",
@@ -14,4 +14,4 @@ "author": "React Training <[e-mail]>",
     "@reach/auto-id": "^0.6.1",
-    "@reach/popover": "^0.6.1",
-    "@reach/portal": "^0.6.1",
+    "@reach/popover": "^0.6.2",
+    "@reach/portal": "^0.6.2",
     "@reach/utils": "^0.6.1",
@@ -26,8 +26,2 @@ "escape-regexp": "0.0.1",
   },
-  "devDependencies": {
-    "match-sorter": "^2.3.0",
-    "react": "^16.11.0",
-    "react-test-renderer": "^16.11.0",
-    "use-throttle": "^0.0.3"
-  },
   "files": [
@@ -41,3 +35,3 @@ "es",
   ],
-  "gitHead": "c1e249448a3672ccc65698218f0f38ef9814ab90"
+  "gitHead": "00e73c5da6d25f50194612f74de71156fde2a80a"
 }

src/index.js

@@ -47,3 +47,3 @@ /* eslint-disable default-case */
 ////////////////////////////////////////////////////////////////////////////////
-// Actions:
+// Actions
 
@@ -202,7 +202,12 @@ // User cleared the value w/ backspace, but input still has focus
 
+const ComboboxContext = createContext();
+
+// Allows us to put the option's value on context so that ComboboxOptionText
+// can work it's highlight text magic no matter what else is rendered around
+// it.
+const OptionContext = createContext();
+
 ////////////////////////////////////////////////////////////////////////////////
 // Combobox
 
-const Context = createContext();
-
 export const Combobox = forwardRef(function Combobox(
@@ -267,23 +272,20 @@ {
 
-  const context = useMemo(() => {
-    return {
-      data,
-      inputRef,
-      popoverRef,
-      buttonRef,
-      onSelect,
-      optionsRef,
-      state,
-      transition,
-      listboxId,
-      autocompletePropRef,
-      persistSelectionRef,
-      isVisible: isVisible(state),
-      openOnFocus
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data, onSelect, state, transition, listboxId]);
+  const context = {
+    data,
+    inputRef,
+    popoverRef,
+    buttonRef,
+    onSelect,
+    optionsRef,
+    state,
+    transition,
+    listboxId,
+    autocompletePropRef,
+    persistSelectionRef,
+    isVisible: isVisible(state),
+    openOnFocus
+  };
 
   return (
-    <Context.Provider value={context}>
+    <ComboboxContext.Provider value={context}>
       <Comp
@@ -300,6 +302,7 @@ {...rest}
       </Comp>
-    </Context.Provider>
+    </ComboboxContext.Provider>
   );
 });
 
+Combobox.displayName = "Combobox";
 if (__DEV__) {
@@ -345,3 +348,3 @@ Combobox.propTypes = {
     openOnFocus
-  } = useContext(Context);
+  } = useContext(ComboboxContext);
 
@@ -435,2 +438,4 @@ const ref = useForkedRef(inputRef, forwardedRef);
 
+ComboboxInput.displayName = "ComboboxInput";
+
 ////////////////////////////////////////////////////////////////////////////////
@@ -452,3 +457,3 @@ // ComboboxPopover
 ) {
-  const { popoverRef, inputRef, isVisible } = useContext(Context);
+  const { popoverRef, inputRef, isVisible } = useContext(ComboboxContext);
   const ref = useForkedRef(popoverRef, forwardedRef);
@@ -492,2 +497,4 @@ const handleKeyDown = useKeyDown();
 
+ComboboxPopover.displayName = "ComboboxPopover";
+
 ////////////////////////////////////////////////////////////////////////////////
@@ -506,3 +513,3 @@ // ComboboxList
 ) {
-  const { optionsRef, persistSelectionRef } = useContext(Context);
+  const { optionsRef, persistSelectionRef } = useContext(ComboboxContext);
 
@@ -532,10 +539,7 @@ if (persistSelection) {
 
+ComboboxList.displayName = "ComboboxList";
+
 ////////////////////////////////////////////////////////////////////////////////
 // ComboboxOption
 
-// Allows us to put the option's value on context so that ComboboxOptionText
-// can work it's highlight text magic no matter what else is rendered around
-// it.
-const OptionContext = createContext();
-
 export const ComboboxOption = forwardRef(function ComboboxOption(
@@ -550,3 +554,3 @@ { children, value, onClick, ...props },
     optionsRef
-  } = useContext(Context);
+  } = useContext(ComboboxContext);
 
@@ -585,2 +589,4 @@ useEffect(() => {
 
+ComboboxOption.displayName = "ComboboxOption";
+
 ////////////////////////////////////////////////////////////////////////////////
@@ -595,3 +601,3 @@ // ComboboxOptionText
     data: { value: contextValue }
-  } = useContext(Context);
+  } = useContext(ComboboxContext);
 
@@ -623,4 +629,7 @@ const results = useMemo(
 
+ComboboxOptionText.displayName = "ComboboxOptionText";
+
 ////////////////////////////////////////////////////////////////////////////////
 // ComboboxButton
+
 export const ComboboxButton = forwardRef(function ComboboxButton(
@@ -631,3 +640,3 @@ { as: Comp = "button", onClick, onKeyDown, ...props },
   const { transition, state, buttonRef, listboxId, isVisible } = useContext(
-    Context
+    ComboboxContext
   );
@@ -660,2 +669,4 @@ const ref = useForkedRef(buttonRef, forwardedRef);
 
+ComboboxButton.displayName = "ComboboxButton";
+
 ////////////////////////////////////////////////////////////////////////////////
@@ -694,3 +705,3 @@ // The rest is all implementation details
     persistSelectionRef
-  } = useContext(Context);
+  } = useContext(ComboboxContext);
 
@@ -799,3 +810,3 @@ return function handleKeyDown(event) {
   const { state, transition, popoverRef, inputRef, buttonRef } = useContext(
-    Context
+    ComboboxContext
   );
@@ -802,0 +813,0 @@

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

92537

increased by0.59%

Dev dependency count

0

decreased by-100%

Lines of code

2274

increased by0.53%

Dependency changes

• Updated@reach/popover@^0.6.2

• Updated@reach/portal@^0.6.2