@reach/listbox - npm Package Compare versions

Comparing version 0.10.3 to 0.10.4

dist/index.d.ts

@@ -23,3 +23,3 @@ /**
  * @see Docs     https://reacttraining.com/reach-ui/listbox
- * @see Source   https://github.com/reach/reach-ui/tree/master/packages/listbox
+ * @see Source   https://github.com/reach/reach-ui/tree/main/packages/listbox
  * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox
@@ -67,3 +67,3 @@ */
      */
-    onChange?(newValue: string): void;
+    onChange?(newValue: ListboxValue): void;
     /**
@@ -163,3 +163,3 @@ * The current value of a controlled listbox.
 };
-export declare const ListboxButton: React.NamedExoticComponent<import("@reach/utils").PropsWithAs<"span", ListboxButtonProps>>;
+export declare const ListboxButton: import("@reach/utils").ComponentWithAs<"span", ListboxButtonProps>;
 /**
@@ -166,0 +166,0 @@ * @see Docs https://reacttraining.com/reach-ui/listbox#listboxbutton-props

dist/listbox.cjs.development.js

@@ -291,3 +291,3 @@ 'use strict';
   actions: /*#__PURE__*/machine.assign(function (ctx, event) {
-    return _extends(_extends({}, ctx), event.data);
+    return _extends({}, ctx, event.data);
   })
