@reach/listbox - npm Package Compare versions

Comparing version 0.15.0 to 0.15.2

dist/declarations/src/machine.d.ts

@@ -30,2 +30,3 @@ import type { ListboxDescendant, ListboxValue } from "./index";
     OptionClick = "OPTION_CLICK",
+    ListMouseUp = "LIST_MOUSE_UP",
     OptionPress = "OPTION_PRESS",
@@ -87,2 +88,4 @@ OutsideMouseDown = "OUTSIDE_MOUSE_DOWN",
 } | {
+    type: ListboxEvents.ListMouseUp;
+} | {
     type: ListboxEvents.ClearNavSelection;
@@ -89,0 +92,0 @@ } | {

dist/reach-listbox.cjs.prod.js

@@ -11,4 +11,4 @@ 'use strict';
 var isRightClick = require('@reach/utils/is-right-click');
+var useIsomorphicLayoutEffect = require('@reach/utils/use-isomorphic-layout-effect');
 var useStableCallback = require('@reach/utils/use-stable-callback');
-var useIsomorphicLayoutEffect = require('@reach/utils/use-isomorphic-layout-effect');
 var context = require('@reach/utils/context');
@@ -93,2 +93,3 @@ var typeCheck = require('@reach/utils/type-check');
   ListboxEvents["OptionClick"] = "OPTION_CLICK";
+  ListboxEvents["ListMouseUp"] = "LIST_MOUSE_UP";
   ListboxEvents["OptionPress"] = "OPTION_PRESS";
@@ -477,2 +478,5 @@ ListboxEvents["OutsideMouseDown"] = "OUTSIDE_MOUSE_DOWN";
         actions: [navigateFromCurrentValue, focusList]
+      }, _extends4[ListboxEvents.ListMouseUp] = {
+        target: ListboxStates.Navigating,
+        actions: [navigateFromCurrentValue, focusList]
       }, _extends4[ListboxEvents.OptionTouchStart] = {
@@ -709,2 +713,11 @@ target: ListboxStates.Navigating,
 
+var _excluded = ["as", "aria-labelledby", "aria-label", "children", "defaultValue", "disabled", "form", "name", "onChange", "required", "value", "__componentName"],
+    _excluded2 = ["arrow", "button", "children", "portal"],
+    _excluded3 = ["aria-label", "arrow", "as", "children", "onKeyDown", "onMouseDown", "onMouseUp"],
+    _excluded4 = ["as", "children"],
+    _excluded5 = ["as", "position", "onBlur", "onKeyDown", "onMouseUp", "portal", "unstable_observableRefs"],
+    _excluded6 = ["as"],
+    _excluded7 = ["as", "children", "disabled", "onClick", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseUp", "onTouchStart", "value", "label"],
+    _excluded8 = ["as", "label", "children"],
+    _excluded9 = ["as"];
 var DEBUG = false; ////////////////////////////////////////////////////////////////////////////////
@@ -741,3 +754,3 @@ // ListboxContext
       __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"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
@@ -776,8 +789,9 @@ var isControlled = React.useRef(valueProp != null);
 
-  var stableOnChange = useStableCallback.useStableCallback(function (newValue) {
+  function handleValueChange(newValue) {
     if (newValue !== state.context.value) {
       onChange == null ? void 0 : onChange(newValue);
     }
-  }); // IDs for aria attributes
+  } // IDs for aria attributes
 
+
   var _id = autoId.useId(props.id);
@@ -800,23 +814,20 @@
   }, [options, state.context.value]);
