@reach/combobox - npm Package Compare versions

Comparing version 0.14.0 to 0.15.0

dist/declarations/src/index.d.ts

@@ -21,2 +21,3 @@ /**
 import * as React from "react";
+import type * as Polymorphic from "@reach/utils/polymorphic";
 import type { PopoverProps } from "@reach/popover";
@@ -28,7 +29,7 @@ /**
  */
-export declare const Combobox: import("@reach/utils").ForwardRefExoticComponentWithAs<"div", ComboboxProps>;
+export declare const Combobox: Polymorphic.ForwardRefComponent<"div", ComboboxProps>;
 /**
  * @see Docs https://reach.tech/combobox#combobox-props
  */
-export declare type ComboboxProps = {
+export interface ComboboxProps {
     /**
@@ -61,3 +62,3 @@ * @see Docs https://reach.tech/combobox#combobox-children
     "aria-labelledby"?: string;
-};
+}
 /**
@@ -70,7 +71,7 @@ * ComboboxInput
  */
-export declare const ComboboxInput: import("@reach/utils").ForwardRefExoticComponentWithAs<"input", ComboboxInputProps>;
+export declare const ComboboxInput: Polymorphic.ForwardRefComponent<"input", ComboboxInputProps>;
 /**
  * @see Docs https://reach.tech/combobox#comboboxinput-props
  */
-export declare type ComboboxInputProps = {
+export interface ComboboxInputProps {
     /**
@@ -105,3 +106,3 @@ * If true, when the user clicks inside the text box the current value will
     value?: ComboboxValue;
-};
+}
 /**
@@ -116,7 +117,7 @@ * ComboboxPopover
  */
-export declare const ComboboxPopover: import("@reach/utils").ForwardRefExoticComponentWithAs<"div", ComboboxPopoverProps & Partial<PopoverProps>>;
+export declare const ComboboxPopover: Polymorphic.ForwardRefComponent<"div", ComboboxPopoverProps & Partial<PopoverProps>>;
 /**
  * @see Docs https://reach.tech/combobox#comboboxpopover-props
  */
-export declare type ComboboxPopoverProps = {
+export interface ComboboxPopoverProps {
     /**
@@ -131,3 +132,3 @@ * If you pass `<ComboboxPopover portal={false} />` the popover will not
     portal?: boolean;
-};
+}
 /**
@@ -141,7 +142,7 @@ * ComboboxList
  */
-export declare const ComboboxList: import("@reach/utils").ForwardRefExoticComponentWithAs<"ul", ComboboxListProps>;
+export declare const ComboboxList: Polymorphic.ForwardRefComponent<"ul", ComboboxListProps>;
 /**
  * @see Docs https://reach.tech/combobox#comboboxlist-props
  */
-export declare type ComboboxListProps = {
+export interface ComboboxListProps {
     /**
@@ -161,3 +162,3 @@ * Defaults to false. When true and the list is opened, if an option's value
     persistSelection?: boolean;
-};
+}
 /**
@@ -170,7 +171,7 @@ * ComboboxOption
  */
-export declare const ComboboxOption: import("@reach/utils").ForwardRefExoticComponentWithAs<"li", ComboboxOptionProps>;
+export declare const ComboboxOption: Polymorphic.ForwardRefComponent<"li", ComboboxOptionProps>;
 /**
  * @see Docs https://reach.tech/combobox#comboboxoption-props
  */
-export declare type ComboboxOptionProps = {
+export interface ComboboxOptionProps {
     /**
@@ -197,3 +198,3 @@ * Optional. If omitted, the `value` will be used as the children like as:
     value: string;
-};
+}
 /**
@@ -222,4 +223,5 @@ * ComboboxOptionText
  */
-export declare const ComboboxButton: import("@reach/utils").ForwardRefExoticComponentWithAs<"button", ComboboxButtonProps>;
-export declare type ComboboxButtonProps = {};
+export declare const ComboboxButton: Polymorphic.ForwardRefComponent<"button", ComboboxButtonProps>;
+export interface ComboboxButtonProps {
+}
 /**
@@ -244,3 +246,3 @@ * Escape regexp special characters in `str`
 export declare function useComboboxOptionContext(): ComboboxOptionContextValue;
-export declare type ComboboxContextValue = {
+export interface ComboboxContextValue {
     id: string | undefined;
@@ -250,3 +252,3 @@ isExpanded: boolean;
     state: State;
-};
+}
 interface ComboboxOptionContextValue {
@@ -253,0 +255,0 @@ value: ComboboxValue;

dist/reach-combobox.cjs.dev.js

@@ -7,3 +7,13 @@ 'use strict';
 var PropTypes = require('prop-types');
-var utils = require('@reach/utils');
+var useIsomorphicLayoutEffect = require('@reach/utils/use-isomorphic-layout-effect');
+var ownerDocument = require('@reach/utils/owner-document');
+var context = require('@reach/utils/context');
+var typeCheck = require('@reach/utils/type-check');
+var makeId = require('@reach/utils/make-id');
+var noop = require('@reach/utils/noop');
+var devUtils = require('@reach/utils/dev-utils');
+var composeRefs = require('@reach/utils/compose-refs');
+var useLazyRef = require('@reach/utils/use-lazy-ref');
+var useUpdateEffect = require('@reach/utils/use-update-effect');
+var composeEventHandlers = require('@reach/utils/compose-event-handlers');
 var descendants = require('@reach/descendants');
@@ -187,7 +197,7 @@ var highlightWordsCore = require('highlight-words-core');
 var ComboboxDescendantContext = /*#__PURE__*/descendants.createDescendantContext("ComboboxDescendantContext");
-var ComboboxContext = /*#__PURE__*/utils.createNamedContext("ComboboxContext", {}); // Allows us to put the option's value on context so that ComboboxOptionText
+var ComboboxContext = /*#__PURE__*/context.createNamedContext("ComboboxContext", {}); // 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 = /*#__PURE__*/utils.createNamedContext("OptionContext", {}); ////////////////////////////////////////////////////////////////////////////////
+var OptionContext = /*#__PURE__*/context.createNamedContext("OptionContext", {}); ////////////////////////////////////////////////////////////////////////////////
 
@@ -200,3 +210,3 @@ /**
 
-var Combobox = /*#__PURE__*/utils.forwardRefWithAs(function Combobox(_ref, forwardedRef) {
+var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(_ref, forwardedRef) {
   var _data$navigationValue;
@@ -245,3 +255,3 @@
   var id = autoId.useId(props.id);
-  var listboxId = id ? utils.makeId("listbox", id) : "listbox";
+  var listboxId = id ? makeId.makeId("listbox", id) : "listbox";
   var context = {
@@ -257,3 +267,3 @@ ariaLabel: ariaLabel,
     listboxId: listboxId,
-    onSelect: onSelect || utils.noop,
+    onSelect: onSelect || noop.noop,
     openOnFocus: openOnFocus,
@@ -265,3 +275,3 @@ persistSelectionRef: persistSelectionRef,
   };
-  utils.useCheckStyles("combobox");
+  devUtils.useCheckStyles("combobox");
   return /*#__PURE__*/React.createElement(descendants.DescendantProvider, {
@@ -277,3 +287,3 @@ context: ComboboxDescendantContext,
     ref: forwardedRef
-  }), utils.isFunction(children) ? children({
+  }), typeCheck.isFunction(children) ? children({
     id: id,
@@ -307,3 +317,3 @@ isExpanded: popoverIsExpanded(state),
 
-var ComboboxInput = /*#__PURE__*/utils.forwardRefWithAs(function ComboboxInput(_ref2, forwardedRef) {
+var ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(_ref2, forwardedRef) {
   var _ref2$as = _ref2.as,
@@ -328,3 +338,3 @@ Comp = _ref2$as === void 0 ? "input" : _ref2$as,
   var controlledValueChangedRef = React.useRef(false);
-  utils.useUpdateEffect(function () {
+  useUpdateEffect.useUpdateEffect(function () {
     controlledValueChangedRef.current = true;
@@ -346,5 +356,6 @@ }, [controlledValue]);
       ariaLabel = _React$useContext.ariaLabel,
-      ariaLabelledby = _React$useContext.ariaLabelledby;
+      ariaLabelledby = _React$useContext.ariaLabelledby,
+      persistSelectionRef = _React$useContext.persistSelectionRef;
 
-  var ref = utils.useForkedRef(inputRef, forwardedRef); // Because we close the List on blur, we need to track if the blur is
+  var ref = composeRefs.useComposedRefs(inputRef, forwardedRef); // Because we close the List on blur, we need to track if the blur is
   // caused by clicking inside the list, and if so, don't close the List.
@@ -359,3 +370,3 @@
 
-  utils.useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(function () {
     autocompletePropRef.current = autocomplete;
@@ -405,3 +416,5 @@ }, [autocomplete, autocompletePropRef]);
     if (openOnFocus && lastEventType !== SELECT_WITH_CLICK) {
-      transition(FOCUS);
+      transition(FOCUS, {
+        persistSelection: persistSelectionRef.current
+      });
     }
@@ -432,7 +445,7 @@ }
     ref: ref,
-    onBlur: utils.wrapEvent(onBlur, handleBlur),
-    onChange: utils.wrapEvent(onChange, handleChange),
-    onClick: utils.wrapEvent(onClick, handleClick),
-    onFocus: utils.wrapEvent(onFocus, handleFocus),
-    onKeyDown: utils.wrapEvent(onKeyDown, handleKeyDown),
+    onBlur: composeEventHandlers.composeEventHandlers(onBlur, handleBlur),
+    onChange: composeEventHandlers.composeEventHandlers(onChange, handleChange),
+    onClick: composeEventHandlers.composeEventHandlers(onClick, handleClick),
+    onFocus: composeEventHandlers.composeEventHandlers(onFocus, handleFocus),
+    onKeyDown: composeEventHandlers.composeEventHandlers(onKeyDown, handleKeyDown),
     value: inputValue || ""
@@ -460,3 +473,3 @@ }));
 
-var ComboboxPopover = /*#__PURE__*/utils.forwardRefWithAs(function ComboboxPopover(_ref3, forwardedRef) {
+var ComboboxPopover = /*#__PURE__*/React.forwardRef(function ComboboxPopover(_ref3, forwardedRef) {
   var _ref3$as = _ref3.as,
@@ -479,3 +492,3 @@ Comp = _ref3$as === void 0 ? "div" : _ref3$as,
 
-  var ref = utils.useForkedRef(popoverRef, forwardedRef);
+  var ref = composeRefs.useComposedRefs(popoverRef, forwardedRef);
   var handleKeyDown = useKeyDown();
@@ -486,4 +499,4 @@ var handleBlur = useBlur();
     "data-state": getDataState(state),
-    onKeyDown: utils.wrapEvent(onKeyDown, handleKeyDown),
-    onBlur: utils.wrapEvent(onBlur, handleBlur),
+    onKeyDown: composeEventHandlers.composeEventHandlers(onKeyDown, handleKeyDown),
+    onBlur: composeEventHandlers.composeEventHandlers(onBlur, handleBlur),
     // Instead of conditionally rendering the popover we use the `hidden` prop
@@ -527,3 +540,3 @@ // because we don't want to unmount on close (from escape or onSelect).
  */
-var ComboboxList = /*#__PURE__*/utils.forwardRefWithAs(function ComboboxList(_ref4, forwardedRef) {
+var ComboboxList = /*#__PURE__*/React.forwardRef(function ComboboxList(_ref4, forwardedRef) {
   var _ref4$persistSelectio = _ref4.persistSelection,
@@ -568,3 +581,3 @@ persistSelection = _ref4$persistSelectio === void 0 ? false : _ref4$persistSelectio,
 
-var ComboboxOption = /*#__PURE__*/utils.forwardRefWithAs(function ComboboxOption(_ref5, forwardedRef) {
+var ComboboxOption = /*#__PURE__*/React.forwardRef(function ComboboxOption(_ref5, forwardedRef) {
   var _ref5$as = _ref5.as,
@@ -583,3 +596,3 @@ Comp = _ref5$as === void 0 ? "li" : _ref5$as,
   var ownRef = React.useRef(null);
-  var ref = utils.useForkedRef(forwardedRef, ownRef);
+  var ref = composeRefs.useComposedRefs(forwardedRef, ownRef);
   var index = descendants.useDescendant({
@@ -615,4 +628,4 @@ element: ownRef.current,
     tabIndex: -1,
-    onClick: utils.wrapEvent(onClick, handleClick)
-  }), children ? utils.isFunction(children) ? children({
+    onClick: composeEventHandlers.composeEventHandlers(onClick, handleClick)
+  }), children ? typeCheck.isFunction(children) ? children({
     value: value,
@@ -681,3 +694,3 @@ index: index
 
-var ComboboxButton = /*#__PURE__*/utils.forwardRefWithAs(function ComboboxButton(_ref6, forwardedRef) {
+var ComboboxButton = /*#__PURE__*/React.forwardRef(function ComboboxButton(_ref6, forwardedRef) {
   var _ref6$as = _ref6.as,
@@ -696,3 +709,3 @@ Comp = _ref6$as === void 0 ? "button" : _ref6$as,
 
-  var ref = utils.useForkedRef(buttonRef, forwardedRef);
+  var ref = composeRefs.useComposedRefs(buttonRef, forwardedRef);
   var handleKeyDown = useKeyDown();
@@ -715,4 +728,4 @@
     ref: ref,
-    onClick: utils.wrapEvent(onClick, handleClick),
-    onKeyDown: utils.wrapEvent(onKeyDown, handleKeyDown)
+    onClick: composeEventHandlers.composeEventHandlers(onClick, handleClick),
+    onKeyDown: composeEventHandlers.composeEventHandlers(onKeyDown, handleKeyDown)
   }));
@@ -740,3 +753,3 @@ });
   // Should be safe to use here since we're just focusing an input.
-  utils.useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(function () {
     if (lastEventType === NAVIGATE || lastEventType === ESCAPE || lastEventType === SELECT_WITH_CLICK || lastEventType === OPEN_WITH_BUTTON) {
@@ -927,3 +940,3 @@ inputRef.current.focus();
 
-  var rafIds = utils.useLazyRef(function () {
+  var rafIds = useLazyRef.useLazyRef(function () {
     return new Set();
@@ -940,5 +953,5 @@ });
   return function handleBlur() {
-    var ownerDocument = utils.getOwnerDocument(popoverRef.current);
+    var ownerDocument$1 = ownerDocument.getOwnerDocument(popoverRef.current);
 
-    if (!ownerDocument) {
+    if (!ownerDocument$1) {
       return;
@@ -949,4 +962,4 @@ }
       // we on want to close only if focus propss outside the combobox
-      if (ownerDocument.activeElement !== inputRef.current && ownerDocument.activeElement !== buttonRef.current && popoverRef.current) {
-        if (popoverRef.current.contains(ownerDocument.activeElement)) {
+      if (ownerDocument$1.activeElement !== inputRef.current && ownerDocument$1.activeElement !== buttonRef.current && popoverRef.current) {
+        if (popoverRef.current.contains(ownerDocument$1.activeElement)) {
           // focus landed inside the combobox, keep it open
@@ -953,0 +966,0 @@ if (state !== INTERACTING) {

dist/reach-combobox.cjs.prod.js

@@ -7,3 +7,13 @@ 'use strict';
 require('prop-types');
-var utils = require('@reach/utils');
+var useIsomorphicLayoutEffect = require('@reach/utils/use-isomorphic-layout-effect');
+var ownerDocument = require('@reach/utils/owner-document');
+var context = require('@reach/utils/context');
+var typeCheck = require('@reach/utils/type-check');
+var makeId = require('@reach/utils/make-id');
+var noop = require('@reach/utils/noop');
+var devUtils = require('@reach/utils/dev-utils');
+var composeRefs = require('@reach/utils/compose-refs');
+var useLazyRef = require('@reach/utils/use-lazy-ref');
+var useUpdateEffect = require('@reach/utils/use-update-effect');
+var composeEventHandlers = require('@reach/utils/compose-event-handlers');
 var descendants = require('@reach/descendants');
@@ -183,7 +193,7 @@ var highlightWordsCore = require('highlight-words-core');
 var ComboboxDescendantContext = /*#__PURE__*/descendants.createDescendantContext("ComboboxDescendantContext");
-var ComboboxContext = /*#__PURE__*/utils.createNamedContext("ComboboxContext", {}); // Allows us to put the option's value on context so that ComboboxOptionText
+var ComboboxContext = /*#__PURE__*/context.createNamedContext("ComboboxContext", {}); // 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 = /*#__PURE__*/utils.createNamedContext("OptionContext", {}); ////////////////////////////////////////////////////////////////////////////////
+var OptionContext = /*#__PURE__*/context.createNamedContext("OptionContext", {}); ////////////////////////////////////////////////////////////////////////////////
 
@@ -196,3 +206,3 @@ /**
 
-var Combobox = /*#__PURE__*/utils.forwardRefWithAs(function Combobox(_ref, forwardedRef) {
+var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(_ref, forwardedRef) {
   var _data$navigationValue;
@@ -241,3 +251,3 @@
   var id = autoId.useId(props.id);
-  var listboxId = id ? utils.makeId("listbox", id) : "listbox";
+  var listboxId = id ? makeId.makeId("listbox", id) : "listbox";
   var context = {
@@ -253,3 +263,3 @@ ariaLabel: ariaLabel,
     listboxId: listboxId,
-    onSelect: onSelect || utils.noop,
+    onSelect: onSelect || noop.noop,
     openOnFocus: openOnFocus,
@@ -261,3 +271,3 @@ persistSelectionRef: persistSelectionRef,
   };
-  utils.useCheckStyles("combobox");
+  devUtils.useCheckStyles("combobox");
   return /*#__PURE__*/React.createElement(descendants.DescendantProvider, {
@@ -273,3 +283,3 @@ context: ComboboxDescendantContext,
     ref: forwardedRef
-  }), utils.isFunction(children) ? children({
+  }), typeCheck.isFunction(children) ? children({
     id: id,
@@ -291,3 +301,3 @@ isExpanded: popoverIsExpanded(state),
 
-var ComboboxInput = /*#__PURE__*/utils.forwardRefWithAs(function ComboboxInput(_ref2, forwardedRef) {
+var ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInput(_ref2, forwardedRef) {
   var _ref2$as = _ref2.as,
@@ -312,3 +322,3 @@ Comp = _ref2$as === void 0 ? "input" : _ref2$as,
   var controlledValueChangedRef = React.useRef(false);
-  utils.useUpdateEffect(function () {
+  useUpdateEffect.useUpdateEffect(function () {
     controlledValueChangedRef.current = true;
@@ -330,5 +340,6 @@ }, [controlledValue]);
       ariaLabel = _React$useContext.ariaLabel,
-      ariaLabelledby = _React$useContext.ariaLabelledby;
+      ariaLabelledby = _React$useContext.ariaLabelledby,
+      persistSelectionRef = _React$useContext.persistSelectionRef;
 
-  var ref = utils.useForkedRef(inputRef, forwardedRef); // Because we close the List on blur, we need to track if the blur is
+  var ref = composeRefs.useComposedRefs(inputRef, forwardedRef); // Because we close the List on blur, we need to track if the blur is
   // caused by clicking inside the list, and if so, don't close the List.
@@ -343,3 +354,3 @@
 
-  utils.useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(function () {
     autocompletePropRef.current = autocomplete;
@@ -389,3 +400,5 @@ }, [autocomplete, autocompletePropRef]);
     if (openOnFocus && lastEventType !== SELECT_WITH_CLICK) {
-      transition(FOCUS);
+      transition(FOCUS, {
+        persistSelection: persistSelectionRef.current
+      });
     }
@@ -416,7 +429,7 @@ }
     ref: ref,
-    onBlur: utils.wrapEvent(onBlur, handleBlur),
-    onChange: utils.wrapEvent(onChange, handleChange),
-    onClick: utils.wrapEvent(onClick, handleClick),
-    onFocus: utils.wrapEvent(onFocus, handleFocus),
-    onKeyDown: utils.wrapEvent(onKeyDown, handleKeyDown),
+    onBlur: composeEventHandlers.composeEventHandlers(onBlur, handleBlur),
+    onChange: composeEventHandlers.composeEventHandlers(onChange, handleChange),
+    onClick: composeEventHandlers.composeEventHandlers(onClick, handleClick),
+    onFocus: composeEventHandlers.composeEventHandlers(onFocus, handleFocus),
+    onKeyDown: composeEventHandlers.composeEventHandlers(onKeyDown, handleKeyDown),
     value: inputValue || ""
@@ -437,3 +450,3 @@ }));
 
-var ComboboxPopover = /*#__PURE__*/utils.forwardRefWithAs(function ComboboxPopover(_ref3, forwardedRef) {
+var ComboboxPopover = /*#__PURE__*/React.forwardRef(function ComboboxPopover(_ref3, forwardedRef) {
   var _ref3$as = _ref3.as,
@@ -456,3 +469,3 @@ Comp = _ref3$as === void 0 ? "div" : _ref3$as,
 
-  var ref = utils.useForkedRef(popoverRef, forwardedRef);
+  var ref = composeRefs.useComposedRefs(popoverRef, forwardedRef);
   var handleKeyDown = useKeyDown();
@@ -463,4 +476,4 @@ var handleBlur = useBlur();
     "data-state": getDataState(state),
-    onKeyDown: utils.wrapEvent(onKeyDown, handleKeyDown),
-    onBlur: utils.wrapEvent(onBlur, handleBlur),
+    onKeyDown: composeEventHandlers.composeEventHandlers(onKeyDown, handleKeyDown),
+    onBlur: composeEventHandlers.composeEventHandlers(onBlur, handleBlur),
     // Instead of conditionally rendering the popover we use the `hidden` prop
@@ -500,3 +513,3 @@ // because we don't want to unmount on close (from escape or onSelect).
  */
-var ComboboxList = /*#__PURE__*/utils.forwardRefWithAs(function ComboboxList(_ref4, forwardedRef) {
+var ComboboxList = /*#__PURE__*/React.forwardRef(function ComboboxList(_ref4, forwardedRef) {
   var _ref4$persistSelectio = _ref4.persistSelection,
@@ -534,3 +547,3 @@ persistSelection = _ref4$persistSelectio === void 0 ? false : _ref4$persistSelectio,
 
-var ComboboxOption = /*#__PURE__*/utils.forwardRefWithAs(function ComboboxOption(_ref5, forwardedRef) {
+var ComboboxOption = /*#__PURE__*/React.forwardRef(function ComboboxOption(_ref5, forwardedRef) {
   var _ref5$as = _ref5.as,
@@ -549,3 +562,3 @@ Comp = _ref5$as === void 0 ? "li" : _ref5$as,
   var ownRef = React.useRef(null);
-  var ref = utils.useForkedRef(forwardedRef, ownRef);
+  var ref = composeRefs.useComposedRefs(forwardedRef, ownRef);
   var index = descendants.useDescendant({
@@ -581,4 +594,4 @@ element: ownRef.current,
     tabIndex: -1,
-    onClick: utils.wrapEvent(onClick, handleClick)
-  }), children ? utils.isFunction(children) ? children({
+    onClick: composeEventHandlers.composeEventHandlers(onClick, handleClick)
+  }), children ? typeCheck.isFunction(children) ? children({
     value: value,
@@ -636,3 +649,3 @@ index: index
 
-var ComboboxButton = /*#__PURE__*/utils.forwardRefWithAs(function ComboboxButton(_ref6, forwardedRef) {
+var ComboboxButton = /*#__PURE__*/React.forwardRef(function ComboboxButton(_ref6, forwardedRef) {
   var _ref6$as = _ref6.as,
@@ -651,3 +664,3 @@ Comp = _ref6$as === void 0 ? "button" : _ref6$as,
 
-  var ref = utils.useForkedRef(buttonRef, forwardedRef);
+  var ref = composeRefs.useComposedRefs(buttonRef, forwardedRef);
   var handleKeyDown = useKeyDown();
@@ -670,4 +683,4 @@
     ref: ref,
-    onClick: utils.wrapEvent(onClick, handleClick),
-    onKeyDown: utils.wrapEvent(onKeyDown, handleKeyDown)
+    onClick: composeEventHandlers.composeEventHandlers(onClick, handleClick),
+    onKeyDown: composeEventHandlers.composeEventHandlers(onKeyDown, handleKeyDown)
   }));
@@ -691,3 +704,3 @@ });
   // Should be safe to use here since we're just focusing an input.
-  utils.useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(function () {
     if (lastEventType === NAVIGATE || lastEventType === ESCAPE || lastEventType === SELECT_WITH_CLICK || lastEventType === OPEN_WITH_BUTTON) {
@@ -878,3 +891,3 @@ inputRef.current.focus();
 
-  var rafIds = utils.useLazyRef(function () {
+  var rafIds = useLazyRef.useLazyRef(function () {
     return new Set();
@@ -891,5 +904,5 @@ });
   return function handleBlur() {
-    var ownerDocument = utils.getOwnerDocument(popoverRef.current);
+    var ownerDocument$1 = ownerDocument.getOwnerDocument(popoverRef.current);
 
-    if (!ownerDocument) {
+    if (!ownerDocument$1) {
       return;
@@ -900,4 +913,4 @@ }
       // we on want to close only if focus propss outside the combobox
-      if (ownerDocument.activeElement !== inputRef.current && ownerDocument.activeElement !== buttonRef.current && popoverRef.current) {
-        if (popoverRef.current.contains(ownerDocument.activeElement)) {
+      if (ownerDocument$1.activeElement !== inputRef.current && ownerDocument$1.activeElement !== buttonRef.current && popoverRef.current) {
+        if (popoverRef.current.contains(ownerDocument$1.activeElement)) {
           // focus landed inside the combobox, keep it open
@@ -904,0 +917,0 @@ if (state !== INTERACTING) {

dist/reach-combobox.esm.js

@@ -1,4 +0,14 @@
-import { useRef, createElement, useContext, useCallback, useEffect, useMemo, Fragment, useState, useReducer } from 'react';
+import { forwardRef, useRef, createElement, useContext, useCallback, useEffect, useMemo, Fragment, useState, useReducer } from 'react';
 import PropTypes from 'prop-types';
-import { createNamedContext, forwardRefWithAs, makeId, useCheckStyles, isFunction, useUpdateEffect, useForkedRef, getOwnerDocument, useIsomorphicLayoutEffect, wrapEvent, useLazyRef, noop } from '@reach/utils';
+import { useIsomorphicLayoutEffect } from '@reach/utils/use-isomorphic-layout-effect';
+import { getOwnerDocument } from '@reach/utils/owner-document';
+import { createNamedContext } from '@reach/utils/context';
+import { isFunction } from '@reach/utils/type-check';
+import { makeId } from '@reach/utils/make-id';
+import { noop } from '@reach/utils/noop';
+import { useCheckStyles } from '@reach/utils/dev-utils';
+import { useComposedRefs } from '@reach/utils/compose-refs';
+import { useLazyRef } from '@reach/utils/use-lazy-ref';
+import { useUpdateEffect } from '@reach/utils/use-update-effect';
+import { composeEventHandlers } from '@reach/utils/compose-event-handlers';
 import { createDescendantContext, useDescendantsInit, DescendantProvider, useDescendant, useDescendants } from '@reach/descendants';
@@ -190,3 +200,3 @@ import { findAll } from 'highlight-words-core';
 
-var Combobox = /*#__PURE__*/forwardRefWithAs(function Combobox(_ref, forwardedRef) {
+var Combobox = /*#__PURE__*/forwardRef(function Combobox(_ref, forwardedRef) {
   var _data$navigationValue;
@@ -293,3 +303,3 @@
 
-var ComboboxInput = /*#__PURE__*/forwardRefWithAs(function ComboboxInput(_ref2, forwardedRef) {
+var ComboboxInput = /*#__PURE__*/forwardRef(function ComboboxInput(_ref2, forwardedRef) {
   var _ref2$as = _ref2.as,
@@ -331,5 +341,6 @@ Comp = _ref2$as === void 0 ? "input" : _ref2$as,
       ariaLabel = _React$useContext.ariaLabel,
-      ariaLabelledby = _React$useContext.ariaLabelledby;
+      ariaLabelledby = _React$useContext.ariaLabelledby,
+      persistSelectionRef = _React$useContext.persistSelectionRef;
 
-  var ref = useForkedRef(inputRef, forwardedRef); // Because we close the List on blur, we need to track if the blur is
+  var ref = useComposedRefs(inputRef, forwardedRef); // Because we close the List on blur, we need to track if the blur is
   // caused by clicking inside the list, and if so, don't close the List.
@@ -389,3 +400,5 @@
     if (openOnFocus && lastEventType !== SELECT_WITH_CLICK) {
-      transition(FOCUS);
+      transition(FOCUS, {
+        persistSelection: persistSelectionRef.current
+      });
     }
@@ -416,7 +429,7 @@ }
     ref: ref,
-    onBlur: wrapEvent(onBlur, handleBlur),
-    onChange: wrapEvent(onChange, handleChange),
-    onClick: wrapEvent(onClick, handleClick),
-    onFocus: wrapEvent(onFocus, handleFocus),
-    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
+    onBlur: composeEventHandlers(onBlur, handleBlur),
+    onChange: composeEventHandlers(onChange, handleChange),
+    onClick: composeEventHandlers(onClick, handleClick),
+    onFocus: composeEventHandlers(onFocus, handleFocus),
+    onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),
     value: inputValue || ""
@@ -444,3 +457,3 @@ }));
 
-var ComboboxPopover = /*#__PURE__*/forwardRefWithAs(function ComboboxPopover(_ref3, forwardedRef) {
+var ComboboxPopover = /*#__PURE__*/forwardRef(function ComboboxPopover(_ref3, forwardedRef) {
   var _ref3$as = _ref3.as,
@@ -463,3 +476,3 @@ Comp = _ref3$as === void 0 ? "div" : _ref3$as,
 
-  var ref = useForkedRef(popoverRef, forwardedRef);
+  var ref = useComposedRefs(popoverRef, forwardedRef);
   var handleKeyDown = useKeyDown();
@@ -470,4 +483,4 @@ var handleBlur = useBlur();
     "data-state": getDataState(state),
-    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
-    onBlur: wrapEvent(onBlur, handleBlur),
+    onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),
+    onBlur: composeEventHandlers(onBlur, handleBlur),
     // Instead of conditionally rendering the popover we use the `hidden` prop
@@ -511,3 +524,3 @@ // because we don't want to unmount on close (from escape or onSelect).
  */
-var ComboboxList = /*#__PURE__*/forwardRefWithAs(function ComboboxList(_ref4, forwardedRef) {
+var ComboboxList = /*#__PURE__*/forwardRef(function ComboboxList(_ref4, forwardedRef) {
   var _ref4$persistSelectio = _ref4.persistSelection,
@@ -552,3 +565,3 @@ persistSelection = _ref4$persistSelectio === void 0 ? false : _ref4$persistSelectio,
 
-var ComboboxOption = /*#__PURE__*/forwardRefWithAs(function ComboboxOption(_ref5, forwardedRef) {
+var ComboboxOption = /*#__PURE__*/forwardRef(function ComboboxOption(_ref5, forwardedRef) {
   var _ref5$as = _ref5.as,
@@ -567,3 +580,3 @@ Comp = _ref5$as === void 0 ? "li" : _ref5$as,
   var ownRef = useRef(null);
-  var ref = useForkedRef(forwardedRef, ownRef);
+  var ref = useComposedRefs(forwardedRef, ownRef);
   var index = useDescendant({
@@ -599,3 +612,3 @@ element: ownRef.current,
     tabIndex: -1,
-    onClick: wrapEvent(onClick, handleClick)
+    onClick: composeEventHandlers(onClick, handleClick)
   }), children ? isFunction(children) ? children({
@@ -665,3 +678,3 @@ value: value,
 
-var ComboboxButton = /*#__PURE__*/forwardRefWithAs(function ComboboxButton(_ref6, forwardedRef) {
+var ComboboxButton = /*#__PURE__*/forwardRef(function ComboboxButton(_ref6, forwardedRef) {
   var _ref6$as = _ref6.as,
@@ -680,3 +693,3 @@ Comp = _ref6$as === void 0 ? "button" : _ref6$as,
 
-  var ref = useForkedRef(buttonRef, forwardedRef);
+  var ref = useComposedRefs(buttonRef, forwardedRef);
   var handleKeyDown = useKeyDown();
@@ -699,4 +712,4 @@
     ref: ref,
-    onClick: wrapEvent(onClick, handleClick),
-    onKeyDown: wrapEvent(onKeyDown, handleKeyDown)
+    onClick: composeEventHandlers(onClick, handleClick),
+    onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown)
   }));
@@ -703,0 +716,0 @@ });

package.json

 {
   "name": "@reach/combobox",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Accessible React Combobox (Autocomplete).",
   "author": "React Training <[e-mail]>",
   "license": "MIT",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "repository": {
@@ -14,7 +16,7 @@ "type": "git",
   "dependencies": {
-    "@reach/auto-id": "0.14.0",
-    "@reach/descendants": "0.14.0",
-    "@reach/popover": "0.14.0",
-    "@reach/portal": "0.14.0",
-    "@reach/utils": "0.14.0",
+    "@reach/auto-id": "0.15.0",
+    "@reach/descendants": "0.15.0",
+    "@reach/popover": "0.15.0",
+    "@reach/portal": "0.15.0",
+    "@reach/utils": "0.15.0",
     "highlight-words-core": "1.2.2",
@@ -25,4 +27,4 @@ "prop-types": "^15.7.2",
   "devDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
@@ -45,3 +47,3 @@ "peerDependencies": {
   ],
-  "gitHead": "80f6ca5f8d25a10887e2bd34d60094402b9bc0a7"
+  "gitHead": "1449650359c119c1afe25973aa7584e09e2c88bc"
 }

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

120467

increased by2.33%

Lines of code

3030

increased by1.37%

Dependency changes

• + Added@reach/auto-id@0.15.0(transitive)

• + Added@reach/descendants@0.15.0(transitive)

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

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

• + Added@reach/rect@0.15.0(transitive)

• + Added@reach/utils@0.15.0(transitive)

• + Addedtiny-warning@1.0.3(transitive)

• - Removed@reach/auto-id@0.14.0(transitive)

• - Removed@reach/descendants@0.14.0(transitive)

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

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

• - Removed@reach/rect@0.14.0(transitive)

• - Removed@reach/utils@0.14.0(transitive)

• - Removed@types/warning@3.0.3(transitive)

• - Removedwarning@4.0.3(transitive)

• Updated@reach/auto-id@0.15.0

• Updated@reach/descendants@0.15.0

• Updated@reach/popover@0.15.0

• Updated@reach/portal@0.15.0

• Updated@reach/utils@0.15.0