@@ -319,3 +319,3 @@ }, _commonEvents[ListboxEvents.ValueChange] = {
     states: (_states = {}, _states[ListboxStates.Idle] = {
-      on: _extends(_extends({}, commonEvents), {}, (_extends2 = {}, _extends2[ListboxEvents.ButtonMouseDown] = {
+      on: _extends({}, commonEvents, (_extends2 = {}, _extends2[ListboxEvents.ButtonMouseDown] = {
         target: ListboxStates.Open,
@@ -349,3 +349,3 @@ actions: [navigateFromCurrentValue],
       entry: [clearNavigationValue],
-      on: _extends(_extends({}, commonEvents), {}, (_extends3 = {}, _extends3[ListboxEvents.ClearNavSelection] = {
+      on: _extends({}, commonEvents, (_extends3 = {}, _extends3[ListboxEvents.ClearNavSelection] = {
         actions: [clearNavigationValue, focusList]
@@ -417,3 +417,3 @@ }, _extends3[ListboxEvents.KeyDownEnter] = {
     }, _states[ListboxStates.Open] = {
-      on: _extends(_extends({}, commonEvents), {}, (_extends4 = {}, _extends4[ListboxEvents.ClearNavSelection] = {
+      on: _extends({}, commonEvents, (_extends4 = {}, _extends4[ListboxEvents.ClearNavSelection] = {
         actions: [clearNavigationValue]
@@ -491,3 +491,3 @@ }, _extends4[ListboxEvents.KeyDownEnter] = {
     }, _states[ListboxStates.Dragging] = {
-      on: _extends(_extends({}, commonEvents), {}, (_extends5 = {}, _extends5[ListboxEvents.ClearNavSelection] = {
+      on: _extends({}, commonEvents, (_extends5 = {}, _extends5[ListboxEvents.ClearNavSelection] = {
         actions: [clearNavigationValue]
@@ -574,3 +574,3 @@ }, _extends5[ListboxEvents.KeyDownEnter] = {
     }, _states[ListboxStates.Navigating] = {
-      on: _extends(_extends({}, commonEvents), {}, (_extends6 = {}, _extends6[ListboxEvents.ClearNavSelection] = {
+      on: _extends({}, commonEvents, (_extends6 = {}, _extends6[ListboxEvents.ClearNavSelection] = {
         actions: [clearNavigationValue, focusList]
@@ -956,3 +956,3 @@ }, _extends6[ListboxEvents.KeyDownEnter] = {
   Listbox.displayName = "Listbox";
-  Listbox.propTypes = /*#__PURE__*/_extends( /*#__PURE__*/_extends({}, ListboxInput.propTypes), {}, {
+  Listbox.propTypes = /*#__PURE__*/_extends({}, ListboxInput.propTypes, {
     arrow: /*#__PURE__*/PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
@@ -1073,3 +1073,3 @@ button: /*#__PURE__*/PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
 
-var ListboxButton = /*#__PURE__*/React.memo(ListboxButtonImpl); ////////////////////////////////////////////////////////////////////////////////
+var ListboxButton = /*#__PURE__*/utils.memoWithAs(ListboxButtonImpl); ////////////////////////////////////////////////////////////////////////////////
 
@@ -1140,6 +1140,6 @@ /**
 
-  var commonProps = _extends(_extends({
+  var commonProps = _extends({
     hidden: !isExpanded,
     tabIndex: -1
-  }, props), {}, {
+  }, props, {
     ref: ref,
@@ -1146,0 +1146,0 @@ "data-reach-listbox-popover": "",

dist/listbox.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t);require("prop-types");var a,o,i,r=require("@reach/auto-id"),u=require("@reach/popover"),s=e(u),l=require("@reach/descendants"),d=require("@reach/utils"),c=require("@reach/machine");function g(){return(g=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}function v(e,t){if(null==e)return{};var n,a,o={},i=Object.keys(e);for(a=0;a<i.length;a++)t.indexOf(n=i[a])>=0||(o[n]=e[n]);return o}!function(e){e.Idle="IDLE",e.Open="OPEN",e.Navigating="NAVIGATING",e.Dragging="DRAGGING",e.Interacting="INTERACTING"}(o||(o={})),function(e){e.ButtonMouseDown="BUTTON_MOUSE_DOWN",e.ButtonMouseUp="BUTTON_MOUSE_UP",e.Blur="BLUR",e.ClearNavSelection="CLEAR_NAV_SELECTION",e.ClearTypeahead="CLEAR_TYPEAHEAD",e.GetDerivedData="GET_DERIVED_DATA",e.KeyDownEscape="KEY_DOWN_ESCAPE",e.KeyDownEnter="KEY_DOWN_ENTER",e.KeyDownSpace="KEY_DOWN_SPACE",e.KeyDownNavigate="KEY_DOWN_NAVIGATE",e.KeyDownSearch="KEY_DOWN_SEARCH",e.KeyDownTab="KEY_DOWN_TAB",e.KeyDownShiftTab="KEY_DOWN_SHIFT_TAB",e.OptionTouchStart="OPTION_TOUCH_START",e.OptionMouseMove="OPTION_MOUSE_MOVE",e.OptionMouseEnter="OPTION_MOUSE_ENTER",e.OutsideMouseDown="OUTSIDE_MOUSE_DOWN",e.OutsideMouseUp="OUTSIDE_MOUSE_UP",e.ValueChange="VALUE_CHANGE",e.OptionMouseDown="OPTION_MOUSE_DOWN",e.OptionMouseUp="OPTION_MOUSE_UP",e.PopoverPointerDown="POPOVER_POINTER_DOWN",e.PopoverPointerUp="POPOVER_POINTER_UP",e.UpdateAfterTypeahead="UPDATE_AFTER_TYPEAHEAD"}(i||(i={}));var p=c.assign({navigationValue:null}),f=c.assign({typeaheadQuery:null}),b=c.assign({value:function(e,t){return t.value}}),E=c.assign({navigationValue:function(e,t){return t.value}}),y=c.assign({navigationValue:function(e){var t,n,a=(t=e.value)?e.options.find((function(e){return e.value===t})):void 0;return a&&!a.disabled?e.value:(null===(n=e.options.find((function(e){return!e.disabled})))||void 0===n?void 0:n.value)||null}});function D(e,t){if(t.type===i.Blur){var n=t.refs,a=n.list,o=n.popover,r=t.relatedTarget,u=o&&d.getOwnerDocument(o)||document;return!(u.activeElement===a||!o||o.contains(r||u.activeElement))}return!1}function h(e,t){if(t.type===i.OutsideMouseDown||t.type===i.OutsideMouseUp){var n=t.refs,a=n.button,o=n.popover,r=t.relatedTarget;return!(r===a||!a||a.contains(r)||!o||o.contains(r))}return!1}function w(e,t){return!!e.options.find((function(t){return t.value===e.navigationValue}))}function O(e,t){var n=t.refs,a=n.popover,o=n.list,i=t.relatedTarget;return!(a&&i&&a.contains(i)&&i!==o)&&w(e)}function x(e,t){requestAnimationFrame((function(){t.refs.list&&t.refs.list.focus()}))}function I(e,t){t.refs.button&&t.refs.button.focus()}function M(e,t){return!t.disabled}function N(e,t){return t.type!==i.OptionTouchStart||!t||!t.disabled}function m(e,t){return!(t&&t.disabled||null==e.navigationValue)}function T(e,t){t.callback&&t.callback(t.value)}function R(e,t){if(t.type===i.KeyDownEnter){var n=t.refs.hiddenInput;if(n&&n.form){var a=n.form.querySelector("button,[type='submit']");a&&a.click()}}}var C=c.assign({typeaheadQuery:function(e,t){return(e.typeaheadQuery||"")+t.query}}),K=c.assign({value:function(e,t){if(t.type===i.UpdateAfterTypeahead&&t.query){var n=U(e.options,t.query);if(n&&!n.disabled)return t.callback&&t.callback(n.value),n.value}return e.value}}),_=c.assign({navigationValue:function(e,t){if(t.type===i.UpdateAfterTypeahead&&t.query){var n=U(e.options,t.query);if(n&&!n.disabled)return n.value}return e.navigationValue}}),S=((a={})[i.GetDerivedData]={actions:c.assign((function(e,t){return g(g({},e),t.data)}))},a[i.ValueChange]={actions:[b,T]},a);function U(e,t){return void 0===t&&(t=""),t&&e.find((function(e){return!e.disabled&&e.label&&e.label.toLowerCase().startsWith(t.toLowerCase())}))||null}var L=l.createDescendantContext("ListboxDescendantContext"),A=d.createNamedContext("ListboxContext",{}),P=d.createNamedContext("ListboxGroupContext",{}),B=t.forwardRef((function(e,a){var u=e["aria-labelledby"],s=e["aria-label"],U=e.children,P=e.defaultValue,B=e.disabled,V=void 0!==B&&B,k=e.form,q=e.name,W=e.onChange,j=e.required,G=e.value,F=e._componentName,Y=void 0===F?"ListboxInput":F,H=v(e,["aria-labelledby","aria-label","children","defaultValue","disabled","form","name","onChange","required","value","_componentName"]),Q=t.useRef(null!=G),z=l.useDescendantsInit(),J=z[0],X=z[1],$=d.useCallbackProp(W),ee=t.useRef(null),te=t.useRef(null),ne=t.useRef(null),ae=t.useRef(null),oe=t.useRef(null),ie=t.useRef(null),re=t.useRef(null),ue=c.useCreateMachine(function(e){var t,n,a,r,u,s;return{id:"listbox",initial:o.Idle,context:{value:e.value,options:[],navigationValue:null,typeaheadQuery:null},states:(s={},s[o.Idle]={on:g(g({},S),{},(t={},t[i.ButtonMouseDown]={target:o.Open,actions:[y],cond:M},t[i.KeyDownSpace]={target:o.Navigating,actions:[y,x],cond:M},t[i.KeyDownSearch]={target:o.Idle,actions:C,cond:M},t[i.UpdateAfterTypeahead]={target:o.Idle,actions:[K],cond:M},t[i.ClearTypeahead]={target:o.Idle,actions:f},t[i.KeyDownNavigate]={target:o.Navigating,actions:[y,f,x],cond:M},t[i.KeyDownEnter]={actions:[R],cond:M},t))},s[o.Interacting]={entry:[p],on:g(g({},S),{},(n={},n[i.ClearNavSelection]={actions:[p,x]},n[i.KeyDownEnter]={target:o.Idle,actions:[b,f,I,T],cond:m},n[i.KeyDownSpace]={target:o.Idle,actions:[b,f,I,T],cond:m},n[i.ButtonMouseDown]={target:o.Idle,actions:[I]},n[i.KeyDownEscape]={target:o.Idle,actions:[I]},n[i.OptionMouseDown]={target:o.Dragging},n[i.OutsideMouseDown]=[{target:o.Idle,cond:h,actions:f},{target:o.Dragging,actions:f,cond:w}],n[i.OutsideMouseUp]=[{target:o.Idle,cond:h,actions:f},{target:o.Navigating,cond:w},{target:o.Interacting,actions:f}],n[i.KeyDownEnter]=o.Interacting,n[i.Blur]=[{target:o.Idle,cond:D,actions:f},{target:o.Navigating,cond:O},{target:o.Interacting,actions:f}],n[i.OptionTouchStart]={target:o.Navigating,actions:[E,f],cond:N},n[i.OptionMouseEnter]={target:o.Navigating,actions:[E,f],cond:N},n[i.KeyDownNavigate]={target:o.Navigating,actions:[E,f,x]},n))},s[o.Open]={on:g(g({},S),{},(a={},a[i.ClearNavSelection]={actions:[p]},a[i.KeyDownEnter]={target:o.Idle,actions:[b,f,I,T],cond:m},a[i.KeyDownSpace]={target:o.Idle,actions:[b,f,I,T],cond:m},a[i.ButtonMouseDown]={target:o.Idle,actions:[I]},a[i.KeyDownEscape]={target:o.Idle,actions:[I]},a[i.OptionMouseDown]={target:o.Dragging},a[i.OutsideMouseDown]=[{target:o.Idle,cond:h,actions:f},{target:o.Dragging,cond:w},{target:o.Interacting,actions:f}],a[i.OutsideMouseUp]=[{target:o.Idle,cond:h,actions:f},{target:o.Navigating,cond:w},{target:o.Interacting,actions:f}],a[i.Blur]=[{target:o.Idle,cond:D,actions:f},{target:o.Navigating,cond:O},{target:o.Interacting,actions:f}],a[i.ButtonMouseUp]={target:o.Navigating,actions:[y,x]},a[i.OptionTouchStart]={target:o.Navigating,actions:[E,f],cond:N},a[i.KeyDownNavigate]={target:o.Navigating,actions:[E,f,x]},a[i.KeyDownSearch]={target:o.Navigating,actions:C},a[i.UpdateAfterTypeahead]={actions:[_]},a[i.ClearTypeahead]={actions:f},a[i.OptionMouseMove]=[{target:o.Dragging,actions:[E],cond:N},{target:o.Dragging}],a))},s[o.Dragging]={on:g(g({},S),{},(r={},r[i.ClearNavSelection]={actions:[p]},r[i.KeyDownEnter]={target:o.Idle,actions:[b,f,I,T],cond:m},r[i.KeyDownSpace]={target:o.Idle,actions:[b,f,I,T],cond:m},r[i.ButtonMouseDown]={target:o.Idle,actions:[I]},r[i.KeyDownEscape]={target:o.Idle,actions:[I]},r[i.OptionMouseDown]={target:o.Dragging},r[i.OutsideMouseDown]=[{target:o.Idle,cond:h,actions:f},{target:o.Navigating,cond:w},{target:o.Interacting,actions:f}],r[i.OutsideMouseUp]=[{target:o.Idle,cond:h,actions:f},{target:o.Navigating,cond:w,actions:x},{target:o.Interacting,actions:[f,x]}],r[i.Blur]=[{target:o.Idle,cond:D,actions:f},{target:o.Navigating,cond:O},{target:o.Interacting,actions:f}],r[i.ButtonMouseUp]={target:o.Navigating,actions:[y,x]},r[i.OptionTouchStart]={target:o.Navigating,actions:[E,f],cond:N},r[i.OptionMouseEnter]={target:o.Dragging,actions:[E,f],cond:N},r[i.KeyDownNavigate]={target:o.Navigating,actions:[E,f,x]},r[i.KeyDownSearch]={target:o.Navigating,actions:C},r[i.UpdateAfterTypeahead]={actions:[_]},r[i.ClearTypeahead]={actions:f},r[i.OptionMouseMove]=[{target:o.Navigating,actions:[E],cond:N},{target:o.Navigating}],r[i.OptionMouseUp]={target:o.Idle,actions:[b,f,I,T],cond:m},r))},s[o.Navigating]={on:g(g({},S),{},(u={},u[i.ClearNavSelection]={actions:[p,x]},u[i.KeyDownEnter]={target:o.Idle,actions:[b,f,I,T],cond:m},u[i.KeyDownSpace]={target:o.Idle,actions:[b,f,I,T],cond:m},u[i.ButtonMouseDown]={target:o.Idle,actions:[I]},u[i.KeyDownEscape]={target:o.Idle,actions:[I]},u[i.OptionMouseDown]={target:o.Dragging},u[i.OutsideMouseDown]=[{target:o.Idle,cond:h,actions:f},{target:o.Navigating,cond:w},{target:o.Interacting,actions:f}],u[i.OutsideMouseUp]=[{target:o.Idle,cond:h,actions:f},{target:o.Navigating,cond:w},{target:o.Interacting,actions:f}],u[i.Blur]=[{target:o.Idle,cond:D,actions:f},{target:o.Navigating,cond:O},{target:o.Interacting,actions:f}],u[i.ButtonMouseUp]={target:o.Navigating,actions:[y,x]},u[i.OptionTouchStart]={target:o.Navigating,actions:[E,f],cond:N},u[i.OptionMouseEnter]={target:o.Navigating,actions:[E,f],cond:N},u[i.KeyDownNavigate]={target:o.Navigating,actions:[E,f,x]},u[i.KeyDownSearch]={target:o.Navigating,actions:C},u[i.UpdateAfterTypeahead]={actions:[_]},u[i.ClearTypeahead]={actions:f},u[i.OptionMouseMove]=[{target:o.Navigating,actions:[E],cond:N},{target:o.Navigating}],u))},s)}}({value:(Q.current?G:P)||null})),se=c.useMachine(ue,{button:ee,hiddenInput:te,highlightedOption:ne,input:ae,list:oe,popover:ie,selectedOption:re},!1),le=se[0],de=se[1],ce=r.useId(H.id),ge=H.id||d.makeId("listbox-input",ce),ve=d.useForkedRef(ae,a),pe=t.useMemo((function(){var e=J.find((function(e){return e.value===le.context.value}));return e?e.label:null}),[J,le.context.value]),fe=function(e){return[o.Navigating,o.Open,o.Dragging,o.Interacting].includes(e)}(le.value),be=t.useMemo((function(){return{ariaLabel:s,ariaLabelledBy:u,disabled:V,isExpanded:fe,listboxId:ge,listboxValueLabel:pe,onValueChange:$,buttonRef:ee,listRef:oe,popoverRef:ie,selectedOptionRef:re,highlightedOptionRef:ne,send:de,state:le.value,stateData:le.context}}),[s,u,le.value,le.context,V,ge,fe,$,de,pe]),Ee=t.useRef(!1);if(!Q.current&&null==P&&!Ee.current&&J.length){Ee.current=!0;var ye=J.find((function(e){return!e.disabled}));ye&&ye.value&&de({type:i.ValueChange,value:ye.value})}return d.useControlledSwitchWarning(G,"value",Y),function(e,n,a){t.useRef(null!=e).current&&e!==n&&a()}(G,le.context.value,(function(){de({type:i.ValueChange,value:G})})),d.useIsomorphicLayoutEffect((function(){de({type:i.GetDerivedData,data:{options:J}})}),[J,de]),t.useEffect((function(){function e(e){var t=e.target,n=e.relatedTarget;Z(t,ie.current)||de({type:i.OutsideMouseDown,relatedTarget:n||t})}return fe&&window.addEventListener("mousedown",e),function(){window.removeEventListener("mousedown",e)}}),[de,fe]),t.useEffect((function(){function e(e){var t=e.target,n=e.relatedTarget;Z(t,ie.current)||de({type:i.OutsideMouseUp,relatedTarget:n||t})}return fe&&window.addEventListener("mouseup",e),function(){window.removeEventListener("mouseup",e)}}),[de,fe]),d.useCheckStyles("listbox"),n.createElement(l.DescendantProvider,{context:L,items:J,set:X},n.createElement(A.Provider,{value:be},n.createElement("div",Object.assign({},H,{ref:ve,"data-reach-listbox-input":"","data-state":fe?"expanded":"closed","data-value":le.context.value,id:ge}),d.isFunction(U)?U({id:ge,isExpanded:fe,value:le.context.value,selectedOptionRef:re,highlightedOptionRef:ne,valueLabel:pe,expanded:fe}):U),(k||q||j)&&n.createElement("input",{ref:te,"data-reach-listbox-hidden-input":"",disabled:V,form:k,name:q,readOnly:!0,required:j,tabIndex:-1,type:"hidden",value:le.context.value||""})))})),V=t.forwardRef((function(e,a){var o=e.arrow,i=void 0===o?"▼":o,r=e.button,u=e.children,s=e.portal,l=void 0===s||s,c=v(e,["arrow","button","children","portal"]);return n.createElement(B,Object.assign({},c,{_componentName:"Listbox",ref:a}),(function(e){var a=e.value,o=e.valueLabel;return n.createElement(t.Fragment,null,n.createElement(q,{arrow:i,children:r?d.isFunction(r)?r({value:a,label:o}):r:void 0}),n.createElement(F,{portal:l},n.createElement(Y,null,u)))}))})),k=d.forwardRefWithAs((function(e,a){var o=e["aria-label"],r=e.arrow,u=void 0!==r&&r,s=e.as,l=void 0===s?"span":s,c=e.children,g=e.onKeyDown,p=e.onMouseDown,f=e.onMouseUp,b=v(e,["aria-label","arrow","as","children","onKeyDown","onMouseDown","onMouseUp"]),E=t.useContext(A),y=E.ariaLabelledBy,D=E.disabled,h=E.isExpanded,w=E.listboxId,O=E.send,x=E.listboxValueLabel,I=E.stateData.value,M=d.useForkedRef(E.buttonRef,a),N=J(),m=d.makeId("button",w),T=t.useMemo((function(){return c?d.isFunction(c)?c({isExpanded:h,label:x,value:I,expanded:h}):c:x}),[c,x,h,I]);return n.createElement(l,Object.assign({"aria-disabled":D||void 0,"aria-expanded":h||void 0,"aria-haspopup":"listbox","aria-labelledby":o?void 0:[y,m].filter(Boolean).join(" "),"aria-label":o,role:"button",tabIndex:D?-1:0},b,{ref:M,"data-reach-listbox-button":"",id:m,onKeyDown:d.wrapEvent(g,N),onMouseDown:d.wrapEvent(p,(function(e){d.isRightClick(e.nativeEvent)||(e.preventDefault(),e.stopPropagation(),O({type:i.ButtonMouseDown,disabled:D}))})),onMouseUp:d.wrapEvent(f,(function(e){d.isRightClick(e.nativeEvent)||(e.preventDefault(),e.stopPropagation(),O({type:i.ButtonMouseUp}))}))}),T,u&&n.createElement(j,null,d.isBoolean(u)?null:u))})),q=t.memo(k),W=t.forwardRef((function(e,a){var o=e.children,i=v(e,["children"]),r=t.useContext(A).isExpanded;return n.createElement("span",Object.assign({"aria-hidden":!0},i,{ref:a,"data-reach-listbox-arrow":"","data-expanded":r?"":void 0}),d.isFunction(o)?o({isExpanded:r,expanded:r}):o||"▼")})),j=t.memo(W),G=t.forwardRef((function(e,a){var o=e.position,r=void 0===o?u.positionMatchWidth:o,l=e.onBlur,c=e.onKeyDown,p=e.portal,f=void 0===p||p,b=e.unstable_observableRefs,E=v(e,["position","onBlur","onKeyDown","portal","unstable_observableRefs"]),y=t.useContext(A),D=y.buttonRef,h=y.send,w=y.isExpanded,O=d.useForkedRef(y.popoverRef,a),x=J(),I=g(g({hidden:!w,tabIndex:-1},E),{},{ref:O,"data-reach-listbox-popover":"",onBlur:d.wrapEvent(l,(function(e){var t=e.nativeEvent;requestAnimationFrame((function(){h({type:i.Blur,relatedTarget:t.relatedTarget||t.target})}))})),onKeyDown:d.wrapEvent(c,x)});return f?n.createElement(s,Object.assign({},I,{targetRef:D,position:r,unstable_observableRefs:b})):n.createElement("div",Object.assign({},I))})),F=t.memo(G),Y=d.forwardRefWithAs((function(e,a){var o=e.as,i=void 0===o?"ul":o,r=v(e,["as"]),u=t.useContext(A),s=u.ariaLabel,l=u.ariaLabelledBy,c=u.isExpanded,g=u.listboxId,p=u.stateData,f=p.value,b=p.navigationValue,E=d.useForkedRef(a,u.listRef);return n.createElement(i,Object.assign({"aria-activedescendant":X(c?b:f),"aria-labelledby":s?void 0:l,"aria-label":s,role:"listbox",tabIndex:-1},r,{ref:E,"data-reach-listbox-list":"",id:d.makeId("listbox",g)}))})),H=d.forwardRefWithAs((function(e,a){var r=e.as,u=void 0===r?"li":r,s=e.children,c=e.disabled,g=e.onMouseDown,p=e.onMouseEnter,f=e.onMouseLeave,b=e.onMouseMove,E=e.onMouseUp,y=e.onTouchStart,D=e.value,h=e.label,w=v(e,["as","children","disabled","onMouseDown","onMouseEnter","onMouseLeave","onMouseMove","onMouseUp","onTouchStart","value","label"]),O=t.useContext(A),x=O.highlightedOptionRef,I=O.isExpanded,M=O.onValueChange,N=O.selectedOptionRef,m=O.send,T=O.state,R=O.stateData,C=R.value,K=R.navigationValue,_=t.useState(h),S=_[1],U=h||_[0]||"",P=t.useRef(null);l.useDescendant({element:P.current,value:D,label:U,disabled:!!c},L);var B=t.useCallback((function(e){!h&&e&&S((function(t){return e.textContent&&t!==e.textContent?e.textContent:t||""}))}),[h]),V=!!K&&K===D,k=C===D,q=d.useForkedRef(B,a,P,k?N:null,V?x:null);return n.createElement(u,Object.assign({"aria-selected":(I?V:k)||void 0,"aria-disabled":c||void 0,role:"option"},w,{ref:q,id:X(D),"data-reach-listbox-option":"","data-current":k?"":void 0,"data-label":U,"data-value":D,onMouseDown:d.wrapEvent(g,(function(e){d.isRightClick(e.nativeEvent)||(e.preventDefault(),m({type:i.OptionMouseDown}))})),onMouseEnter:d.wrapEvent(p,(function(){m({type:i.OptionMouseEnter,value:D,disabled:!!c})})),onMouseLeave:d.wrapEvent(f,(function(){m({type:i.ClearNavSelection})})),onMouseMove:d.wrapEvent(b,(function(){T!==o.Open&&K===D||m({type:i.OptionMouseMove,value:D,disabled:!!c})})),onMouseUp:d.wrapEvent(E,(function(e){d.isRightClick(e.nativeEvent)||m({type:i.OptionMouseUp,value:D,callback:M,disabled:!!c})})),onTouchStart:d.wrapEvent(y,(function(){m({type:i.OptionTouchStart,value:D,disabled:!!c})}))}),s)})),Q=t.forwardRef((function(e,a){var o=e.label,i=e.children,u=v(e,["label","children"]),s=t.useContext(A).listboxId,l=d.makeId("label",r.useId(u.id),s);return n.createElement(P.Provider,{value:{labelId:l}},n.createElement("div",Object.assign({"aria-labelledby":l,role:"group"},u,{"data-reach-listbox-group":"",ref:a}),o&&n.createElement(z,null,o),i))})),z=d.forwardRefWithAs((function(e,a){var o=e.as,i=void 0===o?"span":o,r=v(e,["as"]),u=t.useContext(P);return n.createElement(i,Object.assign({role:"presentation"},r,{ref:a,"data-reach-listbox-group-label":"",id:u.labelId}))}));function J(){var e=t.useContext(A),n=e.disabled,a=e.onValueChange,o=e.stateData,r=o.navigationValue,u=o.typeaheadQuery,s=e.send,c=l.useDescendants(L);t.useEffect((function(){u&&s({type:i.UpdateAfterTypeahead,query:u,callback:a});var e=window.setTimeout((function(){null!=u&&s({type:i.ClearTypeahead})}),1e3);return function(){window.clearTimeout(e)}}),[a,s,u]);var g=c.findIndex((function(e){return e.value===r}));return d.wrapEvent((function(e){var t=e.key,o=d.isString(t)&&1===t.length,u=c.find((function(e){return e.value===r}));switch(t){case"Enter":return void s({type:i.KeyDownEnter,value:r,callback:a,disabled:!(!(null==u?void 0:u.disabled)&&!n)});case" ":return e.preventDefault(),void s({type:i.KeyDownSpace,value:r,callback:a,disabled:!(!(null==u?void 0:u.disabled)&&!n)});case"Escape":return void s({type:i.KeyDownEscape});case"Tab":return void s({type:e.shiftKey?i.KeyDownShiftTab:i.KeyDownTab});default:return void(o&&s({type:i.KeyDownSearch,query:t,disabled:n}))}}),l.useDescendantKeyDown(L,{currentIndex:g,orientation:"vertical",key:"index",rotate:!0,filter:function(e){return!e.disabled},callback:function(e){s({type:i.KeyDownNavigate,value:c[e].value,disabled:n})}}))}function X(e){var n=t.useContext(A);return e?d.makeId("option-"+e,n.listboxId):void 0}function Z(e,t){return!(e!==t&&!(null==t?void 0:t.contains(e)))}exports.Listbox=V,exports.ListboxArrow=j,exports.ListboxButton=q,exports.ListboxGroup=Q,exports.ListboxGroupLabel=z,exports.ListboxInput=B,exports.ListboxList=Y,exports.ListboxOption=H,exports.ListboxPopover=F,exports.useListboxContext=function(){var e=t.useContext(A),n=e.highlightedOptionRef,a=e.listboxId,o=e.listboxValueLabel,i=e.isExpanded,r=e.selectedOptionRef,u=e.stateData.value;return t.useMemo((function(){return{id:a,isExpanded:i,selectedOptionRef:r,highlightedOptionRef:n,value:u,valueLabel:o}}),[a,i,u,o,r,n])};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t);require("prop-types");var a,o,i,r=require("@reach/auto-id"),u=require("@reach/popover"),s=e(u),l=require("@reach/descendants"),d=require("@reach/utils"),c=require("@reach/machine");function g(){return(g=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}function v(e,t){if(null==e)return{};var n,a,o={},i=Object.keys(e);for(a=0;a<i.length;a++)t.indexOf(n=i[a])>=0||(o[n]=e[n]);return o}!function(e){e.Idle="IDLE",e.Open="OPEN",e.Navigating="NAVIGATING",e.Dragging="DRAGGING",e.Interacting="INTERACTING"}(o||(o={})),function(e){e.ButtonMouseDown="BUTTON_MOUSE_DOWN",e.ButtonMouseUp="BUTTON_MOUSE_UP",e.Blur="BLUR",e.ClearNavSelection="CLEAR_NAV_SELECTION",e.ClearTypeahead="CLEAR_TYPEAHEAD",e.GetDerivedData="GET_DERIVED_DATA",e.KeyDownEscape="KEY_DOWN_ESCAPE",e.KeyDownEnter="KEY_DOWN_ENTER",e.KeyDownSpace="KEY_DOWN_SPACE",e.KeyDownNavigate="KEY_DOWN_NAVIGATE",e.KeyDownSearch="KEY_DOWN_SEARCH",e.KeyDownTab="KEY_DOWN_TAB",e.KeyDownShiftTab="KEY_DOWN_SHIFT_TAB",e.OptionTouchStart="OPTION_TOUCH_START",e.OptionMouseMove="OPTION_MOUSE_MOVE",e.OptionMouseEnter="OPTION_MOUSE_ENTER",e.OutsideMouseDown="OUTSIDE_MOUSE_DOWN",e.OutsideMouseUp="OUTSIDE_MOUSE_UP",e.ValueChange="VALUE_CHANGE",e.OptionMouseDown="OPTION_MOUSE_DOWN",e.OptionMouseUp="OPTION_MOUSE_UP",e.PopoverPointerDown="POPOVER_POINTER_DOWN",e.PopoverPointerUp="POPOVER_POINTER_UP",e.UpdateAfterTypeahead="UPDATE_AFTER_TYPEAHEAD"}(i||(i={}));var p=c.assign({navigationValue:null}),f=c.assign({typeaheadQuery:null}),b=c.assign({value:function(e,t){return t.value}}),E=c.assign({navigationValue:function(e,t){return t.value}}),y=c.assign({navigationValue:function(e){var t,n,a=(t=e.value)?e.options.find((function(e){return e.value===t})):void 0;return a&&!a.disabled?e.value:(null===(n=e.options.find((function(e){return!e.disabled})))||void 0===n?void 0:n.value)||null}});function D(e,t){if(t.type===i.Blur){var n=t.refs,a=n.list,o=n.popover,r=t.relatedTarget,u=o&&d.getOwnerDocument(o)||document;return!(u.activeElement===a||!o||o.contains(r||u.activeElement))}return!1}function h(e,t){if(t.type===i.OutsideMouseDown||t.type===i.OutsideMouseUp){var n=t.refs,a=n.button,o=n.popover,r=t.relatedTarget;return!(r===a||!a||a.contains(r)||!o||o.contains(r))}return!1}function w(e,t){return!!e.options.find((function(t){return t.value===e.navigationValue}))}function O(e,t){var n=t.refs,a=n.popover,o=n.list,i=t.relatedTarget;return!(a&&i&&a.contains(i)&&i!==o)&&w(e)}function x(e,t){requestAnimationFrame((function(){t.refs.list&&t.refs.list.focus()}))}function I(e,t){t.refs.button&&t.refs.button.focus()}function M(e,t){return!t.disabled}function N(e,t){return t.type!==i.OptionTouchStart||!t||!t.disabled}function m(e,t){return!(t&&t.disabled||null==e.navigationValue)}function T(e,t){t.callback&&t.callback(t.value)}function R(e,t){if(t.type===i.KeyDownEnter){var n=t.refs.hiddenInput;if(n&&n.form){var a=n.form.querySelector("button,[type='submit']");a&&a.click()}}}var C=c.assign({typeaheadQuery:function(e,t){return(e.typeaheadQuery||"")+t.query}}),K=c.assign({value:function(e,t){if(t.type===i.UpdateAfterTypeahead&&t.query){var n=U(e.options,t.query);if(n&&!n.disabled)return t.callback&&t.callback(n.value),n.value}return e.value}}),_=c.assign({navigationValue:function(e,t){if(t.type===i.UpdateAfterTypeahead&&t.query){var n=U(e.options,t.query);if(n&&!n.disabled)return n.value}return e.navigationValue}}),S=((a={})[i.GetDerivedData]={actions:c.assign((function(e,t){return g({},e,t.data)}))},a[i.ValueChange]={actions:[b,T]},a);function U(e,t){return void 0===t&&(t=""),t&&e.find((function(e){return!e.disabled&&e.label&&e.label.toLowerCase().startsWith(t.toLowerCase())}))||null}var L=l.createDescendantContext("ListboxDescendantContext"),A=d.createNamedContext("ListboxContext",{}),P=d.createNamedContext("ListboxGroupContext",{}),B=t.forwardRef((function(e,a){var u=e["aria-labelledby"],s=e["aria-label"],U=e.children,P=e.defaultValue,B=e.disabled,V=void 0!==B&&B,k=e.form,q=e.name,W=e.onChange,j=e.required,G=e.value,F=e._componentName,Y=void 0===F?"ListboxInput":F,H=v(e,["aria-labelledby","aria-label","children","defaultValue","disabled","form","name","onChange","required","value","_componentName"]),Q=t.useRef(null!=G),z=l.useDescendantsInit(),J=z[0],X=z[1],$=d.useCallbackProp(W),ee=t.useRef(null),te=t.useRef(null),ne=t.useRef(null),ae=t.useRef(null),oe=t.useRef(null),ie=t.useRef(null),re=t.useRef(null),ue=c.useCreateMachine(function(e){var t,n,a,r,u,s;return{id:"listbox",initial:o.Idle,context:{value:e.value,options:[],navigationValue:null,typeaheadQuery:null},states:(s={},s[o.Idle]={on:g({},S,(t={},t[i.ButtonMouseDown]={target:o.Open,actions:[y],cond:M},t[i.KeyDownSpace]={target:o.Navigating,actions:[y,x],cond:M},t[i.KeyDownSearch]={target:o.Idle,actions:C,cond:M},t[i.UpdateAfterTypeahead]={target:o.Idle,actions:[K],cond:M},t[i.ClearTypeahead]={target:o.Idle,actions:f},t[i.KeyDownNavigate]={target:o.Navigating,actions:[y,f,x],cond:M},t[i.KeyDownEnter]={actions:[R],cond:M},t))},s[o.Interacting]={entry:[p],on:g({},S,(n={},n[i.ClearNavSelection]={actions:[p,x]},n[i.KeyDownEnter]={target:o.Idle,actions:[b,f,I,T],cond:m},n[i.KeyDownSpace]={target:o.Idle,actions:[b,f,I,T],cond:m},n[i.ButtonMouseDown]={target:o.Idle,actions:[I]},n[i.KeyDownEscape]={target:o.Idle,actions:[I]},n[i.OptionMouseDown]={target:o.Dragging},n[i.OutsideMouseDown]=[{target:o.Idle,cond:h,actions:f},{target:o.Dragging,actions:f,cond:w}],n[i.OutsideMouseUp]=[{target:o.Idle,cond:h,actions:f},{target:o.Navigating,cond:w},{target:o.Interacting,actions:f}],n[i.KeyDownEnter]=o.Interacting,n[i.Blur]=[{target:o.Idle,cond:D,actions:f},{target:o.Navigating,cond:O},{target:o.Interacting,actions:f}],n[i.OptionTouchStart]={target:o.Navigating,actions:[E,f],cond:N},n[i.OptionMouseEnter]={target:o.Navigating,actions:[E,f],cond:N},n[i.KeyDownNavigate]={target:o.Navigating,actions:[E,f,x]},n))},s[o.Open]={on:g({},S,(a={},a[i.ClearNavSelection]={actions:[p]},a[i.KeyDownEnter]={target:o.Idle,actions:[b,f,I,T],cond:m},a[i.KeyDownSpace]={target:o.Idle,actions:[b,f,I,T],cond:m},a[i.ButtonMouseDown]={target:o.Idle,actions:[I]},a[i.KeyDownEscape]={target:o.Idle,actions:[I]},a[i.OptionMouseDown]={target:o.Dragging},a[i.OutsideMouseDown]=[{target:o.Idle,cond:h,actions:f},{target:o.Dragging,cond:w},{target:o.Interacting,actions:f}],a[i.OutsideMouseUp]=[{target:o.Idle,cond:h,actions:f},{target:o.Navigating,cond:w},{target:o.Interacting,actions:f}],a[i.Blur]=[{target:o.Idle,cond:D,actions:f},{target:o.Navigating,cond:O},{target:o.Interacting,actions:f}],a[i.ButtonMouseUp]={target:o.Navigating,actions:[y,x]},a[i.OptionTouchStart]={target:o.Navigating,actions:[E,f],cond:N},a[i.KeyDownNavigate]={target:o.Navigating,actions:[E,f,x]},a[i.KeyDownSearch]={target:o.Navigating,actions:C},a[i.UpdateAfterTypeahead]={actions:[_]},a[i.ClearTypeahead]={actions:f},a[i.OptionMouseMove]=[{target:o.Dragging,actions:[E],cond:N},{target:o.Dragging}],a))},s[o.Dragging]={on:g({},S,(r={},r[i.ClearNavSelection]={actions:[p]},r[i.KeyDownEnter]={target:o.Idle,actions:[b,f,I,T],cond:m},r[i.KeyDownSpace]={target:o.Idle,actions:[b,f,I,T],cond:m},r[i.ButtonMouseDown]={target:o.Idle,actions:[I]},r[i.KeyDownEscape]={target:o.Idle,actions:[I]},r[i.OptionMouseDown]={target:o.Dragging},r[i.OutsideMouseDown]=[{target:o.Idle,cond:h,actions:f},{target:o.Navigating,cond:w},{target:o.Interacting,actions:f}],r[i.OutsideMouseUp]=[{target:o.Idle,cond:h,actions:f},{target:o.Navigating,cond:w,actions:x},{target:o.Interacting,actions:[f,x]}],r[i.Blur]=[{target:o.Idle,cond:D,actions:f},{target:o.Navigating,cond:O},{target:o.Interacting,actions:f}],r[i.ButtonMouseUp]={target:o.Navigating,actions:[y,x]},r[i.OptionTouchStart]={target:o.Navigating,actions:[E,f],cond:N},r[i.OptionMouseEnter]={target:o.Dragging,actions:[E,f],cond:N},r[i.KeyDownNavigate]={target:o.Navigating,actions:[E,f,x]},r[i.KeyDownSearch]={target:o.Navigating,actions:C},r[i.UpdateAfterTypeahead]={actions:[_]},r[i.ClearTypeahead]={actions:f},r[i.OptionMouseMove]=[{target:o.Navigating,actions:[E],cond:N},{target:o.Navigating}],r[i.OptionMouseUp]={target:o.Idle,actions:[b,f,I,T],cond:m},r))},s[o.Navigating]={on:g({},S,(u={},u[i.ClearNavSelection]={actions:[p,x]},u[i.KeyDownEnter]={target:o.Idle,actions:[b,f,I,T],cond:m},u[i.KeyDownSpace]={target:o.Idle,actions:[b,f,I,T],cond:m},u[i.ButtonMouseDown]={target:o.Idle,actions:[I]},u[i.KeyDownEscape]={target:o.Idle,actions:[I]},u[i.OptionMouseDown]={target:o.Dragging},u[i.OutsideMouseDown]=[{target:o.Idle,cond:h,actions:f},{target:o.Navigating,cond:w},{target:o.Interacting,actions:f}],u[i.OutsideMouseUp]=[{target:o.Idle,cond:h,actions:f},{target:o.Navigating,cond:w},{target:o.Interacting,actions:f}],u[i.Blur]=[{target:o.Idle,cond:D,actions:f},{target:o.Navigating,cond:O},{target:o.Interacting,actions:f}],u[i.ButtonMouseUp]={target:o.Navigating,actions:[y,x]},u[i.OptionTouchStart]={target:o.Navigating,actions:[E,f],cond:N},u[i.OptionMouseEnter]={target:o.Navigating,actions:[E,f],cond:N},u[i.KeyDownNavigate]={target:o.Navigating,actions:[E,f,x]},u[i.KeyDownSearch]={target:o.Navigating,actions:C},u[i.UpdateAfterTypeahead]={actions:[_]},u[i.ClearTypeahead]={actions:f},u[i.OptionMouseMove]=[{target:o.Navigating,actions:[E],cond:N},{target:o.Navigating}],u))},s)}}({value:(Q.current?G:P)||null})),se=c.useMachine(ue,{button:ee,hiddenInput:te,highlightedOption:ne,input:ae,list:oe,popover:ie,selectedOption:re},!1),le=se[0],de=se[1],ce=r.useId(H.id),ge=H.id||d.makeId("listbox-input",ce),ve=d.useForkedRef(ae,a),pe=t.useMemo((function(){var e=J.find((function(e){return e.value===le.context.value}));return e?e.label:null}),[J,le.context.value]),fe=function(e){return[o.Navigating,o.Open,o.Dragging,o.Interacting].includes(e)}(le.value),be=t.useMemo((function(){return{ariaLabel:s,ariaLabelledBy:u,disabled:V,isExpanded:fe,listboxId:ge,listboxValueLabel:pe,onValueChange:$,buttonRef:ee,listRef:oe,popoverRef:ie,selectedOptionRef:re,highlightedOptionRef:ne,send:de,state:le.value,stateData:le.context}}),[s,u,le.value,le.context,V,ge,fe,$,de,pe]),Ee=t.useRef(!1);if(!Q.current&&null==P&&!Ee.current&&J.length){Ee.current=!0;var ye=J.find((function(e){return!e.disabled}));ye&&ye.value&&de({type:i.ValueChange,value:ye.value})}return d.useControlledSwitchWarning(G,"value",Y),function(e,n,a){t.useRef(null!=e).current&&e!==n&&a()}(G,le.context.value,(function(){de({type:i.ValueChange,value:G})})),d.useIsomorphicLayoutEffect((function(){de({type:i.GetDerivedData,data:{options:J}})}),[J,de]),t.useEffect((function(){function e(e){var t=e.target,n=e.relatedTarget;Z(t,ie.current)||de({type:i.OutsideMouseDown,relatedTarget:n||t})}return fe&&window.addEventListener("mousedown",e),function(){window.removeEventListener("mousedown",e)}}),[de,fe]),t.useEffect((function(){function e(e){var t=e.target,n=e.relatedTarget;Z(t,ie.current)||de({type:i.OutsideMouseUp,relatedTarget:n||t})}return fe&&window.addEventListener("mouseup",e),function(){window.removeEventListener("mouseup",e)}}),[de,fe]),d.useCheckStyles("listbox"),n.createElement(l.DescendantProvider,{context:L,items:J,set:X},n.createElement(A.Provider,{value:be},n.createElement("div",Object.assign({},H,{ref:ve,"data-reach-listbox-input":"","data-state":fe?"expanded":"closed","data-value":le.context.value,id:ge}),d.isFunction(U)?U({id:ge,isExpanded:fe,value:le.context.value,selectedOptionRef:re,highlightedOptionRef:ne,valueLabel:pe,expanded:fe}):U),(k||q||j)&&n.createElement("input",{ref:te,"data-reach-listbox-hidden-input":"",disabled:V,form:k,name:q,readOnly:!0,required:j,tabIndex:-1,type:"hidden",value:le.context.value||""})))})),V=t.forwardRef((function(e,a){var o=e.arrow,i=void 0===o?"▼":o,r=e.button,u=e.children,s=e.portal,l=void 0===s||s,c=v(e,["arrow","button","children","portal"]);return n.createElement(B,Object.assign({},c,{_componentName:"Listbox",ref:a}),(function(e){var a=e.value,o=e.valueLabel;return n.createElement(t.Fragment,null,n.createElement(q,{arrow:i,children:r?d.isFunction(r)?r({value:a,label:o}):r:void 0}),n.createElement(F,{portal:l},n.createElement(Y,null,u)))}))})),k=d.forwardRefWithAs((function(e,a){var o=e["aria-label"],r=e.arrow,u=void 0!==r&&r,s=e.as,l=void 0===s?"span":s,c=e.children,g=e.onKeyDown,p=e.onMouseDown,f=e.onMouseUp,b=v(e,["aria-label","arrow","as","children","onKeyDown","onMouseDown","onMouseUp"]),E=t.useContext(A),y=E.ariaLabelledBy,D=E.disabled,h=E.isExpanded,w=E.listboxId,O=E.send,x=E.listboxValueLabel,I=E.stateData.value,M=d.useForkedRef(E.buttonRef,a),N=J(),m=d.makeId("button",w),T=t.useMemo((function(){return c?d.isFunction(c)?c({isExpanded:h,label:x,value:I,expanded:h}):c:x}),[c,x,h,I]);return n.createElement(l,Object.assign({"aria-disabled":D||void 0,"aria-expanded":h||void 0,"aria-haspopup":"listbox","aria-labelledby":o?void 0:[y,m].filter(Boolean).join(" "),"aria-label":o,role:"button",tabIndex:D?-1:0},b,{ref:M,"data-reach-listbox-button":"",id:m,onKeyDown:d.wrapEvent(g,N),onMouseDown:d.wrapEvent(p,(function(e){d.isRightClick(e.nativeEvent)||(e.preventDefault(),e.stopPropagation(),O({type:i.ButtonMouseDown,disabled:D}))})),onMouseUp:d.wrapEvent(f,(function(e){d.isRightClick(e.nativeEvent)||(e.preventDefault(),e.stopPropagation(),O({type:i.ButtonMouseUp}))}))}),T,u&&n.createElement(j,null,d.isBoolean(u)?null:u))})),q=d.memoWithAs(k),W=t.forwardRef((function(e,a){var o=e.children,i=v(e,["children"]),r=t.useContext(A).isExpanded;return n.createElement("span",Object.assign({"aria-hidden":!0},i,{ref:a,"data-reach-listbox-arrow":"","data-expanded":r?"":void 0}),d.isFunction(o)?o({isExpanded:r,expanded:r}):o||"▼")})),j=t.memo(W),G=t.forwardRef((function(e,a){var o=e.position,r=void 0===o?u.positionMatchWidth:o,l=e.onBlur,c=e.onKeyDown,p=e.portal,f=void 0===p||p,b=e.unstable_observableRefs,E=v(e,["position","onBlur","onKeyDown","portal","unstable_observableRefs"]),y=t.useContext(A),D=y.buttonRef,h=y.send,w=y.isExpanded,O=d.useForkedRef(y.popoverRef,a),x=J(),I=g({hidden:!w,tabIndex:-1},E,{ref:O,"data-reach-listbox-popover":"",onBlur:d.wrapEvent(l,(function(e){var t=e.nativeEvent;requestAnimationFrame((function(){h({type:i.Blur,relatedTarget:t.relatedTarget||t.target})}))})),onKeyDown:d.wrapEvent(c,x)});return f?n.createElement(s,Object.assign({},I,{targetRef:D,position:r,unstable_observableRefs:b})):n.createElement("div",Object.assign({},I))})),F=t.memo(G),Y=d.forwardRefWithAs((function(e,a){var o=e.as,i=void 0===o?"ul":o,r=v(e,["as"]),u=t.useContext(A),s=u.ariaLabel,l=u.ariaLabelledBy,c=u.isExpanded,g=u.listboxId,p=u.stateData,f=p.value,b=p.navigationValue,E=d.useForkedRef(a,u.listRef);return n.createElement(i,Object.assign({"aria-activedescendant":X(c?b:f),"aria-labelledby":s?void 0:l,"aria-label":s,role:"listbox",tabIndex:-1},r,{ref:E,"data-reach-listbox-list":"",id:d.makeId("listbox",g)}))})),H=d.forwardRefWithAs((function(e,a){var r=e.as,u=void 0===r?"li":r,s=e.children,c=e.disabled,g=e.onMouseDown,p=e.onMouseEnter,f=e.onMouseLeave,b=e.onMouseMove,E=e.onMouseUp,y=e.onTouchStart,D=e.value,h=e.label,w=v(e,["as","children","disabled","onMouseDown","onMouseEnter","onMouseLeave","onMouseMove","onMouseUp","onTouchStart","value","label"]),O=t.useContext(A),x=O.highlightedOptionRef,I=O.isExpanded,M=O.onValueChange,N=O.selectedOptionRef,m=O.send,T=O.state,R=O.stateData,C=R.value,K=R.navigationValue,_=t.useState(h),S=_[1],U=h||_[0]||"",P=t.useRef(null);l.useDescendant({element:P.current,value:D,label:U,disabled:!!c},L);var B=t.useCallback((function(e){!h&&e&&S((function(t){return e.textContent&&t!==e.textContent?e.textContent:t||""}))}),[h]),V=!!K&&K===D,k=C===D,q=d.useForkedRef(B,a,P,k?N:null,V?x:null);return n.createElement(u,Object.assign({"aria-selected":(I?V:k)||void 0,"aria-disabled":c||void 0,role:"option"},w,{ref:q,id:X(D),"data-reach-listbox-option":"","data-current":k?"":void 0,"data-label":U,"data-value":D,onMouseDown:d.wrapEvent(g,(function(e){d.isRightClick(e.nativeEvent)||(e.preventDefault(),m({type:i.OptionMouseDown}))})),onMouseEnter:d.wrapEvent(p,(function(){m({type:i.OptionMouseEnter,value:D,disabled:!!c})})),onMouseLeave:d.wrapEvent(f,(function(){m({type:i.ClearNavSelection})})),onMouseMove:d.wrapEvent(b,(function(){T!==o.Open&&K===D||m({type:i.OptionMouseMove,value:D,disabled:!!c})})),onMouseUp:d.wrapEvent(E,(function(e){d.isRightClick(e.nativeEvent)||m({type:i.OptionMouseUp,value:D,callback:M,disabled:!!c})})),onTouchStart:d.wrapEvent(y,(function(){m({type:i.OptionTouchStart,value:D,disabled:!!c})}))}),s)})),Q=t.forwardRef((function(e,a){var o=e.label,i=e.children,u=v(e,["label","children"]),s=t.useContext(A).listboxId,l=d.makeId("label",r.useId(u.id),s);return n.createElement(P.Provider,{value:{labelId:l}},n.createElement("div",Object.assign({"aria-labelledby":l,role:"group"},u,{"data-reach-listbox-group":"",ref:a}),o&&n.createElement(z,null,o),i))})),z=d.forwardRefWithAs((function(e,a){var o=e.as,i=void 0===o?"span":o,r=v(e,["as"]),u=t.useContext(P);return n.createElement(i,Object.assign({role:"presentation"},r,{ref:a,"data-reach-listbox-group-label":"",id:u.labelId}))}));function J(){var e=t.useContext(A),n=e.disabled,a=e.onValueChange,o=e.stateData,r=o.navigationValue,u=o.typeaheadQuery,s=e.send,c=l.useDescendants(L);t.useEffect((function(){u&&s({type:i.UpdateAfterTypeahead,query:u,callback:a});var e=window.setTimeout((function(){null!=u&&s({type:i.ClearTypeahead})}),1e3);return function(){window.clearTimeout(e)}}),[a,s,u]);var g=c.findIndex((function(e){return e.value===r}));return d.wrapEvent((function(e){var t=e.key,o=d.isString(t)&&1===t.length,u=c.find((function(e){return e.value===r}));switch(t){case"Enter":return void s({type:i.KeyDownEnter,value:r,callback:a,disabled:!(!(null==u?void 0:u.disabled)&&!n)});case" ":return e.preventDefault(),void s({type:i.KeyDownSpace,value:r,callback:a,disabled:!(!(null==u?void 0:u.disabled)&&!n)});case"Escape":return void s({type:i.KeyDownEscape});case"Tab":return void s({type:e.shiftKey?i.KeyDownShiftTab:i.KeyDownTab});default:return void(o&&s({type:i.KeyDownSearch,query:t,disabled:n}))}}),l.useDescendantKeyDown(L,{currentIndex:g,orientation:"vertical",key:"index",rotate:!0,filter:function(e){return!e.disabled},callback:function(e){s({type:i.KeyDownNavigate,value:c[e].value,disabled:n})}}))}function X(e){var n=t.useContext(A);return e?d.makeId("option-"+e,n.listboxId):void 0}function Z(e,t){return!(e!==t&&!(null==t?void 0:t.contains(e)))}exports.Listbox=V,exports.ListboxArrow=j,exports.ListboxButton=q,exports.ListboxGroup=Q,exports.ListboxGroupLabel=z,exports.ListboxInput=B,exports.ListboxList=Y,exports.ListboxOption=H,exports.ListboxPopover=F,exports.useListboxContext=function(){var e=t.useContext(A),n=e.highlightedOptionRef,a=e.listboxId,o=e.listboxValueLabel,i=e.isExpanded,r=e.selectedOptionRef,u=e.stateData.value;return t.useMemo((function(){return{id:a,isExpanded:i,selectedOptionRef:r,highlightedOptionRef:n,value:u,valueLabel:o}}),[a,i,u,o,r,n])};
 //# sourceMappingURL=listbox.cjs.production.min.js.map

dist/listbox.esm.js

@@ -6,3 +6,3 @@ import React, { forwardRef, useRef, useMemo, useEffect, Fragment, memo, useContext, useState, useCallback } from 'react';
 import { useDescendantsInit, DescendantProvider, useDescendant, createDescendantContext, useDescendants, useDescendantKeyDown } from '@reach/descendants';
-import { getOwnerDocument, useCallbackProp, makeId, useForkedRef, useControlledSwitchWarning, useIsomorphicLayoutEffect, useCheckStyles, isFunction, forwardRefWithAs, wrapEvent, createNamedContext, isBoolean, isRightClick, isString } from '@reach/utils';
+import { getOwnerDocument, useCallbackProp, makeId, useForkedRef, useControlledSwitchWarning, useIsomorphicLayoutEffect, useCheckStyles, isFunction, memoWithAs, forwardRefWithAs, wrapEvent, createNamedContext, isBoolean, isRightClick, isString } from '@reach/utils';
 import { assign, useCreateMachine, useMachine } from '@reach/machine';
@@ -284,3 +284,3 @@
   actions: /*#__PURE__*/assign(function (ctx, event) {
-    return _extends(_extends({}, ctx), event.data);
+    return _extends({}, ctx, event.data);
   })
@@ -312,3 +312,3 @@ }, _commonEvents[ListboxEvents.ValueChange] = {
     states: (_states = {}, _states[ListboxStates.Idle] = {
-      on: _extends(_extends({}, commonEvents), {}, (_extends2 = {}, _extends2[ListboxEvents.ButtonMouseDown] = {
+      on: _extends({}, commonEvents, (_extends2 = {}, _extends2[ListboxEvents.ButtonMouseDown] = {
         target: ListboxStates.Open,
@@ -342,3 +342,3 @@ actions: [navigateFromCurrentValue],
       entry: [clearNavigationValue],
-      on: _extends(_extends({}, commonEvents), {}, (_extends3 = {}, _extends3[ListboxEvents.ClearNavSelection] = {
+      on: _extends({}, commonEvents, (_extends3 = {}, _extends3[ListboxEvents.ClearNavSelection] = {
         actions: [clearNavigationValue, focusList]
@@ -410,3 +410,3 @@ }, _extends3[ListboxEvents.KeyDownEnter] = {
     }, _states[ListboxStates.Open] = {
-      on: _extends(_extends({}, commonEvents), {}, (_extends4 = {}, _extends4[ListboxEvents.ClearNavSelection] = {
+      on: _extends({}, commonEvents, (_extends4 = {}, _extends4[ListboxEvents.ClearNavSelection] = {
         actions: [clearNavigationValue]
@@ -484,3 +484,3 @@ }, _extends4[ListboxEvents.KeyDownEnter] = {
     }, _states[ListboxStates.Dragging] = {
-      on: _extends(_extends({}, commonEvents), {}, (_extends5 = {}, _extends5[ListboxEvents.ClearNavSelection] = {
+      on: _extends({}, commonEvents, (_extends5 = {}, _extends5[ListboxEvents.ClearNavSelection] = {
         actions: [clearNavigationValue]
@@ -567,3 +567,3 @@ }, _extends5[ListboxEvents.KeyDownEnter] = {
     }, _states[ListboxStates.Navigating] = {
-      on: _extends(_extends({}, commonEvents), {}, (_extends6 = {}, _extends6[ListboxEvents.ClearNavSelection] = {
+      on: _extends({}, commonEvents, (_extends6 = {}, _extends6[ListboxEvents.ClearNavSelection] = {
         actions: [clearNavigationValue, focusList]
@@ -949,3 +949,3 @@ }, _extends6[ListboxEvents.KeyDownEnter] = {
   Listbox.displayName = "Listbox";
-  Listbox.propTypes = /*#__PURE__*/_extends( /*#__PURE__*/_extends({}, ListboxInput.propTypes), {}, {
+  Listbox.propTypes = /*#__PURE__*/_extends({}, ListboxInput.propTypes, {
     arrow: /*#__PURE__*/PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
@@ -1066,3 +1066,3 @@ button: /*#__PURE__*/PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
 
-var ListboxButton = /*#__PURE__*/memo(ListboxButtonImpl); ////////////////////////////////////////////////////////////////////////////////
+var ListboxButton = /*#__PURE__*/memoWithAs(ListboxButtonImpl); ////////////////////////////////////////////////////////////////////////////////
 
@@ -1133,6 +1133,6 @@ /**
 
-  var commonProps = _extends(_extends({
+  var commonProps = _extends({
     hidden: !isExpanded,
     tabIndex: -1
-  }, props), {}, {
+  }, props, {
     ref: ref,
@@ -1139,0 +1139,0 @@ "data-reach-listbox-popover": "",

dist/machine.d.ts

@@ -43,3 +43,3 @@ import { MachineEventWithRefs, StateMachine } from "@reach/machine";
 export declare const createMachineDefinition: ({ value, }: {
-    value: string | null;
+    value: ListboxValue | null;
 }) => StateMachine.Config<ListboxStateData, ListboxEvent, ListboxState>;
@@ -46,0 +46,0 @@ /**

package.json

 {
   "name": "@reach/listbox",
-  "version": "0.10.3",
+  "version": "0.10.4",
   "description": "Accessible React listbox input.",
@@ -16,7 +16,7 @@ "author": "React Training <[e-mail]>",
   "dependencies": {
-    "@reach/auto-id": "^0.10.3",
-    "@reach/descendants": "^0.10.3",
-    "@reach/machine": "^0.10.3",
-    "@reach/popover": "^0.10.3",
-    "@reach/utils": "^0.10.3",
+    "@reach/auto-id": "0.10.4",
+    "@reach/descendants": "0.10.4",
+    "@reach/machine": "0.10.4",
+    "@reach/popover": "0.10.4",
+    "@reach/utils": "0.10.4",
     "prop-types": "^15.7.2"
@@ -36,3 +36,3 @@ },
   ],
-  "gitHead": "fd32b2b31a3e50265b0c274654a5e4105847d18e"
+  "gitHead": "a0c7b3672835b2a9f84732663bb0e78992541211"
 }

README.md

@@ -5,3 +5,3 @@ # @reach/listbox
 
-[Docs](https://reacttraining.com/reach-ui/listbox) | [Source](https://github.com/reach/reach-ui/tree/master/packages/listbox) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox)
+[Docs](https://reacttraining.com/reach-ui/listbox) | [Source](https://github.com/reach/reach-ui/tree/main/packages/listbox) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#Listbox)
 
@@ -18,3 +18,3 @@ An accessible listbox for custom select inputs.
   return (
-    <Listbox value={value} onChange={value => setValue(value)}>
+    <Listbox value={value} onChange={(value) => setValue(value)}>
       <ListboxOption value="default">🌮 Choose a taco</ListboxOption>
@@ -21,0 +21,0 @@ <hr />

No alert changes

Worsened metrics

Total package byte prevSize

519411

decreased by-0.04%

Dependency changes

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

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

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

• + Added@reach/observe-rect@1.1.0(transitive)

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

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

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

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

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

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

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

• - Removed@reach/observe-rect@1.2.0(transitive)

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

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

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

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

• Updated@reach/auto-id@0.10.4

• Updated@reach/descendants@0.10.4

• Updated@reach/machine@0.10.4

• Updated@reach/popover@0.10.4

• Updated@reach/utils@0.10.4