-  var isExpanded = isListboxExpanded(state.value); // TODO: Remove duplication and memoize
-
-  var context = React.useMemo(function () {
-    return {
-      ariaLabel: ariaLabel,
-      ariaLabelledBy: ariaLabelledBy,
-      disabled: disabled,
-      isExpanded: isExpanded,
-      listboxId: id,
-      listboxValueLabel: valueLabel,
-      onValueChange: stableOnChange,
-      buttonRef: buttonRef,
-      listRef: listRef,
-      popoverRef: popoverRef,
-      selectedOptionRef: selectedOptionRef,
-      highlightedOptionRef: highlightedOptionRef,
-      send: send,
-      state: state.value,
-      stateData: state.context
-    };
-  }, [ariaLabel, ariaLabelledBy, state.value, state.context, disabled, id, isExpanded, stableOnChange, send, valueLabel]); // For uncontrolled listbox components where no `defaultValue` is provided, we
+  var isExpanded = isListboxExpanded(state.value);
+  var context = {
+    ariaLabel: ariaLabel,
+    ariaLabelledBy: ariaLabelledBy,
+    buttonRef: buttonRef,
+    disabled: disabled,
+    highlightedOptionRef: highlightedOptionRef,
+    isExpanded: isExpanded,
+    listboxId: id,
+    listboxValueLabel: valueLabel,
+    listRef: listRef,
+    onValueChange: handleValueChange,
+    popoverRef: popoverRef,
+    selectedOptionRef: selectedOptionRef,
+    send: send,
+    state: state.value,
+    stateData: state.context
+  }; // For uncontrolled listbox components where no `defaultValue` is provided, we
   // will update the value based on the value of the first selectable option.
@@ -908,9 +919,3 @@ // We call the update directly because:
   devUtils.useCheckStyles("listbox");
-  return /*#__PURE__*/React.createElement(descendants.DescendantProvider, {
-    context: ListboxDescendantContext,
-    items: options,
-    set: setOptions
-  }, /*#__PURE__*/React.createElement(ListboxContext.Provider, {
-    value: context
-  }, /*#__PURE__*/React.createElement(Comp, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(Comp, _extends({}, props, {
     ref: ref,
@@ -921,3 +926,9 @@ "data-reach-listbox-input": "",
     id: id
-  }), typeCheck.isFunction(children) ? children({
+  }), /*#__PURE__*/React.createElement(ListboxContext.Provider, {
+    value: context
+  }, /*#__PURE__*/React.createElement(descendants.DescendantProvider, {
+    context: ListboxDescendantContext,
+    items: options,
+    set: setOptions
+  }, typeCheck.isFunction(children) ? children({
     id: id,
@@ -931,3 +942,3 @@ isExpanded: isExpanded,
     expanded: isExpanded
-  }) : children), (form || name || required) && /*#__PURE__*/React.createElement("input", {
+  }) : children, (form || name || required) && /*#__PURE__*/React.createElement("input", {
     ref: hiddenInputRef,
@@ -943,3 +954,3 @@ "data-reach-listbox-hidden-input": "",
     value: state.context.value || ""
-  })));
+  }))));
 });
@@ -974,3 +985,3 @@ /**
       portal = _ref2$portal === void 0 ? true : _ref2$portal,
-      props = _objectWithoutPropertiesLoose(_ref2, ["arrow", "button", "children", "portal"]);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
@@ -1018,7 +1029,8 @@ return /*#__PURE__*/React.createElement(ListboxInput, _extends({}, props, {
       onMouseUp = _ref4.onMouseUp,
-      props = _objectWithoutPropertiesLoose(_ref4, ["aria-label", "arrow", "as", "children", "onKeyDown", "onMouseDown", "onMouseUp"]);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded3);
 
   var _React$useContext = React.useContext(ListboxContext),
+      buttonRef = _React$useContext.buttonRef,
+      send = _React$useContext.send,
       ariaLabelledBy = _React$useContext.ariaLabelledBy,
-      buttonRef = _React$useContext.buttonRef,
       disabled = _React$useContext.disabled,
@@ -1028,3 +1040,2 @@ isExpanded = _React$useContext.isExpanded,
       stateData = _React$useContext.stateData,
-      send = _React$useContext.send,
       listboxValueLabel = _React$useContext.listboxValueLabel;
@@ -1133,3 +1144,3 @@
       children = _ref5.children,
-      props = _objectWithoutPropertiesLoose(_ref5, ["as", "children"]);
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded4);
 
@@ -1175,12 +1186,13 @@ var _React$useContext2 = React.useContext(ListboxContext),
       onKeyDown = _ref6.onKeyDown,
+      onMouseUp = _ref6.onMouseUp,
       _ref6$portal = _ref6.portal,
       portal = _ref6$portal === void 0 ? true : _ref6$portal,
       unstable_observableRefs = _ref6.unstable_observableRefs,
-      props = _objectWithoutPropertiesLoose(_ref6, ["as", "position", "onBlur", "onKeyDown", "portal", "unstable_observableRefs"]);
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded5);
 
   var _React$useContext3 = React.useContext(ListboxContext),
