@reach/listbox - npm Package Compare versions

Comparing version 0.14.0 to 0.15.0

dist/declarations/src/index.d.ts

@@ -27,2 +27,3 @@ /**
 import * as React from "react";
+import type * as Polymorphic from "@reach/utils/polymorphic";
 import type { Descendant } from "@reach/descendants";
@@ -38,3 +39,3 @@ import type { ListboxNodeRefs } from "./machine";
  */
-declare const ListboxInput: import("@reach/utils").ForwardRefExoticComponentWithAs<"div", Pick<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "form" | "name" | "required"> & {
+declare const ListboxInput: Polymorphic.ForwardRefComponent<"div", Pick<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "form" | "name" | "required"> & {
     /**
@@ -47,5 +48,5 @@ * The composed listbox expects to receive `ListboxButton` and
      */
-    children: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | ((props: ListboxContextValue & {
+    children: React.ReactNode | ((props: ListboxContextValue & {
         expanded: boolean;
-    }) => React.ReactNode) | null | undefined;
+    }) => React.ReactNode);
     /**
@@ -77,3 +78,3 @@ * The default value of an uncontrolled listbox.
 } & {
-    _componentName?: string | undefined;
+    __componentName?: string | undefined;
 }>;
@@ -134,3 +135,3 @@ /**
  */
-declare const Listbox: import("@reach/utils").ForwardRefExoticComponentWithAs<"div", ListboxProps>;
+declare const Listbox: Polymorphic.ForwardRefComponent<"div", ListboxProps>;
 /**
@@ -166,7 +167,7 @@ * @see Docs https://reach.tech/listbox#listbox-props
 };
-declare const ListboxButton: import("@reach/utils").MemoExoticComponentWithAs<"span", ListboxButtonProps>;
+declare const ListboxButton: Polymorphic.MemoComponent<"span", ListboxButtonProps>;
 /**
  * @see Docs https://reach.tech/listbox#listboxbutton-props
  */
-declare type ListboxButtonProps = {
+interface ListboxButtonProps {
     /**
@@ -224,8 +225,8 @@ * Renders a text string or React node to represent an arrow inside the
     }) => React.ReactNode);
-};
-declare const ListboxArrow: import("@reach/utils").MemoExoticComponentWithAs<"span", ListboxArrowProps>;
+}
+declare const ListboxArrow: Polymorphic.MemoComponent<"span", ListboxArrowProps>;
 /**
  * @see Docs https://reach.tech/listbox#listboxarrow-props
  */
-declare type ListboxArrowProps = {
+interface ListboxArrowProps {
     /**
@@ -239,8 +240,8 @@ * Children to render as the listbox button's arrow. This can be a render
     }) => React.ReactNode);
-};
-declare const ListboxPopover: import("@reach/utils").MemoExoticComponentWithAs<"div", ListboxPopoverProps>;
+}
+declare const ListboxPopover: Polymorphic.MemoComponent<"div", ListboxPopoverProps>;
 /**
  * @see Docs https://reach.tech/listbox#listboxpopover-props
  */
-declare type ListboxPopoverProps = {
+interface ListboxPopoverProps {
     /**
@@ -266,3 +267,3 @@ * `ListboxPopover` expects to receive `ListboxList` as its children.
     unstable_observableRefs?: PopoverProps["unstable_observableRefs"];
-};
+}
 /**
@@ -275,7 +276,8 @@ * ListboxList
  */
-declare const ListboxList: import("@reach/utils").ForwardRefExoticComponentWithAs<"ul", ListboxListProps>;
+declare const ListboxList: Polymorphic.ForwardRefComponent<"ul", ListboxListProps>;
 /**
  * @see Docs https://reach.tech/listbox#listboxlist-props
  */
-declare type ListboxListProps = {};
+interface ListboxListProps {
+}
 /**
@@ -288,7 +290,7 @@ * ListboxOption
  */
-declare const ListboxOption: import("@reach/utils").ForwardRefExoticComponentWithAs<"li", ListboxOptionProps>;
+declare const ListboxOption: Polymorphic.ForwardRefComponent<"li", ListboxOptionProps>;
 /**
  * @see Docs https://reach.tech/listbox#listboxoption-props
  */
-declare type ListboxOptionProps = {
+interface ListboxOptionProps {
     /**
@@ -317,3 +319,3 @@ * The option's value. This will be passed into a hidden input field for use
     disabled?: boolean;
-};
+}
 /**
@@ -326,7 +328,7 @@ * ListboxGroup
  */
-declare const ListboxGroup: import("@reach/utils").ForwardRefExoticComponentWithAs<"div", ListboxGroupProps>;
+declare const ListboxGroup: Polymorphic.ForwardRefComponent<"div", ListboxGroupProps>;
 /**
  * @see Docs https://reach.tech/listbox#listboxgroup-props
  */
-declare type ListboxGroupProps = {
+interface ListboxGroupProps {
     /**
@@ -340,3 +342,3 @@ * The text label to use for the listbox group. This can be omitted if a
     label?: React.ReactNode;
-};
+}
 /**
@@ -347,7 +349,8 @@ * ListboxGroupLabel
  */
-declare const ListboxGroupLabel: import("@reach/utils").ForwardRefExoticComponentWithAs<"span", ListboxGroupLabelProps>;
+declare const ListboxGroupLabel: Polymorphic.ForwardRefComponent<"span", ListboxGroupLabelProps>;
 /**
  * @see Docs https://reach.tech/listbox#listboxgroup-props
  */
-declare type ListboxGroupLabelProps = {};
+interface ListboxGroupLabelProps {
+}
 /**
@@ -365,3 +368,3 @@ * A hook that exposes data for a given `Listbox` component to its descendants.
 };
-declare type ListboxContextValue = {
+interface ListboxContextValue {
     id: string | undefined;
@@ -373,4 +376,4 @@ isExpanded: boolean;
     valueLabel: string | null;
-};
+}
 export type { ListboxArrowProps, ListboxButtonProps, ListboxContextValue, ListboxDescendant, ListboxGroupLabelProps, ListboxGroupProps, ListboxInputProps, ListboxListProps, ListboxOptionProps, ListboxPopoverProps, ListboxProps, ListboxValue, };
 export { Listbox, ListboxArrow, ListboxButton, ListboxGroup, ListboxGroupLabel, ListboxInput, ListboxList, ListboxOption, ListboxPopover, useListboxContext, };

dist/reach-listbox.cjs.prod.js

@@ -10,4 +10,13 @@ 'use strict';
 var descendants = require('@reach/descendants');
-var utils = require('@reach/utils');
+var isRightClick = require('@reach/utils/is-right-click');
+var useStableCallback = require('@reach/utils/use-stable-callback');
+var useIsomorphicLayoutEffect = require('@reach/utils/use-isomorphic-layout-effect');
+var context = require('@reach/utils/context');
+var typeCheck = require('@reach/utils/type-check');
+var makeId = require('@reach/utils/make-id');
+var devUtils = require('@reach/utils/dev-utils');
+var composeRefs = require('@reach/utils/compose-refs');
+var composeEventHandlers = require('@reach/utils/compose-event-handlers');
 var machine = require('@reach/machine');
+var ownerDocument = require('@reach/utils/owner-document');
 
@@ -134,4 +143,4 @@ function _extends() {
     var relatedTarget = event.relatedTarget;
-    var ownerDocument = utils.getOwnerDocument(popover);
-    return !!((ownerDocument == null ? void 0 : ownerDocument.activeElement) !== list && popover && !popover.contains(relatedTarget || (ownerDocument == null ? void 0 : ownerDocument.activeElement)));
+    var ownerDocument$1 = ownerDocument.getOwnerDocument(popover);
+    return !!((ownerDocument$1 == null ? void 0 : ownerDocument$1.activeElement) !== list && popover && !popover.contains(relatedTarget || (ownerDocument$1 == null ? void 0 : ownerDocument$1.activeElement)));
   }
@@ -300,3 +309,3 @@
 var createMachineDefinition = function createMachineDefinition(_ref) {
-  var _default2, _default3, _default4, _default5, _default6, _states;
+  var _extends2, _extends3, _extends4, _extends5, _extends6, _states;
 
@@ -314,42 +323,42 @@ var value = _ref.value;
     states: (_states = {}, _states[ListboxStates.Idle] = {
-      on: _extends({}, commonEvents, (_default2 = {}, _default2[ListboxEvents.ButtonMouseDown] = {
+      on: _extends({}, commonEvents, (_extends2 = {}, _extends2[ListboxEvents.ButtonMouseDown] = {
         target: ListboxStates.Open,
         actions: [navigateFromCurrentValue],
         cond: listboxIsNotDisabled
-      }, _default2[ListboxEvents.KeyDownSpace] = {
+      }, _extends2[ListboxEvents.KeyDownSpace] = {
         target: ListboxStates.Navigating,
         actions: [navigateFromCurrentValue, focusList],
         cond: listboxIsNotDisabled
-      }, _default2[ListboxEvents.KeyDownSearch] = {
+      }, _extends2[ListboxEvents.KeyDownSearch] = {
         target: ListboxStates.Idle,
         actions: setTypeahead,
         cond: listboxIsNotDisabled
-      }, _default2[ListboxEvents.UpdateAfterTypeahead] = {
+      }, _extends2[ListboxEvents.UpdateAfterTypeahead] = {
         target: ListboxStates.Idle,
         actions: [setValueFromTypeahead],
         cond: listboxIsNotDisabled
-      }, _default2[ListboxEvents.ClearTypeahead] = {
+      }, _extends2[ListboxEvents.ClearTypeahead] = {
         target: ListboxStates.Idle,
         actions: clearTypeahead
-      }, _default2[ListboxEvents.KeyDownNavigate] = {
+      }, _extends2[ListboxEvents.KeyDownNavigate] = {
         target: ListboxStates.Navigating,
         actions: [navigateFromCurrentValue, clearTypeahead, focusList],
         cond: listboxIsNotDisabled
-      }, _default2[ListboxEvents.KeyDownEnter] = {
+      }, _extends2[ListboxEvents.KeyDownEnter] = {
         actions: [submitForm],
         cond: listboxIsNotDisabled
-      }, _default2))
+      }, _extends2))
     }, _states[ListboxStates.Interacting] = {
       entry: [clearNavigationValue],
-      on: _extends({}, commonEvents, (_default3 = {}, _default3[ListboxEvents.ClearNavSelection] = {
+      on: _extends({}, commonEvents, (_extends3 = {}, _extends3[ListboxEvents.ClearNavSelection] = {
         actions: [clearNavigationValue, focusList]
-      }, _default3[ListboxEvents.KeyDownEnter] = {
+      }, _extends3[ListboxEvents.KeyDownEnter] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default3[ListboxEvents.KeyDownSpace] = {
+      }, _extends3[ListboxEvents.KeyDownSpace] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default3[ListboxEvents.ButtonMouseDown] = {
+      }, _extends3[ListboxEvents.ButtonMouseDown] = {
         target: ListboxStates.Idle,
@@ -365,8 +374,8 @@ // When the user triggers a mouseDown event on the button, we call
         actions: [focusButton]
-      }, _default3[ListboxEvents.KeyDownEscape] = {
+      }, _extends3[ListboxEvents.KeyDownEscape] = {
         target: ListboxStates.Idle,
         actions: [focusButton]
-      }, _default3[ListboxEvents.OptionMouseDown] = {
+      }, _extends3[ListboxEvents.OptionMouseDown] = {
         target: ListboxStates.Dragging
-      }, _default3[ListboxEvents.OutsideMouseDown] = [{
+      }, _extends3[ListboxEvents.OutsideMouseDown] = [{
         target: ListboxStates.Idle,
@@ -379,3 +388,3 @@ cond: clickedOutsideOfListbox,
         cond: optionIsActive
-      }], _default3[ListboxEvents.OutsideMouseUp] = [{
+      }], _extends3[ListboxEvents.OutsideMouseUp] = [{
         target: ListboxStates.Idle,
@@ -390,3 +399,3 @@ cond: clickedOutsideOfListbox,
         actions: clearTypeahead
-      }], _default3[ListboxEvents.KeyDownEnter] = ListboxStates.Interacting, _default3[ListboxEvents.Blur] = [{
+      }], _extends3[ListboxEvents.KeyDownEnter] = ListboxStates.Interacting, _extends3[ListboxEvents.Blur] = [{
         target: ListboxStates.Idle,
@@ -401,42 +410,42 @@ cond: listboxLostFocus,
         actions: clearTypeahead
-      }], _default3[ListboxEvents.OptionTouchStart] = {
+      }], _extends3[ListboxEvents.OptionTouchStart] = {
         target: ListboxStates.Navigating,
         actions: [navigate, clearTypeahead],
         cond: optionIsNavigable
-      }, _default3[ListboxEvents.OptionClick] = {
+      }, _extends3[ListboxEvents.OptionClick] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default3[ListboxEvents.OptionPress] = {
+      }, _extends3[ListboxEvents.OptionPress] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default3[ListboxEvents.OptionMouseEnter] = {
+      }, _extends3[ListboxEvents.OptionMouseEnter] = {
         target: ListboxStates.Navigating,
         actions: [navigate, clearTypeahead],
         cond: optionIsNavigable
-      }, _default3[ListboxEvents.KeyDownNavigate] = {
+      }, _extends3[ListboxEvents.KeyDownNavigate] = {
         target: ListboxStates.Navigating,
         actions: [navigate, clearTypeahead, focusList]
-      }, _default3))
+      }, _extends3))
     }, _states[ListboxStates.Open] = {
-      on: _extends({}, commonEvents, (_default4 = {}, _default4[ListboxEvents.ClearNavSelection] = {
+      on: _extends({}, commonEvents, (_extends4 = {}, _extends4[ListboxEvents.ClearNavSelection] = {
         actions: [clearNavigationValue]
-      }, _default4[ListboxEvents.KeyDownEnter] = {
+      }, _extends4[ListboxEvents.KeyDownEnter] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default4[ListboxEvents.KeyDownSpace] = {
+      }, _extends4[ListboxEvents.KeyDownSpace] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default4[ListboxEvents.ButtonMouseDown] = {
+      }, _extends4[ListboxEvents.ButtonMouseDown] = {
         target: ListboxStates.Idle,
         actions: [focusButton]
-      }, _default4[ListboxEvents.KeyDownEscape] = {
+      }, _extends4[ListboxEvents.KeyDownEscape] = {
         target: ListboxStates.Idle,
         actions: [focusButton]
-      }, _default4[ListboxEvents.OptionMouseDown] = {
+      }, _extends4[ListboxEvents.OptionMouseDown] = {
         target: ListboxStates.Dragging
-      }, _default4[ListboxEvents.OutsideMouseDown] = [{
+      }, _extends4[ListboxEvents.OutsideMouseDown] = [{
         target: ListboxStates.Idle,
@@ -451,3 +460,3 @@ cond: clickedOutsideOfListbox,
         actions: clearTypeahead
-      }], _default4[ListboxEvents.OutsideMouseUp] = [{
+      }], _extends4[ListboxEvents.OutsideMouseUp] = [{
         target: ListboxStates.Idle,
@@ -462,3 +471,3 @@ cond: clickedOutsideOfListbox,
         actions: clearTypeahead
-      }], _default4[ListboxEvents.Blur] = [{
+      }], _extends4[ListboxEvents.Blur] = [{
         target: ListboxStates.Idle,
@@ -473,28 +482,28 @@ cond: listboxLostFocus,
         actions: clearTypeahead
-      }], _default4[ListboxEvents.ButtonMouseUp] = {
+      }], _extends4[ListboxEvents.ButtonMouseUp] = {
         target: ListboxStates.Navigating,
         actions: [navigateFromCurrentValue, focusList]
-      }, _default4[ListboxEvents.OptionTouchStart] = {
+      }, _extends4[ListboxEvents.OptionTouchStart] = {
         target: ListboxStates.Navigating,
         actions: [navigate, clearTypeahead],
         cond: optionIsNavigable
-      }, _default4[ListboxEvents.OptionClick] = {
+      }, _extends4[ListboxEvents.OptionClick] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default4[ListboxEvents.OptionPress] = {
+      }, _extends4[ListboxEvents.OptionPress] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default4[ListboxEvents.KeyDownNavigate] = {
+      }, _extends4[ListboxEvents.KeyDownNavigate] = {
         target: ListboxStates.Navigating,
         actions: [navigate, clearTypeahead, focusList]
-      }, _default4[ListboxEvents.KeyDownSearch] = {
+      }, _extends4[ListboxEvents.KeyDownSearch] = {
         target: ListboxStates.Navigating,
         actions: setTypeahead
-      }, _default4[ListboxEvents.UpdateAfterTypeahead] = {
+      }, _extends4[ListboxEvents.UpdateAfterTypeahead] = {
         actions: [setNavSelectionFromTypeahead]
-      }, _default4[ListboxEvents.ClearTypeahead] = {
+      }, _extends4[ListboxEvents.ClearTypeahead] = {
         actions: clearTypeahead
-      }, _default4[ListboxEvents.OptionMouseMove] = [{
+      }, _extends4[ListboxEvents.OptionMouseMove] = [{
         target: ListboxStates.Dragging,
@@ -505,23 +514,23 @@ actions: [navigate],
         target: ListboxStates.Dragging
-      }], _default4))
+      }], _extends4))
     }, _states[ListboxStates.Dragging] = {
-      on: _extends({}, commonEvents, (_default5 = {}, _default5[ListboxEvents.ClearNavSelection] = {
+      on: _extends({}, commonEvents, (_extends5 = {}, _extends5[ListboxEvents.ClearNavSelection] = {
         actions: [clearNavigationValue]
-      }, _default5[ListboxEvents.KeyDownEnter] = {
+      }, _extends5[ListboxEvents.KeyDownEnter] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default5[ListboxEvents.KeyDownSpace] = {
+      }, _extends5[ListboxEvents.KeyDownSpace] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default5[ListboxEvents.ButtonMouseDown] = {
+      }, _extends5[ListboxEvents.ButtonMouseDown] = {
         target: ListboxStates.Idle,
         actions: [focusButton]
-      }, _default5[ListboxEvents.KeyDownEscape] = {
+      }, _extends5[ListboxEvents.KeyDownEscape] = {
         target: ListboxStates.Idle,
         actions: [focusButton]
-      }, _default5[ListboxEvents.OptionMouseDown] = {
+      }, _extends5[ListboxEvents.OptionMouseDown] = {
         target: ListboxStates.Dragging
-      }, _default5[ListboxEvents.OutsideMouseDown] = [{
+      }, _extends5[ListboxEvents.OutsideMouseDown] = [{
         target: ListboxStates.Idle,
@@ -536,3 +545,3 @@ cond: clickedOutsideOfListbox,
         actions: clearTypeahead
-      }], _default5[ListboxEvents.OutsideMouseUp] = [{
+      }], _extends5[ListboxEvents.OutsideMouseUp] = [{
         target: ListboxStates.Idle,
@@ -548,3 +557,3 @@ cond: clickedOutsideOfListbox,
         actions: [clearTypeahead, focusList]
-      }], _default5[ListboxEvents.Blur] = [{
+      }], _extends5[ListboxEvents.Blur] = [{
         target: ListboxStates.Idle,
@@ -559,32 +568,32 @@ cond: listboxLostFocus,
         actions: clearTypeahead
-      }], _default5[ListboxEvents.ButtonMouseUp] = {
+      }], _extends5[ListboxEvents.ButtonMouseUp] = {
         target: ListboxStates.Navigating,
         actions: [navigateFromCurrentValue, focusList]
-      }, _default5[ListboxEvents.OptionTouchStart] = {
+      }, _extends5[ListboxEvents.OptionTouchStart] = {
         target: ListboxStates.Navigating,
         actions: [navigate, clearTypeahead],
         cond: optionIsNavigable
-      }, _default5[ListboxEvents.OptionClick] = {
+      }, _extends5[ListboxEvents.OptionClick] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default5[ListboxEvents.OptionPress] = {
+      }, _extends5[ListboxEvents.OptionPress] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default5[ListboxEvents.OptionMouseEnter] = {
+      }, _extends5[ListboxEvents.OptionMouseEnter] = {
         target: ListboxStates.Dragging,
         actions: [navigate, clearTypeahead],
         cond: optionIsNavigable
-      }, _default5[ListboxEvents.KeyDownNavigate] = {
+      }, _extends5[ListboxEvents.KeyDownNavigate] = {
         target: ListboxStates.Navigating,
         actions: [navigate, clearTypeahead, focusList]
-      }, _default5[ListboxEvents.KeyDownSearch] = {
+      }, _extends5[ListboxEvents.KeyDownSearch] = {
         target: ListboxStates.Navigating,
         actions: setTypeahead
-      }, _default5[ListboxEvents.UpdateAfterTypeahead] = {
+      }, _extends5[ListboxEvents.UpdateAfterTypeahead] = {
         actions: [setNavSelectionFromTypeahead]
-      }, _default5[ListboxEvents.ClearTypeahead] = {
+      }, _extends5[ListboxEvents.ClearTypeahead] = {
         actions: clearTypeahead
-      }, _default5[ListboxEvents.OptionMouseMove] = [{
+      }, _extends5[ListboxEvents.OptionMouseMove] = [{
         target: ListboxStates.Navigating,
@@ -595,27 +604,27 @@ actions: [navigate],
         target: ListboxStates.Navigating
-      }], _default5[ListboxEvents.OptionMouseUp] = {
+      }], _extends5[ListboxEvents.OptionMouseUp] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default5))
+      }, _extends5))
     }, _states[ListboxStates.Navigating] = {
-      on: _extends({}, commonEvents, (_default6 = {}, _default6[ListboxEvents.ClearNavSelection] = {
+      on: _extends({}, commonEvents, (_extends6 = {}, _extends6[ListboxEvents.ClearNavSelection] = {
         actions: [clearNavigationValue, focusList]
-      }, _default6[ListboxEvents.KeyDownEnter] = {
+      }, _extends6[ListboxEvents.KeyDownEnter] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default6[ListboxEvents.KeyDownSpace] = {
+      }, _extends6[ListboxEvents.KeyDownSpace] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default6[ListboxEvents.ButtonMouseDown] = {
+      }, _extends6[ListboxEvents.ButtonMouseDown] = {
         target: ListboxStates.Idle,
         actions: [focusButton]
-      }, _default6[ListboxEvents.KeyDownEscape] = {
+      }, _extends6[ListboxEvents.KeyDownEscape] = {
         target: ListboxStates.Idle,
         actions: [focusButton]
-      }, _default6[ListboxEvents.OptionMouseDown] = {
+      }, _extends6[ListboxEvents.OptionMouseDown] = {
         target: ListboxStates.Dragging
-      }, _default6[ListboxEvents.OutsideMouseDown] = [{
+      }, _extends6[ListboxEvents.OutsideMouseDown] = [{
         target: ListboxStates.Idle,
@@ -630,3 +639,3 @@ cond: clickedOutsideOfListbox,
         actions: clearTypeahead
-      }], _default6[ListboxEvents.OutsideMouseUp] = [{
+      }], _extends6[ListboxEvents.OutsideMouseUp] = [{
         target: ListboxStates.Idle,
@@ -641,3 +650,3 @@ cond: clickedOutsideOfListbox,
         actions: clearTypeahead
-      }], _default6[ListboxEvents.Blur] = [{
+      }], _extends6[ListboxEvents.Blur] = [{
         target: ListboxStates.Idle,
@@ -652,32 +661,32 @@ cond: listboxLostFocus,
         actions: clearTypeahead
-      }], _default6[ListboxEvents.ButtonMouseUp] = {
+      }], _extends6[ListboxEvents.ButtonMouseUp] = {
         target: ListboxStates.Navigating,
         actions: [navigateFromCurrentValue, focusList]
-      }, _default6[ListboxEvents.OptionTouchStart] = {
+      }, _extends6[ListboxEvents.OptionTouchStart] = {
         target: ListboxStates.Navigating,
         actions: [navigate, clearTypeahead],
         cond: optionIsNavigable
-      }, _default6[ListboxEvents.OptionClick] = {
+      }, _extends6[ListboxEvents.OptionClick] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default6[ListboxEvents.OptionPress] = {
+      }, _extends6[ListboxEvents.OptionPress] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default6[ListboxEvents.OptionMouseEnter] = {
+      }, _extends6[ListboxEvents.OptionMouseEnter] = {
         target: ListboxStates.Navigating,
         actions: [navigate, clearTypeahead],
         cond: optionIsNavigable
-      }, _default6[ListboxEvents.KeyDownNavigate] = {
+      }, _extends6[ListboxEvents.KeyDownNavigate] = {
         target: ListboxStates.Navigating,
         actions: [navigate, clearTypeahead, focusList]
-      }, _default6[ListboxEvents.KeyDownSearch] = {
+      }, _extends6[ListboxEvents.KeyDownSearch] = {
         target: ListboxStates.Navigating,
         actions: setTypeahead
-      }, _default6[ListboxEvents.UpdateAfterTypeahead] = {
+      }, _extends6[ListboxEvents.UpdateAfterTypeahead] = {
         actions: [setNavSelectionFromTypeahead]
-      }, _default6[ListboxEvents.ClearTypeahead] = {
+      }, _extends6[ListboxEvents.ClearTypeahead] = {
         actions: clearTypeahead
-      }, _default6[ListboxEvents.OptionMouseMove] = [{
+      }, _extends6[ListboxEvents.OptionMouseMove] = [{
         target: ListboxStates.Navigating,
@@ -688,3 +697,3 @@ actions: [navigate],
         target: ListboxStates.Navigating
-      }], _default6))
+      }], _extends6))
     }, _states)
@@ -721,4 +730,4 @@ };
 var ListboxDescendantContext = /*#__PURE__*/descendants.createDescendantContext("ListboxDescendantContext");
-var ListboxContext = /*#__PURE__*/utils.createNamedContext("ListboxContext", {});
-var ListboxGroupContext = /*#__PURE__*/utils.createNamedContext("ListboxGroupContext", {}); ////////////////////////////////////////////////////////////////////////////////
+var ListboxContext = /*#__PURE__*/context.createNamedContext("ListboxContext", {});
+var ListboxGroupContext = /*#__PURE__*/context.createNamedContext("ListboxGroupContext", {}); ////////////////////////////////////////////////////////////////////////////////
 
@@ -733,3 +742,3 @@ /**
 
-var ListboxInput = /*#__PURE__*/utils.forwardRefWithAs(function ListboxInput(_ref, forwardedRef) {
+var ListboxInput = /*#__PURE__*/React.forwardRef(function ListboxInput(_ref, forwardedRef) {
   var _ref$as = _ref.as,
@@ -748,5 +757,5 @@ Comp = _ref$as === void 0 ? "div" : _ref$as,
       valueProp = _ref.value,
-      _ref$_componentName = _ref._componentName,
-      _componentName = _ref$_componentName === void 0 ? "ListboxInput" : _ref$_componentName,
-      props = _objectWithoutPropertiesLoose(_ref, ["as", "aria-labelledby", "aria-label", "children", "defaultValue", "disabled", "form", "name", "onChange", "required", "value", "_componentName"]);
+      _ref$__componentName = _ref.__componentName,
+      __componentName = _ref$__componentName === void 0 ? "ListboxInput" : _ref$__componentName,
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "aria-labelledby", "aria-label", "children", "defaultValue", "disabled", "form", "name", "onChange", "required", "value", "__componentName"]);
 
@@ -785,3 +794,3 @@ var isControlled = React.useRef(valueProp != null);
 
-  var stableOnChange = utils.useStableCallback(function (newValue) {
+  var stableOnChange = useStableCallback.useStableCallback(function (newValue) {
     if (newValue !== state.context.value) {
@@ -794,4 +803,4 @@ onChange == null ? void 0 : onChange(newValue);
 
-  var id = props.id || utils.makeId("listbox-input", _id);
-  var ref = utils.useForkedRef(inputRef, forwardedRef); // If the button has children, we just render them as the label.
+  var id = props.id || makeId.makeId("listbox-input", _id);
+  var ref = composeRefs.useComposedRefs(inputRef, forwardedRef); // If the button has children, we just render them as the label.
   // Otherwise we'll find the option with a value that matches the listbox value
@@ -857,3 +866,3 @@ // and use its label in the button. We'll get that here and send it to the
 
-  utils.useControlledSwitchWarning(valueProp, "value", _componentName); // Even if the app controls state, we still need to update it internally to
+  devUtils.useControlledSwitchWarning(valueProp, "value", __componentName); // Even if the app controls state, we still need to update it internally to
   // run the state machine transitions
@@ -867,3 +876,3 @@
   });
-  utils.useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(function () {
     send({
@@ -918,3 +927,3 @@ type: ListboxEvents.GetDerivedData,
   }, [send, isExpanded]);
-  utils.useCheckStyles("listbox");
+  devUtils.useCheckStyles("listbox");
   return /*#__PURE__*/React.createElement(descendants.DescendantProvider, {
@@ -932,3 +941,3 @@ context: ListboxDescendantContext,
     id: id
-  }), utils.isFunction(children) ? children({
+  }), typeCheck.isFunction(children) ? children({
     id: id,
@@ -976,3 +985,3 @@ isExpanded: isExpanded,
  */
-var Listbox = /*#__PURE__*/utils.forwardRefWithAs(function Listbox(_ref2, forwardedRef) {
+var Listbox = /*#__PURE__*/React.forwardRef(function Listbox(_ref2, forwardedRef) {
   var _ref2$arrow = _ref2.arrow,
@@ -987,3 +996,3 @@ arrow = _ref2$arrow === void 0 ? "▼" : _ref2$arrow,
   return /*#__PURE__*/React.createElement(ListboxInput, _extends({}, props, {
-    _componentName: "Listbox",
+    __componentName: "Listbox",
     ref: forwardedRef
@@ -995,3 +1004,3 @@ }), function (_ref3) {
       arrow: arrow,
-      children: button ? utils.isFunction(button) ? button({
+      children: button ? typeCheck.isFunction(button) ? button({
         value: value,
@@ -1019,3 +1028,3 @@ label: valueLabel
  */
-var ListboxButtonImpl = /*#__PURE__*/utils.forwardRefWithAs(function ListboxButton(_ref4, forwardedRef) {
+var ListboxButtonImpl = /*#__PURE__*/React.forwardRef(function ListboxButton(_ref4, forwardedRef) {
   var ariaLabel = _ref4["aria-label"],
@@ -1043,7 +1052,7 @@ _ref4$arrow = _ref4.arrow,
   var listboxValue = stateData.value;
-  var ref = utils.useForkedRef(buttonRef, forwardedRef);
+  var ref = composeRefs.useComposedRefs(buttonRef, forwardedRef);
   var handleKeyDown = useKeyDown();
 
   function handleMouseDown(event) {
-    if (!utils.isRightClick(event.nativeEvent)) {
+    if (!isRightClick.isRightClick(event.nativeEvent)) {
       event.preventDefault();
@@ -1059,3 +1068,3 @@ event.stopPropagation();
   function handleMouseUp(event) {
-    if (!utils.isRightClick(event.nativeEvent)) {
+    if (!isRightClick.isRightClick(event.nativeEvent)) {
       event.preventDefault();
@@ -1069,3 +1078,3 @@ event.stopPropagation();
 
-  var id = utils.makeId("button", listboxId); // If the button has children, we just render them as the label
+  var id = makeId.makeId("button", listboxId); // If the button has children, we just render them as the label
   // If a user needs the label on the server to prevent hydration mismatch
@@ -1078,3 +1087,3 @@ // errors, they need to control the state of the component and pass a label
       return listboxValueLabel;
-    } else if (utils.isFunction(children)) {
+    } else if (typeCheck.isFunction(children)) {
       return children({
@@ -1123,9 +1132,9 @@ isExpanded: isExpanded,
     id: id,
-    onKeyDown: utils.wrapEvent(onKeyDown, handleKeyDown),
-    onMouseDown: utils.wrapEvent(onMouseDown, handleMouseDown),
-    onMouseUp: utils.wrapEvent(onMouseUp, handleMouseUp)
-  }), label, arrow && /*#__PURE__*/React.createElement(ListboxArrow, null, utils.isBoolean(arrow) ? null : arrow));
+    onKeyDown: composeEventHandlers.composeEventHandlers(onKeyDown, handleKeyDown),
+    onMouseDown: composeEventHandlers.composeEventHandlers(onMouseDown, handleMouseDown),
+    onMouseUp: composeEventHandlers.composeEventHandlers(onMouseUp, handleMouseUp)
+  }), label, arrow && /*#__PURE__*/React.createElement(ListboxArrow, null, typeCheck.isBoolean(arrow) ? null : arrow));
 });
 
-var ListboxButton = /*#__PURE__*/utils.memoWithAs(ListboxButtonImpl);
+var ListboxButton = /*#__PURE__*/React.memo(ListboxButtonImpl);
 /**
@@ -1144,3 +1153,3 @@ * @see Docs https://reach.tech/listbox#listboxbutton-props
  */
-var ListboxArrowImpl = /*#__PURE__*/utils.forwardRefWithAs(function ListboxArrow(_ref5, forwardedRef) {
+var ListboxArrowImpl = /*#__PURE__*/React.forwardRef(function ListboxArrow(_ref5, forwardedRef) {
   var _ref5$as = _ref5.as,
@@ -1162,3 +1171,3 @@ Comp = _ref5$as === void 0 ? "span" : _ref5$as,
     "data-expanded": isExpanded ? "" : undefined
-  }), utils.isFunction(children) ? children({
+  }), typeCheck.isFunction(children) ? children({
     isExpanded: isExpanded,
@@ -1170,3 +1179,3 @@ // TODO: Remove in 1.0
 
-var ListboxArrow = /*#__PURE__*/utils.memoWithAs(ListboxArrowImpl);
+var ListboxArrow = /*#__PURE__*/React.memo(ListboxArrowImpl);
 /**
@@ -1185,3 +1194,3 @@ * @see Docs https://reach.tech/listbox#listboxarrow-props
  */
-var ListboxPopoverImpl = /*#__PURE__*/utils.forwardRefWithAs(function ListboxPopover(_ref6, forwardedRef) {
+var ListboxPopoverImpl = /*#__PURE__*/React.forwardRef(function ListboxPopover(_ref6, forwardedRef) {
   var _ref6$as = _ref6.as,
@@ -1204,3 +1213,3 @@ Comp = _ref6$as === void 0 ? "div" : _ref6$as,
 
-  var ref = utils.useForkedRef(popoverRef, forwardedRef);
+  var ref = composeRefs.useComposedRefs(popoverRef, forwardedRef);
   var handleKeyDown = useKeyDown();
@@ -1214,4 +1223,4 @@
     "data-reach-listbox-popover": "",
-    onBlur: utils.wrapEvent(onBlur, handleBlur),
-    onKeyDown: utils.wrapEvent(onKeyDown, handleKeyDown)
+    onBlur: composeEventHandlers.composeEventHandlers(onBlur, handleBlur),
+    onKeyDown: composeEventHandlers.composeEventHandlers(onKeyDown, handleKeyDown)
   });
@@ -1237,3 +1246,3 @@
 
-var ListboxPopover = /*#__PURE__*/utils.memoWithAs(ListboxPopoverImpl);
+var ListboxPopover = /*#__PURE__*/React.memo(ListboxPopoverImpl);
 /**
@@ -1252,3 +1261,3 @@ * @see Docs https://reach.tech/listbox#listboxpopover-props
  */
-var ListboxList = /*#__PURE__*/utils.forwardRefWithAs(function ListboxList(_ref7, forwardedRef) {
+var ListboxList = /*#__PURE__*/React.forwardRef(function ListboxList(_ref7, forwardedRef) {
   var _ref7$as = _ref7.as,
@@ -1268,3 +1277,3 @@ Comp = _ref7$as === void 0 ? "ul" : _ref7$as,
 
-  var ref = utils.useForkedRef(forwardedRef, listRef);
+  var ref = composeRefs.useComposedRefs(forwardedRef, listRef);
   return /*#__PURE__*/React.createElement(Comp // Tells assistive technologies which of the options, if any, is
@@ -1296,3 +1305,3 @@ // visually indicated as having keyboard focus. DOM focus remains on the
     "data-reach-listbox-list": "",
-    id: utils.makeId("listbox", listboxId)
+    id: makeId.makeId("listbox", listboxId)
   }));
@@ -1314,3 +1323,3 @@ });
  */
-var ListboxOption = /*#__PURE__*/utils.forwardRefWithAs(function ListboxOption(_ref8, forwardedRef) {
+var ListboxOption = /*#__PURE__*/React.forwardRef(function ListboxOption(_ref8, forwardedRef) {
   var _ref8$as = _ref8.as,
@@ -1370,3 +1379,3 @@ Comp = _ref8$as === void 0 ? "li" : _ref8$as,
   var isSelected = listboxValue === value;
-  var ref = utils.useForkedRef(getLabelFromDomNode, forwardedRef, ownRef, isSelected ? selectedOptionRef : null, isHighlighted ? highlightedOptionRef : null);
+  var ref = composeRefs.useComposedRefs(getLabelFromDomNode, forwardedRef, ownRef, isSelected ? selectedOptionRef : null, isHighlighted ? highlightedOptionRef : null);
 
@@ -1397,3 +1406,3 @@ function handleMouseEnter() {
     // Prevent blur event from firing and bubbling to the popover
-    if (!utils.isRightClick(event.nativeEvent)) {
+    if (!isRightClick.isRightClick(event.nativeEvent)) {
       event.preventDefault();
@@ -1407,3 +1416,3 @@ send({
   function handleMouseUp(event) {
-    if (!utils.isRightClick(event.nativeEvent)) {
+    if (!isRightClick.isRightClick(event.nativeEvent)) {
       send({
@@ -1424,3 +1433,3 @@ type: ListboxEvents.OptionMouseUp,
     // but this needs more robust testing.
-    if (!utils.isRightClick(event.nativeEvent)) {
+    if (!isRightClick.isRightClick(event.nativeEvent)) {
       send({
@@ -1470,9 +1479,9 @@ type: ListboxEvents.OptionClick,
     "data-value": value,
-    onClick: utils.wrapEvent(onClick, handleClick),
-    onMouseDown: utils.wrapEvent(onMouseDown, handleMouseDown),
-    onMouseEnter: utils.wrapEvent(onMouseEnter, handleMouseEnter),
-    onMouseLeave: utils.wrapEvent(onMouseLeave, handleMouseLeave),
-    onMouseMove: utils.wrapEvent(onMouseMove, handleMouseMove),
-    onMouseUp: utils.wrapEvent(onMouseUp, handleMouseUp),
-    onTouchStart: utils.wrapEvent(onTouchStart, handleTouchStart)
+    onClick: composeEventHandlers.composeEventHandlers(onClick, handleClick),
+    onMouseDown: composeEventHandlers.composeEventHandlers(onMouseDown, handleMouseDown),
+    onMouseEnter: composeEventHandlers.composeEventHandlers(onMouseEnter, handleMouseEnter),
+    onMouseLeave: composeEventHandlers.composeEventHandlers(onMouseLeave, handleMouseLeave),
+    onMouseMove: composeEventHandlers.composeEventHandlers(onMouseMove, handleMouseMove),
+    onMouseUp: composeEventHandlers.composeEventHandlers(onMouseUp, handleMouseUp),
+    onTouchStart: composeEventHandlers.composeEventHandlers(onTouchStart, handleTouchStart)
   }), children);
@@ -1494,3 +1503,3 @@ });
  */
-var ListboxGroup = /*#__PURE__*/utils.forwardRefWithAs(function ListboxGroup(_ref9, forwardedRef) {
+var ListboxGroup = /*#__PURE__*/React.forwardRef(function ListboxGroup(_ref9, forwardedRef) {
   var _ref9$as = _ref9.as,
@@ -1505,3 +1514,3 @@ Comp = _ref9$as === void 0 ? "div" : _ref9$as,
 
-  var labelId = utils.makeId("label", autoId.useId(props.id), listboxId);
+  var labelId = makeId.makeId("label", autoId.useId(props.id), listboxId);
   return /*#__PURE__*/React.createElement(ListboxGroupContext.Provider, {
@@ -1535,3 +1544,3 @@ value: {
  */
-var ListboxGroupLabel = /*#__PURE__*/utils.forwardRefWithAs(function ListboxGroupLabel(_ref10, forwardedRef) {
+var ListboxGroupLabel = /*#__PURE__*/React.forwardRef(function ListboxGroupLabel(_ref10, forwardedRef) {
   var _ref10$as = _ref10.as,
@@ -1626,5 +1635,5 @@ Comp = _ref10$as === void 0 ? "span" : _ref10$as,
   });
-  var handleKeyDown = utils.wrapEvent(function (event) {
+  var handleKeyDown = composeEventHandlers.composeEventHandlers(function (event) {
     var key = event.key;
-    var isSearching = utils.isString(key) && key.length === 1;
+    var isSearching = typeCheck.isString(key) && key.length === 1;
     var navOption = options.find(function (option) {
@@ -1702,3 +1711,3 @@ return option.value === navigationValue;
 
-  return value ? utils.makeId("option-" + value, listboxId) : undefined;
+  return value ? makeId.makeId("option-" + value, listboxId) : undefined;
 }
@@ -1705,0 +1714,0 @@

dist/reach-listbox.esm.js

@@ -1,2 +0,2 @@
-import { useRef, useMemo, useEffect, createElement, Fragment, useContext, useState, useCallback } from 'react';
+import { forwardRef, useRef, useMemo, useEffect, createElement, Fragment, useContext, memo, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
@@ -6,4 +6,13 @@ import { useId } from '@reach/auto-id';
 import { createDescendantContext, useDescendantsInit, DescendantProvider, useDescendant, useDescendants, useDescendantKeyDown } from '@reach/descendants';
-import { getOwnerDocument, createNamedContext, forwardRefWithAs, useStableCallback, makeId, useForkedRef, useControlledSwitchWarning, useIsomorphicLayoutEffect, useCheckStyles, isFunction, wrapEvent, isBoolean, memoWithAs, isString, isRightClick } from '@reach/utils';
+import { isRightClick } from '@reach/utils/is-right-click';
+import { useStableCallback } from '@reach/utils/use-stable-callback';
+import { useIsomorphicLayoutEffect } from '@reach/utils/use-isomorphic-layout-effect';
+import { createNamedContext } from '@reach/utils/context';
+import { isFunction, isBoolean, isString } from '@reach/utils/type-check';
+import { makeId } from '@reach/utils/make-id';
+import { useControlledSwitchWarning, useCheckStyles } from '@reach/utils/dev-utils';
+import { useComposedRefs } from '@reach/utils/compose-refs';
+import { composeEventHandlers } from '@reach/utils/compose-event-handlers';
 import { assign, useCreateMachine, useMachine } from '@reach/machine';
+import { getOwnerDocument } from '@reach/utils/owner-document';
 
@@ -295,3 +304,3 @@ function _extends() {
 var createMachineDefinition = function createMachineDefinition(_ref) {
-  var _default2, _default3, _default4, _default5, _default6, _states;
+  var _extends2, _extends3, _extends4, _extends5, _extends6, _states;
 
@@ -309,42 +318,42 @@ var value = _ref.value;
     states: (_states = {}, _states[ListboxStates.Idle] = {
-      on: _extends({}, commonEvents, (_default2 = {}, _default2[ListboxEvents.ButtonMouseDown] = {
+      on: _extends({}, commonEvents, (_extends2 = {}, _extends2[ListboxEvents.ButtonMouseDown] = {
         target: ListboxStates.Open,
         actions: [navigateFromCurrentValue],
         cond: listboxIsNotDisabled
-      }, _default2[ListboxEvents.KeyDownSpace] = {
+      }, _extends2[ListboxEvents.KeyDownSpace] = {
         target: ListboxStates.Navigating,
         actions: [navigateFromCurrentValue, focusList],
         cond: listboxIsNotDisabled
-      }, _default2[ListboxEvents.KeyDownSearch] = {
+      }, _extends2[ListboxEvents.KeyDownSearch] = {
         target: ListboxStates.Idle,
         actions: setTypeahead,
         cond: listboxIsNotDisabled
-      }, _default2[ListboxEvents.UpdateAfterTypeahead] = {
+      }, _extends2[ListboxEvents.UpdateAfterTypeahead] = {
         target: ListboxStates.Idle,
         actions: [setValueFromTypeahead],
         cond: listboxIsNotDisabled
-      }, _default2[ListboxEvents.ClearTypeahead] = {
+      }, _extends2[ListboxEvents.ClearTypeahead] = {
         target: ListboxStates.Idle,
         actions: clearTypeahead
-      }, _default2[ListboxEvents.KeyDownNavigate] = {
+      }, _extends2[ListboxEvents.KeyDownNavigate] = {
         target: ListboxStates.Navigating,
         actions: [navigateFromCurrentValue, clearTypeahead, focusList],
         cond: listboxIsNotDisabled
-      }, _default2[ListboxEvents.KeyDownEnter] = {
+      }, _extends2[ListboxEvents.KeyDownEnter] = {
         actions: [submitForm],
         cond: listboxIsNotDisabled
-      }, _default2))
+      }, _extends2))
     }, _states[ListboxStates.Interacting] = {
       entry: [clearNavigationValue],
-      on: _extends({}, commonEvents, (_default3 = {}, _default3[ListboxEvents.ClearNavSelection] = {
+      on: _extends({}, commonEvents, (_extends3 = {}, _extends3[ListboxEvents.ClearNavSelection] = {
         actions: [clearNavigationValue, focusList]
-      }, _default3[ListboxEvents.KeyDownEnter] = {
+      }, _extends3[ListboxEvents.KeyDownEnter] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default3[ListboxEvents.KeyDownSpace] = {
+      }, _extends3[ListboxEvents.KeyDownSpace] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default3[ListboxEvents.ButtonMouseDown] = {
+      }, _extends3[ListboxEvents.ButtonMouseDown] = {
         target: ListboxStates.Idle,
@@ -360,8 +369,8 @@ // When the user triggers a mouseDown event on the button, we call
         actions: [focusButton]
-      }, _default3[ListboxEvents.KeyDownEscape] = {
+      }, _extends3[ListboxEvents.KeyDownEscape] = {
         target: ListboxStates.Idle,
         actions: [focusButton]
-      }, _default3[ListboxEvents.OptionMouseDown] = {
+      }, _extends3[ListboxEvents.OptionMouseDown] = {
         target: ListboxStates.Dragging
-      }, _default3[ListboxEvents.OutsideMouseDown] = [{
+      }, _extends3[ListboxEvents.OutsideMouseDown] = [{
         target: ListboxStates.Idle,
@@ -374,3 +383,3 @@ cond: clickedOutsideOfListbox,
         cond: optionIsActive
-      }], _default3[ListboxEvents.OutsideMouseUp] = [{
+      }], _extends3[ListboxEvents.OutsideMouseUp] = [{
         target: ListboxStates.Idle,
@@ -385,3 +394,3 @@ cond: clickedOutsideOfListbox,
         actions: clearTypeahead
-      }], _default3[ListboxEvents.KeyDownEnter] = ListboxStates.Interacting, _default3[ListboxEvents.Blur] = [{
+      }], _extends3[ListboxEvents.KeyDownEnter] = ListboxStates.Interacting, _extends3[ListboxEvents.Blur] = [{
         target: ListboxStates.Idle,
@@ -396,42 +405,42 @@ cond: listboxLostFocus,
         actions: clearTypeahead
-      }], _default3[ListboxEvents.OptionTouchStart] = {
+      }], _extends3[ListboxEvents.OptionTouchStart] = {
         target: ListboxStates.Navigating,
         actions: [navigate, clearTypeahead],
         cond: optionIsNavigable
-      }, _default3[ListboxEvents.OptionClick] = {
+      }, _extends3[ListboxEvents.OptionClick] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default3[ListboxEvents.OptionPress] = {
+      }, _extends3[ListboxEvents.OptionPress] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default3[ListboxEvents.OptionMouseEnter] = {
+      }, _extends3[ListboxEvents.OptionMouseEnter] = {
         target: ListboxStates.Navigating,
         actions: [navigate, clearTypeahead],
         cond: optionIsNavigable
-      }, _default3[ListboxEvents.KeyDownNavigate] = {
+      }, _extends3[ListboxEvents.KeyDownNavigate] = {
         target: ListboxStates.Navigating,
         actions: [navigate, clearTypeahead, focusList]
-      }, _default3))
+      }, _extends3))
     }, _states[ListboxStates.Open] = {
-      on: _extends({}, commonEvents, (_default4 = {}, _default4[ListboxEvents.ClearNavSelection] = {
+      on: _extends({}, commonEvents, (_extends4 = {}, _extends4[ListboxEvents.ClearNavSelection] = {
         actions: [clearNavigationValue]
-      }, _default4[ListboxEvents.KeyDownEnter] = {
+      }, _extends4[ListboxEvents.KeyDownEnter] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default4[ListboxEvents.KeyDownSpace] = {
+      }, _extends4[ListboxEvents.KeyDownSpace] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default4[ListboxEvents.ButtonMouseDown] = {
+      }, _extends4[ListboxEvents.ButtonMouseDown] = {
         target: ListboxStates.Idle,
         actions: [focusButton]
-      }, _default4[ListboxEvents.KeyDownEscape] = {
+      }, _extends4[ListboxEvents.KeyDownEscape] = {
         target: ListboxStates.Idle,
         actions: [focusButton]
-      }, _default4[ListboxEvents.OptionMouseDown] = {
+      }, _extends4[ListboxEvents.OptionMouseDown] = {
         target: ListboxStates.Dragging
-      }, _default4[ListboxEvents.OutsideMouseDown] = [{
+      }, _extends4[ListboxEvents.OutsideMouseDown] = [{
         target: ListboxStates.Idle,
@@ -446,3 +455,3 @@ cond: clickedOutsideOfListbox,
         actions: clearTypeahead
-      }], _default4[ListboxEvents.OutsideMouseUp] = [{
+      }], _extends4[ListboxEvents.OutsideMouseUp] = [{
         target: ListboxStates.Idle,
@@ -457,3 +466,3 @@ cond: clickedOutsideOfListbox,
         actions: clearTypeahead
-      }], _default4[ListboxEvents.Blur] = [{
+      }], _extends4[ListboxEvents.Blur] = [{
         target: ListboxStates.Idle,
@@ -468,28 +477,28 @@ cond: listboxLostFocus,
         actions: clearTypeahead
-      }], _default4[ListboxEvents.ButtonMouseUp] = {
+      }], _extends4[ListboxEvents.ButtonMouseUp] = {
         target: ListboxStates.Navigating,
         actions: [navigateFromCurrentValue, focusList]
-      }, _default4[ListboxEvents.OptionTouchStart] = {
+      }, _extends4[ListboxEvents.OptionTouchStart] = {
         target: ListboxStates.Navigating,
         actions: [navigate, clearTypeahead],
         cond: optionIsNavigable
-      }, _default4[ListboxEvents.OptionClick] = {
+      }, _extends4[ListboxEvents.OptionClick] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default4[ListboxEvents.OptionPress] = {
+      }, _extends4[ListboxEvents.OptionPress] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default4[ListboxEvents.KeyDownNavigate] = {
+      }, _extends4[ListboxEvents.KeyDownNavigate] = {
         target: ListboxStates.Navigating,
         actions: [navigate, clearTypeahead, focusList]
-      }, _default4[ListboxEvents.KeyDownSearch] = {
+      }, _extends4[ListboxEvents.KeyDownSearch] = {
         target: ListboxStates.Navigating,
         actions: setTypeahead
-      }, _default4[ListboxEvents.UpdateAfterTypeahead] = {
+      }, _extends4[ListboxEvents.UpdateAfterTypeahead] = {
         actions: [setNavSelectionFromTypeahead]
-      }, _default4[ListboxEvents.ClearTypeahead] = {
+      }, _extends4[ListboxEvents.ClearTypeahead] = {
         actions: clearTypeahead
-      }, _default4[ListboxEvents.OptionMouseMove] = [{
+      }, _extends4[ListboxEvents.OptionMouseMove] = [{
         target: ListboxStates.Dragging,
@@ -500,23 +509,23 @@ actions: [navigate],
         target: ListboxStates.Dragging
-      }], _default4))
+      }], _extends4))
     }, _states[ListboxStates.Dragging] = {
-      on: _extends({}, commonEvents, (_default5 = {}, _default5[ListboxEvents.ClearNavSelection] = {
+      on: _extends({}, commonEvents, (_extends5 = {}, _extends5[ListboxEvents.ClearNavSelection] = {
         actions: [clearNavigationValue]
-      }, _default5[ListboxEvents.KeyDownEnter] = {
+      }, _extends5[ListboxEvents.KeyDownEnter] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default5[ListboxEvents.KeyDownSpace] = {
+      }, _extends5[ListboxEvents.KeyDownSpace] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default5[ListboxEvents.ButtonMouseDown] = {
+      }, _extends5[ListboxEvents.ButtonMouseDown] = {
         target: ListboxStates.Idle,
         actions: [focusButton]
-      }, _default5[ListboxEvents.KeyDownEscape] = {
+      }, _extends5[ListboxEvents.KeyDownEscape] = {
         target: ListboxStates.Idle,
         actions: [focusButton]
-      }, _default5[ListboxEvents.OptionMouseDown] = {
+      }, _extends5[ListboxEvents.OptionMouseDown] = {
         target: ListboxStates.Dragging
-      }, _default5[ListboxEvents.OutsideMouseDown] = [{
+      }, _extends5[ListboxEvents.OutsideMouseDown] = [{
         target: ListboxStates.Idle,
@@ -531,3 +540,3 @@ cond: clickedOutsideOfListbox,
         actions: clearTypeahead
-      }], _default5[ListboxEvents.OutsideMouseUp] = [{
+      }], _extends5[ListboxEvents.OutsideMouseUp] = [{
         target: ListboxStates.Idle,
@@ -543,3 +552,3 @@ cond: clickedOutsideOfListbox,
         actions: [clearTypeahead, focusList]
-      }], _default5[ListboxEvents.Blur] = [{
+      }], _extends5[ListboxEvents.Blur] = [{
         target: ListboxStates.Idle,
@@ -554,32 +563,32 @@ cond: listboxLostFocus,
         actions: clearTypeahead
-      }], _default5[ListboxEvents.ButtonMouseUp] = {
+      }], _extends5[ListboxEvents.ButtonMouseUp] = {
         target: ListboxStates.Navigating,
         actions: [navigateFromCurrentValue, focusList]
-      }, _default5[ListboxEvents.OptionTouchStart] = {
+      }, _extends5[ListboxEvents.OptionTouchStart] = {
         target: ListboxStates.Navigating,
         actions: [navigate, clearTypeahead],
         cond: optionIsNavigable
-      }, _default5[ListboxEvents.OptionClick] = {
+      }, _extends5[ListboxEvents.OptionClick] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default5[ListboxEvents.OptionPress] = {
+      }, _extends5[ListboxEvents.OptionPress] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default5[ListboxEvents.OptionMouseEnter] = {
+      }, _extends5[ListboxEvents.OptionMouseEnter] = {
         target: ListboxStates.Dragging,
         actions: [navigate, clearTypeahead],
         cond: optionIsNavigable
-      }, _default5[ListboxEvents.KeyDownNavigate] = {
+      }, _extends5[ListboxEvents.KeyDownNavigate] = {
         target: ListboxStates.Navigating,
         actions: [navigate, clearTypeahead, focusList]
-      }, _default5[ListboxEvents.KeyDownSearch] = {
+      }, _extends5[ListboxEvents.KeyDownSearch] = {
         target: ListboxStates.Navigating,
         actions: setTypeahead
-      }, _default5[ListboxEvents.UpdateAfterTypeahead] = {
+      }, _extends5[ListboxEvents.UpdateAfterTypeahead] = {
         actions: [setNavSelectionFromTypeahead]
-      }, _default5[ListboxEvents.ClearTypeahead] = {
+      }, _extends5[ListboxEvents.ClearTypeahead] = {
         actions: clearTypeahead
-      }, _default5[ListboxEvents.OptionMouseMove] = [{
+      }, _extends5[ListboxEvents.OptionMouseMove] = [{
         target: ListboxStates.Navigating,
@@ -590,27 +599,27 @@ actions: [navigate],
         target: ListboxStates.Navigating
-      }], _default5[ListboxEvents.OptionMouseUp] = {
+      }], _extends5[ListboxEvents.OptionMouseUp] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default5))
+      }, _extends5))
     }, _states[ListboxStates.Navigating] = {
-      on: _extends({}, commonEvents, (_default6 = {}, _default6[ListboxEvents.ClearNavSelection] = {
+      on: _extends({}, commonEvents, (_extends6 = {}, _extends6[ListboxEvents.ClearNavSelection] = {
         actions: [clearNavigationValue, focusList]
-      }, _default6[ListboxEvents.KeyDownEnter] = {
+      }, _extends6[ListboxEvents.KeyDownEnter] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default6[ListboxEvents.KeyDownSpace] = {
+      }, _extends6[ListboxEvents.KeyDownSpace] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default6[ListboxEvents.ButtonMouseDown] = {
+      }, _extends6[ListboxEvents.ButtonMouseDown] = {
         target: ListboxStates.Idle,
         actions: [focusButton]
-      }, _default6[ListboxEvents.KeyDownEscape] = {
+      }, _extends6[ListboxEvents.KeyDownEscape] = {
         target: ListboxStates.Idle,
         actions: [focusButton]
-      }, _default6[ListboxEvents.OptionMouseDown] = {
+      }, _extends6[ListboxEvents.OptionMouseDown] = {
         target: ListboxStates.Dragging
-      }, _default6[ListboxEvents.OutsideMouseDown] = [{
+      }, _extends6[ListboxEvents.OutsideMouseDown] = [{
         target: ListboxStates.Idle,
@@ -625,3 +634,3 @@ cond: clickedOutsideOfListbox,
         actions: clearTypeahead
-      }], _default6[ListboxEvents.OutsideMouseUp] = [{
+      }], _extends6[ListboxEvents.OutsideMouseUp] = [{
         target: ListboxStates.Idle,
@@ -636,3 +645,3 @@ cond: clickedOutsideOfListbox,
         actions: clearTypeahead
-      }], _default6[ListboxEvents.Blur] = [{
+      }], _extends6[ListboxEvents.Blur] = [{
         target: ListboxStates.Idle,
@@ -647,32 +656,32 @@ cond: listboxLostFocus,
         actions: clearTypeahead
-      }], _default6[ListboxEvents.ButtonMouseUp] = {
+      }], _extends6[ListboxEvents.ButtonMouseUp] = {
         target: ListboxStates.Navigating,
         actions: [navigateFromCurrentValue, focusList]
-      }, _default6[ListboxEvents.OptionTouchStart] = {
+      }, _extends6[ListboxEvents.OptionTouchStart] = {
         target: ListboxStates.Navigating,
         actions: [navigate, clearTypeahead],
         cond: optionIsNavigable
-      }, _default6[ListboxEvents.OptionClick] = {
+      }, _extends6[ListboxEvents.OptionClick] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default6[ListboxEvents.OptionPress] = {
+      }, _extends6[ListboxEvents.OptionPress] = {
         target: ListboxStates.Idle,
         actions: [assignValue, clearTypeahead, focusButton, selectOption],
         cond: optionIsSelectable
-      }, _default6[ListboxEvents.OptionMouseEnter] = {
+      }, _extends6[ListboxEvents.OptionMouseEnter] = {
         target: ListboxStates.Navigating,
         actions: [navigate, clearTypeahead],
         cond: optionIsNavigable
-      }, _default6[ListboxEvents.KeyDownNavigate] = {
+      }, _extends6[ListboxEvents.KeyDownNavigate] = {
         target: ListboxStates.Navigating,
         actions: [navigate, clearTypeahead, focusList]
-      }, _default6[ListboxEvents.KeyDownSearch] = {
+      }, _extends6[ListboxEvents.KeyDownSearch] = {
         target: ListboxStates.Navigating,
         actions: setTypeahead
-      }, _default6[ListboxEvents.UpdateAfterTypeahead] = {
+      }, _extends6[ListboxEvents.UpdateAfterTypeahead] = {
         actions: [setNavSelectionFromTypeahead]
-      }, _default6[ListboxEvents.ClearTypeahead] = {
+      }, _extends6[ListboxEvents.ClearTypeahead] = {
         actions: clearTypeahead
-      }, _default6[ListboxEvents.OptionMouseMove] = [{
+      }, _extends6[ListboxEvents.OptionMouseMove] = [{
         target: ListboxStates.Navigating,
@@ -683,3 +692,3 @@ actions: [navigate],
         target: ListboxStates.Navigating
-      }], _default6))
+      }], _extends6))
     }, _states)
@@ -727,3 +736,3 @@ };
 
-var ListboxInput = /*#__PURE__*/forwardRefWithAs(function ListboxInput(_ref, forwardedRef) {
+var ListboxInput = /*#__PURE__*/forwardRef(function ListboxInput(_ref, forwardedRef) {
   var _ref$as = _ref.as,
@@ -742,5 +751,5 @@ Comp = _ref$as === void 0 ? "div" : _ref$as,
       valueProp = _ref.value,
-      _ref$_componentName = _ref._componentName,
-      _componentName = _ref$_componentName === void 0 ? "ListboxInput" : _ref$_componentName,
-      props = _objectWithoutPropertiesLoose(_ref, ["as", "aria-labelledby", "aria-label", "children", "defaultValue", "disabled", "form", "name", "onChange", "required", "value", "_componentName"]);
+      _ref$__componentName = _ref.__componentName,
+      __componentName = _ref$__componentName === void 0 ? "ListboxInput" : _ref$__componentName,
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "aria-labelledby", "aria-label", "children", "defaultValue", "disabled", "form", "name", "onChange", "required", "value", "__componentName"]);
 
@@ -788,3 +797,3 @@ var isControlled = useRef(valueProp != null);
   var id = props.id || makeId("listbox-input", _id);
-  var ref = useForkedRef(inputRef, forwardedRef); // If the button has children, we just render them as the label.
+  var ref = useComposedRefs(inputRef, forwardedRef); // If the button has children, we just render them as the label.
   // Otherwise we'll find the option with a value that matches the listbox value
@@ -850,3 +859,3 @@ // and use its label in the button. We'll get that here and send it to the
 
-  useControlledSwitchWarning(valueProp, "value", _componentName); // Even if the app controls state, we still need to update it internally to
+  useControlledSwitchWarning(valueProp, "value", __componentName); // Even if the app controls state, we still need to update it internally to
   // run the state machine transitions
@@ -980,3 +989,3 @@
  */
-var Listbox = /*#__PURE__*/forwardRefWithAs(function Listbox(_ref2, forwardedRef) {
+var Listbox = /*#__PURE__*/forwardRef(function Listbox(_ref2, forwardedRef) {
   var _ref2$arrow = _ref2.arrow,
@@ -991,3 +1000,3 @@ arrow = _ref2$arrow === void 0 ? "▼" : _ref2$arrow,
   return /*#__PURE__*/createElement(ListboxInput, _extends({}, props, {
-    _componentName: "Listbox",
+    __componentName: "Listbox",
     ref: forwardedRef
@@ -1031,3 +1040,3 @@ }), function (_ref3) {
  */
-var ListboxButtonImpl = /*#__PURE__*/forwardRefWithAs(function ListboxButton(_ref4, forwardedRef) {
+var ListboxButtonImpl = /*#__PURE__*/forwardRef(function ListboxButton(_ref4, forwardedRef) {
   var ariaLabel = _ref4["aria-label"],
@@ -1055,3 +1064,3 @@ _ref4$arrow = _ref4.arrow,
   var listboxValue = stateData.value;
-  var ref = useForkedRef(buttonRef, forwardedRef);
+  var ref = useComposedRefs(buttonRef, forwardedRef);
   var handleKeyDown = useKeyDown();
@@ -1132,5 +1141,5 @@
     id: id,
-    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
-    onMouseDown: wrapEvent(onMouseDown, handleMouseDown),
-    onMouseUp: wrapEvent(onMouseUp, handleMouseUp)
+    onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),
+    onMouseDown: composeEventHandlers(onMouseDown, handleMouseDown),
+    onMouseUp: composeEventHandlers(onMouseUp, handleMouseUp)
   }), label, arrow && /*#__PURE__*/createElement(ListboxArrow, null, isBoolean(arrow) ? null : arrow));
@@ -1147,3 +1156,3 @@ });
 
-var ListboxButton = /*#__PURE__*/memoWithAs(ListboxButtonImpl);
+var ListboxButton = /*#__PURE__*/memo(ListboxButtonImpl);
 /**
@@ -1162,3 +1171,3 @@ * @see Docs https://reach.tech/listbox#listboxbutton-props
  */
-var ListboxArrowImpl = /*#__PURE__*/forwardRefWithAs(function ListboxArrow(_ref5, forwardedRef) {
+var ListboxArrowImpl = /*#__PURE__*/forwardRef(function ListboxArrow(_ref5, forwardedRef) {
   var _ref5$as = _ref5.as,
@@ -1194,3 +1203,3 @@ Comp = _ref5$as === void 0 ? "span" : _ref5$as,
 
-var ListboxArrow = /*#__PURE__*/memoWithAs(ListboxArrowImpl);
+var ListboxArrow = /*#__PURE__*/memo(ListboxArrowImpl);
 /**
@@ -1209,3 +1218,3 @@ * @see Docs https://reach.tech/listbox#listboxarrow-props
  */
-var ListboxPopoverImpl = /*#__PURE__*/forwardRefWithAs(function ListboxPopover(_ref6, forwardedRef) {
+var ListboxPopoverImpl = /*#__PURE__*/forwardRef(function ListboxPopover(_ref6, forwardedRef) {
   var _ref6$as = _ref6.as,
@@ -1228,3 +1237,3 @@ Comp = _ref6$as === void 0 ? "div" : _ref6$as,
 
-  var ref = useForkedRef(popoverRef, forwardedRef);
+  var ref = useComposedRefs(popoverRef, forwardedRef);
   var handleKeyDown = useKeyDown();
@@ -1238,4 +1247,4 @@
     "data-reach-listbox-popover": "",
-    onBlur: wrapEvent(onBlur, handleBlur),
-    onKeyDown: wrapEvent(onKeyDown, handleKeyDown)
+    onBlur: composeEventHandlers(onBlur, handleBlur),
+    onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown)
   });
@@ -1270,3 +1279,3 @@
 
-var ListboxPopover = /*#__PURE__*/memoWithAs(ListboxPopoverImpl);
+var ListboxPopover = /*#__PURE__*/memo(ListboxPopoverImpl);
 /**
@@ -1285,3 +1294,3 @@ * @see Docs https://reach.tech/listbox#listboxpopover-props
  */
-var ListboxList = /*#__PURE__*/forwardRefWithAs(function ListboxList(_ref7, forwardedRef) {
+var ListboxList = /*#__PURE__*/forwardRef(function ListboxList(_ref7, forwardedRef) {
   var _ref7$as = _ref7.as,
@@ -1301,3 +1310,3 @@ Comp = _ref7$as === void 0 ? "ul" : _ref7$as,
 
-  var ref = useForkedRef(forwardedRef, listRef);
+  var ref = useComposedRefs(forwardedRef, listRef);
   return /*#__PURE__*/createElement(Comp // Tells assistive technologies which of the options, if any, is
@@ -1351,3 +1360,3 @@ // visually indicated as having keyboard focus. DOM focus remains on the
  */
-var ListboxOption = /*#__PURE__*/forwardRefWithAs(function ListboxOption(_ref8, forwardedRef) {
+var ListboxOption = /*#__PURE__*/forwardRef(function ListboxOption(_ref8, forwardedRef) {
   var _ref8$as = _ref8.as,
@@ -1411,3 +1420,3 @@ Comp = _ref8$as === void 0 ? "li" : _ref8$as,
   var isSelected = listboxValue === value;
-  var ref = useForkedRef(getLabelFromDomNode, forwardedRef, ownRef, isSelected ? selectedOptionRef : null, isHighlighted ? highlightedOptionRef : null);
+  var ref = useComposedRefs(getLabelFromDomNode, forwardedRef, ownRef, isSelected ? selectedOptionRef : null, isHighlighted ? highlightedOptionRef : null);
 
@@ -1508,9 +1517,9 @@ function handleMouseEnter() {
     "data-value": value,
-    onClick: wrapEvent(onClick, handleClick),
-    onMouseDown: wrapEvent(onMouseDown, handleMouseDown),
-    onMouseEnter: wrapEvent(onMouseEnter, handleMouseEnter),
-    onMouseLeave: wrapEvent(onMouseLeave, handleMouseLeave),
-    onMouseMove: wrapEvent(onMouseMove, handleMouseMove),
-    onMouseUp: wrapEvent(onMouseUp, handleMouseUp),
-    onTouchStart: wrapEvent(onTouchStart, handleTouchStart)
+    onClick: composeEventHandlers(onClick, handleClick),
+    onMouseDown: composeEventHandlers(onMouseDown, handleMouseDown),
+    onMouseEnter: composeEventHandlers(onMouseEnter, handleMouseEnter),
+    onMouseLeave: composeEventHandlers(onMouseLeave, handleMouseLeave),
+    onMouseMove: composeEventHandlers(onMouseMove, handleMouseMove),
+    onMouseUp: composeEventHandlers(onMouseUp, handleMouseUp),
+    onTouchStart: composeEventHandlers(onTouchStart, handleTouchStart)
   }), children);
@@ -1541,3 +1550,3 @@ });
  */
-var ListboxGroup = /*#__PURE__*/forwardRefWithAs(function ListboxGroup(_ref9, forwardedRef) {
+var ListboxGroup = /*#__PURE__*/forwardRef(function ListboxGroup(_ref9, forwardedRef) {
   var _ref9$as = _ref9.as,
@@ -1588,3 +1597,3 @@ Comp = _ref9$as === void 0 ? "div" : _ref9$as,
  */
-var ListboxGroupLabel = /*#__PURE__*/forwardRefWithAs(function ListboxGroupLabel(_ref10, forwardedRef) {
+var ListboxGroupLabel = /*#__PURE__*/forwardRef(function ListboxGroupLabel(_ref10, forwardedRef) {
   var _ref10$as = _ref10.as,
@@ -1684,3 +1693,3 @@ Comp = _ref10$as === void 0 ? "span" : _ref10$as,
   });
-  var handleKeyDown = wrapEvent(function (event) {
+  var handleKeyDown = composeEventHandlers(function (event) {
     var key = event.key;
@@ -1687,0 +1696,0 @@ var isSearching = isString(key) && key.length === 1;

package.json

 {
   "name": "@reach/listbox",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Accessible React listbox input.",
   "author": "React Training <[e-mail]>",
   "license": "MIT",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "repository": {
@@ -14,12 +16,12 @@ "type": "git",
   "dependencies": {
-    "@reach/auto-id": "0.14.0",
-    "@reach/descendants": "0.14.0",
-    "@reach/machine": "0.14.0",
-    "@reach/popover": "0.14.0",
-    "@reach/utils": "0.14.0",
+    "@reach/auto-id": "0.15.0",
+    "@reach/descendants": "0.15.0",
+    "@reach/machine": "0.15.0",
+    "@reach/popover": "0.15.0",
+    "@reach/utils": "0.15.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
@@ -42,3 +44,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

212128

increased by1.02%

Lines of code

5323

increased by0.57%

Dependency changes

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

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

• + Added@reach/machine@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/machine@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/machine@0.15.0

• Updated@reach/popover@0.15.0

• Updated@reach/utils@0.15.0