+      isExpanded = _React$useContext3.isExpanded,
       buttonRef = _React$useContext3.buttonRef,
       popoverRef = _React$useContext3.popoverRef,
-      send = _React$useContext3.send,
-      isExpanded = _React$useContext3.isExpanded;
+      send = _React$useContext3.send;
 
@@ -1190,2 +1202,8 @@ var ref = composeRefs.useComposedRefs(popoverRef, forwardedRef);
 
+  function handleMouseUp() {
+    send({
+      type: ListboxEvents.ListMouseUp
+    });
+  }
+
   var commonProps = _extends({
@@ -1197,2 +1215,3 @@ hidden: !isExpanded,
     "data-reach-listbox-popover": "",
+    onMouseUp: composeEventHandlers.composeEventHandlers(onMouseUp, handleMouseUp),
     onBlur: composeEventHandlers.composeEventHandlers(onBlur, handleBlur),
@@ -1237,5 +1256,6 @@ onKeyDown: composeEventHandlers.composeEventHandlers(onKeyDown, handleKeyDown)
       Comp = _ref7$as === void 0 ? "ul" : _ref7$as,
-      props = _objectWithoutPropertiesLoose(_ref7, ["as"]);
+      props = _objectWithoutPropertiesLoose(_ref7, _excluded6);
 
   var _React$useContext4 = React.useContext(ListboxContext),
+      listRef = _React$useContext4.listRef,
       ariaLabel = _React$useContext4.ariaLabel,
@@ -1245,3 +1265,2 @@ ariaLabelledBy = _React$useContext4.ariaLabelledBy,
       listboxId = _React$useContext4.listboxId,
-      listRef = _React$useContext4.listRef,
       _React$useContext4$st = _React$useContext4.stateData,
@@ -1309,10 +1328,10 @@ value = _React$useContext4$st.value,
       labelProp = _ref8.label,
-      props = _objectWithoutPropertiesLoose(_ref8, ["as", "children", "disabled", "onClick", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseUp", "onTouchStart", "value", "label"]);
+      props = _objectWithoutPropertiesLoose(_ref8, _excluded7);
 
   var _React$useContext5 = React.useContext(ListboxContext),
       highlightedOptionRef = _React$useContext5.highlightedOptionRef,
+      selectedOptionRef = _React$useContext5.selectedOptionRef,
+      send = _React$useContext5.send,
       isExpanded = _React$useContext5.isExpanded,
       onValueChange = _React$useContext5.onValueChange,
-      selectedOptionRef = _React$useContext5.selectedOptionRef,
-      send = _React$useContext5.send,
       state = _React$useContext5.state,
@@ -1475,3 +1494,3 @@ _React$useContext5$st = _React$useContext5.stateData,
       children = _ref9.children,
-      props = _objectWithoutPropertiesLoose(_ref9, ["as", "label", "children"]);
+      props = _objectWithoutPropertiesLoose(_ref9, _excluded8);
 
@@ -1513,3 +1532,3 @@ var _React$useContext6 = React.useContext(ListboxContext),
       Comp = _ref10$as === void 0 ? "span" : _ref10$as,
-      props = _objectWithoutPropertiesLoose(_ref10, ["as"]);
+      props = _objectWithoutPropertiesLoose(_ref10, _excluded9);
 
@@ -1544,6 +1563,6 @@ var _React$useContext7 = React.useContext(ListboxGroupContext),
       highlightedOptionRef = _React$useContext8.highlightedOptionRef,
+      selectedOptionRef = _React$useContext8.selectedOptionRef,
       listboxId = _React$useContext8.listboxId,
       listboxValueLabel = _React$useContext8.listboxValueLabel,
       isExpanded = _React$useContext8.isExpanded,
-      selectedOptionRef = _React$useContext8.selectedOptionRef,
       value = _React$useContext8.stateData.value;
@@ -1570,2 +1589,3 @@
   var _React$useContext9 = React.useContext(ListboxContext),
+      send = _React$useContext9.send,
       listboxDisabled = _React$useContext9.disabled,
@@ -1575,6 +1595,6 @@ onValueChange = _React$useContext9.onValueChange,
       navigationValue = _React$useContext9$st.navigationValue,
-      typeaheadQuery = _React$useContext9$st.typeaheadQuery,
-      send = _React$useContext9.send;
+      typeaheadQuery = _React$useContext9$st.typeaheadQuery;
 
   var options = descendants.useDescendants(ListboxDescendantContext);
+  var stableOnValueChange = useStableCallback.useStableCallback(onValueChange);
   React.useEffect(function () {
@@ -1585,3 +1605,3 @@ if (typeaheadQuery) {
         query: typeaheadQuery,
-        callback: onValueChange
+        callback: stableOnValueChange
       });
@@ -1600,3 +1620,3 @@ }
     };
-  }, [onValueChange, send, typeaheadQuery]);
+  }, [stableOnValueChange, send, typeaheadQuery]);
   var index = options.findIndex(function (_ref11) {
@@ -1603,0 +1623,0 @@ var value = _ref11.value;

dist/reach-listbox.esm.js

@@ -7,4 +7,4 @@ import { forwardRef, useRef, useMemo, useEffect, createElement, Fragment, useContext, memo, useState, useCallback } from 'react';
 import { isRightClick } from '@reach/utils/is-right-click';
+import { useIsomorphicLayoutEffect } from '@reach/utils/use-isomorphic-layout-effect';
 import { useStableCallback } from '@reach/utils/use-stable-callback';
-import { useIsomorphicLayoutEffect } from '@reach/utils/use-isomorphic-layout-effect';
 import { createNamedContext } from '@reach/utils/context';
@@ -89,2 +89,3 @@ import { isFunction, isBoolean, isString } from '@reach/utils/type-check';
   ListboxEvents["OptionClick"] = "OPTION_CLICK";
+  ListboxEvents["ListMouseUp"] = "LIST_MOUSE_UP";
   ListboxEvents["OptionPress"] = "OPTION_PRESS";
@@ -473,2 +474,5 @@ ListboxEvents["OutsideMouseDown"] = "OUTSIDE_MOUSE_DOWN";
         actions: [navigateFromCurrentValue, focusList]
+      }, _extends4[ListboxEvents.ListMouseUp] = {
+        target: ListboxStates.Navigating,
+        actions: [navigateFromCurrentValue, focusList]
       }, _extends4[ListboxEvents.OptionTouchStart] = {
@@ -705,2 +709,11 @@ target: ListboxStates.Navigating,
 
+var _excluded = ["as", "aria-labelledby", "aria-label", "children", "defaultValue", "disabled", "form", "name", "onChange", "required", "value", "__componentName"],
+    _excluded2 = ["arrow", "button", "children", "portal"],
+    _excluded3 = ["aria-label", "arrow", "as", "children", "onKeyDown", "onMouseDown", "onMouseUp"],
+    _excluded4 = ["as", "children"],
+    _excluded5 = ["as", "position", "onBlur", "onKeyDown", "onMouseUp", "portal", "unstable_observableRefs"],
+    _excluded6 = ["as"],
+    _excluded7 = ["as", "children", "disabled", "onClick", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseUp", "onTouchStart", "value", "label"],
+    _excluded8 = ["as", "label", "children"],
+    _excluded9 = ["as"];
 var DEBUG = false; ////////////////////////////////////////////////////////////////////////////////
@@ -737,3 +750,3 @@ // ListboxContext
       __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"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
@@ -772,8 +785,9 @@ var isControlled = useRef(valueProp != null);
 
-  var stableOnChange = useStableCallback(function (newValue) {
+  function handleValueChange(newValue) {
     if (newValue !== state.context.value) {
       onChange == null ? void 0 : onChange(newValue);
     }
-  }); // IDs for aria attributes
+  } // IDs for aria attributes
 
+
   var _id = useId(props.id);
@@ -796,23 +810,20 @@
   }, [options, state.context.value]);
-  var isExpanded = isListboxExpanded(state.value); // TODO: Remove duplication and memoize
-
-  var context = useMemo(function () {
-    return {
-      ariaLabel: ariaLabel,
-      ariaLabelledBy: ariaLabelledBy,
-      disabled: disabled,
-      isExpanded: isExpanded,
-      listboxId: id,
-      listboxValueLabel: valueLabel,
-      onValueChange: stableOnChange,
-      buttonRef: buttonRef,
-      listRef: listRef,
-      popoverRef: popoverRef,
-      selectedOptionRef: selectedOptionRef,
-      highlightedOptionRef: highlightedOptionRef,
-      send: send,
-      state: state.value,
-      stateData: state.context
-    };
-  }, [ariaLabel, ariaLabelledBy, state.value, state.context, disabled, id, isExpanded, stableOnChange, send, valueLabel]); // For uncontrolled listbox components where no `defaultValue` is provided, we
+  var isExpanded = isListboxExpanded(state.value);
+  var context = {
+    ariaLabel: ariaLabel,
+    ariaLabelledBy: ariaLabelledBy,
+    buttonRef: buttonRef,
+    disabled: disabled,
+    highlightedOptionRef: highlightedOptionRef,
+    isExpanded: isExpanded,
+    listboxId: id,
+    listboxValueLabel: valueLabel,
+    listRef: listRef,
+    onValueChange: handleValueChange,
+    popoverRef: popoverRef,
+    selectedOptionRef: selectedOptionRef,
+    send: send,
+    state: state.value,
+    stateData: state.context
+  }; // For uncontrolled listbox components where no `defaultValue` is provided, we
   // will update the value based on the value of the first selectable option.
@@ -904,9 +915,3 @@ // We call the update directly because:
   useCheckStyles("listbox");
-  return /*#__PURE__*/createElement(DescendantProvider, {
-    context: ListboxDescendantContext,
-    items: options,
-    set: setOptions
-  }, /*#__PURE__*/createElement(ListboxContext.Provider, {
-    value: context
-  }, /*#__PURE__*/createElement(Comp, _extends({}, props, {
+  return /*#__PURE__*/createElement(Comp, _extends({}, props, {
     ref: ref,
@@ -917,3 +922,9 @@ "data-reach-listbox-input": "",
     id: id
-  }), isFunction(children) ? children({
+  }), /*#__PURE__*/createElement(ListboxContext.Provider, {
+    value: context
+  }, /*#__PURE__*/createElement(DescendantProvider, {
+    context: ListboxDescendantContext,
+    items: options,
+    set: setOptions
+  }, isFunction(children) ? children({
     id: id,
@@ -927,3 +938,3 @@ isExpanded: isExpanded,
     expanded: isExpanded
-  }) : children), (form || name || required) && /*#__PURE__*/createElement("input", {
+  }) : children, (form || name || required) && /*#__PURE__*/createElement("input", {
     ref: hiddenInputRef,
@@ -939,3 +950,3 @@ "data-reach-listbox-hidden-input": "",
     value: state.context.value || ""
-  })));
+  }))));
 });
@@ -984,3 +995,3 @@
       portal = _ref2$portal === void 0 ? true : _ref2$portal,
-      props = _objectWithoutPropertiesLoose(_ref2, ["arrow", "button", "children", "portal"]);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
@@ -1037,7 +1048,8 @@ return /*#__PURE__*/createElement(ListboxInput, _extends({}, props, {
       onMouseUp = _ref4.onMouseUp,
-      props = _objectWithoutPropertiesLoose(_ref4, ["aria-label", "arrow", "as", "children", "onKeyDown", "onMouseDown", "onMouseUp"]);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded3);
 
   var _React$useContext = useContext(ListboxContext),
+      buttonRef = _React$useContext.buttonRef,
+      send = _React$useContext.send,
       ariaLabelledBy = _React$useContext.ariaLabelledBy,
-      buttonRef = _React$useContext.buttonRef,
       disabled = _React$useContext.disabled,
@@ -1047,3 +1059,2 @@ isExpanded = _React$useContext.isExpanded,
       stateData = _React$useContext.stateData,
-      send = _React$useContext.send,
       listboxValueLabel = _React$useContext.listboxValueLabel;
@@ -1160,3 +1171,3 @@
       children = _ref5.children,
-      props = _objectWithoutPropertiesLoose(_ref5, ["as", "children"]);
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded4);
 
@@ -1209,12 +1220,13 @@ var _React$useContext2 = useContext(ListboxContext),
       onKeyDown = _ref6.onKeyDown,
+      onMouseUp = _ref6.onMouseUp,
       _ref6$portal = _ref6.portal,
       portal = _ref6$portal === void 0 ? true : _ref6$portal,
       unstable_observableRefs = _ref6.unstable_observableRefs,
-      props = _objectWithoutPropertiesLoose(_ref6, ["as", "position", "onBlur", "onKeyDown", "portal", "unstable_observableRefs"]);
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded5);
 
   var _React$useContext3 = useContext(ListboxContext),
+      isExpanded = _React$useContext3.isExpanded,
       buttonRef = _React$useContext3.buttonRef,
       popoverRef = _React$useContext3.popoverRef,
-      send = _React$useContext3.send,
-      isExpanded = _React$useContext3.isExpanded;
+      send = _React$useContext3.send;
 
@@ -1224,2 +1236,8 @@ var ref = useComposedRefs(popoverRef, forwardedRef);
 
+  function handleMouseUp() {
+    send({
+      type: ListboxEvents.ListMouseUp
+    });
+  }
+
   var commonProps = _extends({
@@ -1231,2 +1249,3 @@ hidden: !isExpanded,
     "data-reach-listbox-popover": "",
+    onMouseUp: composeEventHandlers(onMouseUp, handleMouseUp),
     onBlur: composeEventHandlers(onBlur, handleBlur),
@@ -1280,5 +1299,6 @@ onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown)
       Comp = _ref7$as === void 0 ? "ul" : _ref7$as,
-      props = _objectWithoutPropertiesLoose(_ref7, ["as"]);
+      props = _objectWithoutPropertiesLoose(_ref7, _excluded6);
 
   var _React$useContext4 = useContext(ListboxContext),
+      listRef = _React$useContext4.listRef,
       ariaLabel = _React$useContext4.ariaLabel,
@@ -1288,3 +1308,2 @@ ariaLabelledBy = _React$useContext4.ariaLabelledBy,
       listboxId = _React$useContext4.listboxId,
-      listRef = _React$useContext4.listRef,
       _React$useContext4$st = _React$useContext4.stateData,
@@ -1357,3 +1376,3 @@ value = _React$useContext4$st.value,
       labelProp = _ref8.label,
-      props = _objectWithoutPropertiesLoose(_ref8, ["as", "children", "disabled", "onClick", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseMove", "onMouseUp", "onTouchStart", "value", "label"]);
+      props = _objectWithoutPropertiesLoose(_ref8, _excluded7);
 
@@ -1366,6 +1385,6 @@ if (process.env.NODE_ENV !== "production" && !value) {
       highlightedOptionRef = _React$useContext5.highlightedOptionRef,
+      selectedOptionRef = _React$useContext5.selectedOptionRef,
+      send = _React$useContext5.send,
       isExpanded = _React$useContext5.isExpanded,
       onValueChange = _React$useContext5.onValueChange,
-      selectedOptionRef = _React$useContext5.selectedOptionRef,
-      send = _React$useContext5.send,
       state = _React$useContext5.state,
@@ -1537,3 +1556,3 @@ _React$useContext5$st = _React$useContext5.stateData,
       children = _ref9.children,
-      props = _objectWithoutPropertiesLoose(_ref9, ["as", "label", "children"]);
+      props = _objectWithoutPropertiesLoose(_ref9, _excluded8);
 
@@ -1582,3 +1601,3 @@ var _React$useContext6 = useContext(ListboxContext),
       Comp = _ref10$as === void 0 ? "span" : _ref10$as,
-      props = _objectWithoutPropertiesLoose(_ref10, ["as"]);
+      props = _objectWithoutPropertiesLoose(_ref10, _excluded9);
 
@@ -1618,6 +1637,6 @@ var _React$useContext7 = useContext(ListboxGroupContext),
       highlightedOptionRef = _React$useContext8.highlightedOptionRef,
+      selectedOptionRef = _React$useContext8.selectedOptionRef,
       listboxId = _React$useContext8.listboxId,
       listboxValueLabel = _React$useContext8.listboxValueLabel,
       isExpanded = _React$useContext8.isExpanded,
-      selectedOptionRef = _React$useContext8.selectedOptionRef,
       value = _React$useContext8.stateData.value;
@@ -1644,2 +1663,3 @@
   var _React$useContext9 = useContext(ListboxContext),
+      send = _React$useContext9.send,
       listboxDisabled = _React$useContext9.disabled,
@@ -1649,6 +1669,6 @@ onValueChange = _React$useContext9.onValueChange,
       navigationValue = _React$useContext9$st.navigationValue,
-      typeaheadQuery = _React$useContext9$st.typeaheadQuery,
-      send = _React$useContext9.send;
+      typeaheadQuery = _React$useContext9$st.typeaheadQuery;
 
   var options = useDescendants(ListboxDescendantContext);
+  var stableOnValueChange = useStableCallback(onValueChange);
   useEffect(function () {
@@ -1659,3 +1679,3 @@ if (typeaheadQuery) {
         query: typeaheadQuery,
-        callback: onValueChange
+        callback: stableOnValueChange
       });
@@ -1674,3 +1694,3 @@ }
     };
-  }, [onValueChange, send, typeaheadQuery]);
+  }, [stableOnValueChange, send, typeaheadQuery]);
   var index = options.findIndex(function (_ref11) {
@@ -1677,0 +1697,0 @@ var value = _ref11.value;

package.json

 {
   "name": "@reach/listbox",
-  "version": "0.15.0",
+  "version": "0.15.2",
   "description": "Accessible React listbox input.",
@@ -16,7 +16,7 @@ "author": "React Training <[e-mail]>",
   "dependencies": {
-    "@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",
+    "@reach/auto-id": "0.15.2",
+    "@reach/descendants": "0.15.2",
+    "@reach/machine": "0.15.2",
+    "@reach/popover": "0.15.2",
+    "@reach/utils": "0.15.2",
     "prop-types": "^15.7.2"
@@ -44,3 +44,3 @@ },
   ],
-  "gitHead": "1449650359c119c1afe25973aa7584e09e2c88bc"
+  "gitHead": "353f409a296a648c4fe2c2d06b14a39b7b6dc3e1"
 }

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

213688

increased by0.74%

Lines of code

5383

increased by1.13%

Dependency changes

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

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

• + Added@reach/machine@0.15.2(transitive)

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

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

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

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

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

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

• - Removed@reach/machine@0.15.0(transitive)

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

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

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

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

• Updated@reach/auto-id@0.15.2

• Updated@reach/descendants@0.15.2

• Updated@reach/machine@0.15.2

• Updated@reach/popover@0.15.2

• Updated@reach/utils@0.15.2