@reach/listbox - npm Package Compare versions

Comparing version 0.9.0 to 0.9.1

dist/index.d.ts

@@ -50,2 +50,3 @@ /**
         valueLabel: string | null;
+        expanded: boolean;
     }) => React.ReactNode) | null | undefined;
@@ -94,2 +95,3 @@ /**
         valueLabel: string | null;
+        expanded: boolean;
     }) => React.ReactNode);
@@ -96,0 +98,0 @@ /**

dist/listbox.cjs.development.js

@@ -221,3 +221,3 @@ 'use strict';
 function submitForm(data, event) {
-  if (event.type !== ListboxEvents.KeyDownEnter || event.disabled) {
+  if (event.type !== ListboxEvents.KeyDownEnter) {
     return;
@@ -314,2 +314,9 @@ } // So this one is a little weird, but here's what we're doing.
   target: ListboxStates.Idle,
+  // When the user triggers a mouseDown event on the button, we call
+  // event.preventDefault() because the browser will naturally call mouseUp
+  // and click, which will reopen the button (which we don't want). As such,
+  // the click won't blur the open list or re-focus the trigger, so we call
+  // `focusButton` to do that manually. We could work around this with
+  // deferred transitions with xstate, but @xstate/fsm currently doesn't
+  // support that feature and this works good enough for the moment.
   actions: [focusButton]
@@ -351,3 +358,3 @@ }, _openEvents[ListboxEvents.KeyDownEscape] = {
         target: ListboxStates.Navigating,
-        actions: [navigateFromCurrentValue, focusButton],
+        actions: [navigateFromCurrentValue],
         cond: listboxIsNotDisabled
@@ -447,3 +454,2 @@ }, _extends2[ListboxEvents.KeyDownSpace] = {
     }, _states[ListboxStates.NavigatingWithKeys] = {
-      // entry: focusList,
       on: _extends({}, commonEvents, {}, openEvents, (_extends5 = {}, _extends5[ListboxEvents.Blur] = [{
@@ -744,3 +750,4 @@ target: ListboxStates.Idle,
     value: current.context.value,
-    valueLabel: valueLabel
+    valueLabel: valueLabel,
+    expanded: isExpanded(current.value)
   }) : children), (form || name || required) && React__default.createElement("input", {
@@ -864,3 +871,2 @@ ref: hiddenInput,
       mouseEventStartedRef.current = true;
-      event.persist();
       event.preventDefault();
@@ -867,0 +873,0 @@ send({

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,u=require("@reach/auto-id"),l=require("@reach/popover"),s=e(l),c=require("@reach/descendants"),d=require("@reach/utils"),v=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 f(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.Navigating="NAVIGATING",e.NavigatingWithKeys="NAVIGATING_WITH_KEYS",e.Searching="SEARCHING",e.Interacting="INTERACTING"}(i||(i={})),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.Navigate="NAVIGATE",e.OptionMouseEnter="OPTION_MOUSE_ENTER",e.OutsideMouseDown="OUTSIDE_MOUSE_DOWN",e.ValueChange="VALUE_CHANGE",e.OptionStartClick="OPTION_START_CLICK",e.OptionFinishClick="OPTION_FINISH_CLICK",e.PopoverPointerDown="POPOVER_POINTER_DOWN",e.PopoverPointerUp="POPOVER_POINTER_UP",e.UpdateAfterTypeahead="UPDATE_AFTER_TYPEAHEAD"}(r||(r={}));var p=v.assign({navigationValue:null}),b=v.assign({typeaheadQuery:null}),y=v.assign({value:function(e,t){return t.value}}),h=v.assign({navigationValue:function(e,t){return t.value}}),E=v.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 w(e,t){if(t.type===r.Blur){var n=t.refs,a=n.list,o=n.popover,i=t.relatedTarget,u=o&&d.getOwnerDocument(o)||document;return!(u.activeElement===a||!o||o.contains(i||u.activeElement))}return!1}function D(e,t){if(t.type===r.OutsideMouseDown){var n=t.refs,a=n.button,o=n.popover,i=t.relatedTarget;return!(i===a||!a||a.contains(i)||!o||o.contains(i))}return!1}function x(e,t){return!!e.options.find((function(t){return t.value===e.navigationValue}))}function N(e,t){var n=t.refs.popover,a=t.relatedTarget;return!(n&&a&&n.contains(a))&&x(e)}function I(e,t){requestAnimationFrame((function(){t.refs.list&&t.refs.list.focus()}))}function m(e,t){t.refs.button&&t.refs.button.focus()}function K(e,t){return!t.disabled}function O(e,t){return t.type!==r.Navigate||!t||!t.disabled}function T(e,t){return!(t&&t.disabled||null==e.navigationValue)}function C(e,t){t.callback&&t.callback(t.value)}function M(e,t){if(t.type===r.KeyDownEnter&&!t.disabled){var n=t.refs.hiddenInput;if(n&&n.form){var a=n.form.querySelector("button,[type='submit']");a&&a.click()}}}var R=v.assign({typeaheadQuery:function(e,t){return(e.typeaheadQuery||"")+t.query}}),S=v.assign({typeaheadQuery:""}),_=v.assign({value:function(e,t){if(t.type===r.UpdateAfterTypeahead&&t.query){var n=V(e.options,t.query);if(n&&!n.disabled)return t.callback&&t.callback(n.value),n.value}return e.value}}),A=v.assign({navigationValue:function(e,t){if(t.type===r.UpdateAfterTypeahead&&t.query){var n=V(e.options,t.query);if(n&&!n.disabled)return n.value}return e.navigationValue}}),L=((a={})[r.GetDerivedData]={actions:v.assign((function(e,t){return g({},e,{},t.data,{refs:g({},e.refs,{},t.data.refs||{})})}))},a[r.ValueChange]={actions:[y,C]},a),k=((o={})[r.ClearNavSelection]={actions:[p,I]},o[r.OptionFinishClick]={target:i.Idle,actions:[y,C,m,b],cond:T},o[r.KeyDownEnter]={target:i.Idle,actions:[y,C,m,b],cond:T},o[r.KeyDownSpace]={target:i.Idle,actions:[y,C,m,b],cond:T},o[r.ButtonMouseDown]={target:i.Idle,actions:[m]},o[r.KeyDownEscape]={target:i.Idle,actions:[m]},o);function V(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 W=c.createDescendantContext("ListboxDescendantContext"),U=d.createNamedContext("ListboxContext",{}),P=d.createNamedContext("ListboxGroupContext",{}),B=function(){return t.useContext(U)},q=t.forwardRef((function(e,a){var o=e["aria-labelledby"],l=e["aria-label"],s=e.children,y=e.defaultValue,T=e.disabled,C=void 0!==T&&T,V=e.form,P=e.name,B=e.onChange,q=e.required,F=e.value,j=e._componentName,G=void 0===j?"ListboxInput":j,Y=f(e,["aria-labelledby","aria-label","children","defaultValue","disabled","form","name","onChange","required","value","_componentName"]),H=t.useRef(null!=F).current,Q=c.useDescendants(),z=Q[0],J=Q[1],Z=t.useRef(!1),$=t.useRef(!1),ee=t.useRef(null),te=t.useRef(null),ne=t.useRef(null),ae=t.useRef(null),oe=t.useRef(null),ie=v.useCreateMachine(function(e){var t,n,a,o,u,l;return{id:"mixed-checkbox",initial:i.Idle,context:{value:e.value,refs:{button:null,input:null,list:null,popover:null,hiddenInput:null},options:[],navigationValue:null,typeaheadQuery:null},states:(l={},l[i.Idle]={on:g({},L,(t={},t[r.ButtonMouseDown]={target:i.Navigating,actions:[E,m],cond:K},t[r.KeyDownSpace]={target:i.NavigatingWithKeys,actions:[E,I],cond:K},t[r.KeyDownSearch]={target:i.Idle,actions:R,cond:K},t[r.UpdateAfterTypeahead]={target:i.Idle,actions:[_],cond:K},t[r.ClearTypeahead]={target:i.Idle,actions:S},t[r.KeyDownNavigate]={target:i.NavigatingWithKeys,actions:[E,b],cond:K},t[r.KeyDownEnter]={actions:[M],cond:K},t))},l[i.Interacting]={entry:[p],on:g({},L,{},k,(n={},n[r.KeyDownEnter]=i.Interacting,n[r.Blur]=[{target:i.Idle,cond:w,actions:b},{target:i.Navigating,cond:N},{target:i.Interacting,actions:b}],n[r.OutsideMouseDown]=[{target:i.Idle,cond:D,actions:b},{target:i.Navigating,cond:x},{target:i.Interacting,actions:b}],n[r.Navigate]={target:i.Navigating,actions:[h],cond:O},n[r.KeyDownNavigate]={target:i.NavigatingWithKeys,actions:[h,b,I]},n))},l[i.Navigating]={on:g({},L,{},k,(a={},a[r.Blur]=[{target:i.Idle,cond:w,actions:b},{target:i.Navigating,cond:N},{target:i.Interacting,actions:b}],a[r.OutsideMouseDown]=[{target:i.Idle,cond:D,actions:b},{target:i.Navigating,cond:x},{target:i.Interacting,actions:b}],a[r.ButtonMouseUp]={target:i.Navigating,actions:[E,I]},a[r.Navigate]={target:i.Navigating,actions:[h],cond:O},a[r.KeyDownNavigate]={target:i.NavigatingWithKeys,actions:[h,b,I]},a[r.KeyDownSearch]={target:i.NavigatingWithKeys,actions:R},a[r.UpdateAfterTypeahead]={actions:[A]},a[r.ClearTypeahead]={actions:S},a))},l[i.NavigatingWithKeys]={on:g({},L,{},k,(o={},o[r.Blur]=[{target:i.Idle,cond:w,actions:b},{target:i.NavigatingWithKeys,cond:N},{target:i.Interacting,actions:b}],o[r.OutsideMouseDown]=[{target:i.Idle,cond:D,actions:b},{target:i.NavigatingWithKeys,cond:x},{target:i.Interacting,actions:b}],o[r.Navigate]={target:i.Navigating,actions:[h],cond:O},o[r.KeyDownNavigate]={target:i.NavigatingWithKeys,actions:[h,b,I]},o[r.KeyDownSearch]={target:i.NavigatingWithKeys,actions:R},o[r.UpdateAfterTypeahead]={actions:[A]},o[r.ClearTypeahead]={actions:S},o))},l[i.Searching]={on:g({},L,{},k,(u={},u[r.Blur]=[{target:i.Idle,cond:w,actions:b},{target:i.Searching,cond:N},{target:i.Interacting,actions:b}],u[r.OutsideMouseDown]=[{target:i.Idle,cond:D,actions:b},{target:i.Searching,cond:x},{target:i.Interacting,actions:b}],u[r.Navigate]={target:i.Navigating,actions:[h,b],cond:O},u[r.KeyDownNavigate]={target:i.NavigatingWithKeys,actions:[h,b,I]},u[r.KeyDownSearch]={target:i.NavigatingWithKeys,actions:R},u[r.UpdateAfterTypeahead]={actions:[A]},u[r.ClearTypeahead]={actions:S},u))},l)}}({value:(H?F:y)||null})),re=v.useMachineLogger(v.useMachine(ie,{button:ee,hiddenInput:te,input:ne,list:ae,popover:oe}),!1),ue=re[0],le=re[1],se=u.useId(Y.id),ce=Y.id||d.makeId("listbox-input",se),de=d.useForkedRef(ne,a),ve=t.useMemo((function(){var e=z.find((function(e){return e.value===ue.context.value}));return e?e.label:null}),[z,ue.context.value]),ge=t.useMemo((function(){return{ariaLabel:l,disabled:C,ids:{label:o,input:ce,listbox:d.makeId("listbox",ce),button:d.makeId("button",ce)},listboxValue:ue.context.value,listboxValueLabel:ve,mouseEventStartedRef:$,mouseMovedRef:Z,onValueChange:B,refs:{button:ee,hiddenInput:te,input:ne,list:ae,popover:oe},send:le,state:ue}}),[l,o,ue,C,ce,B,le,ve]);d.useControlledSwitchWarning(F,"value",G);var fe=t.useRef(!1);if(!H&&!y&&!fe.current&&z.length){fe.current=!0;var pe=z.find((function(e){return!e.disabled}));pe&&pe.value&&le({type:r.ValueChange,value:pe.value})}return H&&F!==ue.context.value&&le({type:r.ValueChange,value:F}),d.useIsomorphicLayoutEffect((function(){le({type:r.GetDerivedData,data:{options:z}})}),[z,le]),t.useEffect((function(){function e(e){le({type:r.OutsideMouseDown,relatedTarget:e.relatedTarget||e.target})}return window.addEventListener("mousedown",e),function(){window.removeEventListener("mousedown",e)}}),[le]),t.useEffect((function(){return d.checkStyles("listbox")}),[]),n.createElement(c.DescendantProvider,{context:W,items:z,set:J},n.createElement(U.Provider,{value:ge},n.createElement("div",Object.assign({},Y,{ref:de,"data-reach-listbox-input":"","data-state":X(ue.value)?"expanded":"closed","data-value":ue.context.value,id:ce}),d.isFunction(s)?s({value:ue.context.value,valueLabel:ve}):s),(V||P||q)&&n.createElement("input",{ref:te,disabled:C,form:V,name:P,readOnly:!0,required:q,tabIndex:-1,type:"text",value:ue.context.value||""})))})),F=t.forwardRef((function(e,a){var o=e.arrow,i=void 0===o?"▼":o,r=e.button,u=e.children,l=e.portal,s=void 0===l||l,c=f(e,["arrow","button","children","portal"]);return n.createElement(q,Object.assign({},c,{_componentName:"Listbox",ref:a}),(function(e){var a=e.value,o=e.valueLabel;return n.createElement(t.Fragment,null,n.createElement(j,{arrow:i,children:r?d.isFunction(r)?r({value:a,label:o}):r:void 0}),n.createElement(Y,{portal:s},n.createElement(H,null,u)))}))})),j=d.forwardRefWithAs((function(e,a){var o=e["aria-label"],i=e.arrow,u=void 0!==i&&i,l=e.as,s=void 0===l?"span":l,c=e.children,v=e.onKeyDown,g=e.onMouseDown,p=e.onMouseUp,b=f(e,["aria-label","arrow","as","children","onKeyDown","onMouseDown","onMouseUp"]),y=B(),h=y.disabled,E=y.ids,w=E.button,D=E.label,x=y.mouseEventStartedRef,N=y.state,I=y.send,m=y.listboxValueLabel,K=N.context.value,O=d.useForkedRef(y.refs.button,a),T=Z(),C=X(N.value),M=t.useMemo((function(){return c?d.isFunction(c)?c({expanded:C,label:m,value:K}):c:m}),[c,m,C,K]);return n.createElement(s,Object.assign({"aria-disabled":h||void 0,"aria-expanded":C||void 0,"aria-haspopup":"listbox","aria-labelledby":o?void 0:[D,w].filter(Boolean).join(" "),"aria-label":o,role:"button",tabIndex:h?-1:0},b,{ref:O,"data-reach-listbox-button":"",id:w,onKeyDown:d.wrapEvent(v,T),onMouseDown:d.wrapEvent(g,(function(e){d.isRightClick(e.nativeEvent)||(x.current=!0,e.persist(),e.preventDefault(),I({type:r.ButtonMouseDown,disabled:h}))})),onMouseUp:d.wrapEvent(p,(function(e){x.current&&(d.isRightClick(e.nativeEvent)||I({type:r.ButtonMouseUp})),x.current=!1}))}),M,u&&n.createElement(G,null,d.isBoolean(u)?null:u))})),G=t.forwardRef((function(e,t){var a=e.children,o=f(e,["children"]),i=X(B().state.value),r=i?"▲":"▼";return n.createElement("span",Object.assign({"aria-hidden":!0},o,{ref:t,"data-reach-listbox-arrow":"","data-expanded":i?"":void 0}),d.isFunction(a)?a({expanded:i}):a||r)})),Y=t.forwardRef((function(e,t){var a=e.position,o=void 0===a?l.positionMatchWidth:a,i=e.onBlur,u=e.onKeyDown,c=e.portal,v=void 0===c||c,p=f(e,["position","onBlur","onKeyDown","portal"]),b=B(),y=b.refs,h=y.button,E=b.send,w=b.state.value,D=d.useForkedRef(y.popover,t),x=Z(),N=g({hidden:!X(w),tabIndex:-1},p,{ref:D,"data-reach-listbox-popover":"",onBlur:d.wrapEvent(i,(function(e){var t=e.nativeEvent;requestAnimationFrame((function(){E({type:r.Blur,relatedTarget:t.relatedTarget||t.target})}))})),onKeyDown:d.wrapEvent(u,x)});return v?n.createElement(s,Object.assign({},N,{targetRef:h,position:o})):n.createElement("div",Object.assign({},N))})),H=d.forwardRefWithAs((function(e,t){var a=e.as,o=void 0===a?"ul":a,i=f(e,["as"]),r=B(),u=r.ariaLabel,l=r.ids,s=l.listbox,c=l.label,v=r.state,g=v.context,p=g.value,b=g.navigationValue,y=v.value,h=d.useForkedRef(t,r.refs.list);return n.createElement(o,Object.assign({"aria-activedescendant":$(X(y)?b:p),"aria-labelledby":u?void 0:c,"aria-label":u,role:"listbox",tabIndex:-1},i,{ref:h,"data-reach-listbox-list":"",id:s}))})),Q=d.forwardRefWithAs((function(e,a){var o=e.as,i=void 0===o?"li":o,u=e.children,l=e.disabled,s=e.onMouseDown,v=e.onMouseEnter,g=e.onMouseLeave,p=e.onMouseMove,b=e.onMouseUp,y=e.onTouchStart,h=e.value,E=e.label,w=f(e,["as","children","disabled","onMouseDown","onMouseEnter","onMouseLeave","onMouseMove","onMouseUp","onTouchStart","value","label"]),D=B(),x=D.send,N=D.state,I=N.value,m=N.context,K=m.value,O=m.navigationValue,T=D.onValueChange,C=D.mouseEventStartedRef,M=D.mouseMovedRef,R=t.useState(E),S=R[1],_=E||R[0]||"",A=t.useRef(null);c.useDescendant({context:W,element:A.current,value:h,label:_,disabled:!!l});var L=t.useCallback((function(e){E||S((function(t){return e.textContent&&t!==e.textContent?e.textContent:t||""}))}),[E]),k=d.useForkedRef(L,a,A),V=!!O&&O===h,U=K===h;return n.createElement(i,Object.assign({"aria-selected":(X(I)?V:U)||void 0,"aria-disabled":l||void 0,role:"option"},w,{ref:k,id:$(h),"data-reach-listbox-option":"","data-current":U?"":void 0,"data-label":_,"data-value":h,onMouseDown:d.wrapEvent(s,(function(e){e.preventDefault(),C.current=!0,d.isRightClick(e.nativeEvent)||x({type:r.OptionStartClick})})),onMouseEnter:d.wrapEvent(v,(function(){M.current&&(M.current=!1,x({type:r.Navigate,value:h,disabled:!!l}))})),onMouseLeave:d.wrapEvent(g,(function(){x({type:r.ClearNavSelection})})),onMouseMove:d.wrapEvent(p,(function(){M.current=!0,O!==h&&x({type:r.Navigate,value:h,disabled:!!l})})),onMouseUp:d.wrapEvent(b,(function(e){C.current&&(C.current=!1,d.isRightClick(e.nativeEvent)||x({type:r.OptionFinishClick,value:h,callback:T,disabled:!!l}))})),onTouchStart:d.wrapEvent(y,(function(){x({type:r.Navigate,value:h,disabled:!!l})}))}),u)})),z=t.forwardRef((function(e,t){var a=e.label,o=e.children,i=f(e,["label","children"]),r=B().ids.listbox,l=d.makeId("label",u.useId(i.id),r);return n.createElement(P.Provider,{value:{labelId:l}},n.createElement("div",Object.assign({"aria-labelledby":l,role:"group"},i,{"data-reach-listbox-group":"",ref:t}),a&&n.createElement(J,null,a),o))})),J=d.forwardRefWithAs((function(e,a){var o=e.as,i=void 0===o?"span":o,r=f(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 X(e){return[i.Navigating,i.NavigatingWithKeys,i.Interacting,i.Searching].includes(e)}function Z(){var e=B(),n=e.disabled,a=e.onValueChange,o=e.state.context,i=o.navigationValue,u=o.typeaheadQuery,l=e.send,s=t.useContext(W).descendants;t.useEffect((function(){u&&l({type:r.UpdateAfterTypeahead,query:u,callback:a});var e=window.setTimeout((function(){null!=u&&l({type:r.ClearTypeahead})}),1e3);return function(){window.clearTimeout(e)}}),[a,l,u]);var v=s.findIndex((function(e){return e.value===i}));return d.wrapEvent((function(e){var t=e.key,o=d.isString(t)&&1===t.length,u=s.find((function(e){return e.value===i}));switch(t){case"Enter":return void l({type:r.KeyDownEnter,value:i,callback:a,disabled:!!((null==u?void 0:u.disabled)||n)});case" ":return e.preventDefault(),void l({type:r.KeyDownSpace,value:i,callback:a,disabled:!!((null==u?void 0:u.disabled)||n)});case"Escape":return void l({type:r.KeyDownEscape});case"Tab":return void l({type:e.shiftKey?r.KeyDownShiftTab:r.KeyDownTab});default:return void(o&&l({type:r.KeyDownSearch,query:t,disabled:n}))}}),c.useDescendantKeyDown(W,{currentIndex:v,orientation:"vertical",key:"index",rotate:!0,filter:function(e){return!e.disabled},callback:function(e){l({type:r.KeyDownNavigate,value:s[e].value,disabled:n})}}))}function $(e){var t=B();return e?d.makeId("option-"+e,t.ids.input):void 0}exports.Listbox=F,exports.ListboxArrow=G,exports.ListboxButton=j,exports.ListboxGroup=z,exports.ListboxGroupLabel=J,exports.ListboxInput=q,exports.ListboxList=H,exports.ListboxOption=Q,exports.ListboxPopover=Y;
+"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,u=require("@reach/auto-id"),l=require("@reach/popover"),s=e(l),c=require("@reach/descendants"),d=require("@reach/utils"),v=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 f(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.Navigating="NAVIGATING",e.NavigatingWithKeys="NAVIGATING_WITH_KEYS",e.Searching="SEARCHING",e.Interacting="INTERACTING"}(i||(i={})),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.Navigate="NAVIGATE",e.OptionMouseEnter="OPTION_MOUSE_ENTER",e.OutsideMouseDown="OUTSIDE_MOUSE_DOWN",e.ValueChange="VALUE_CHANGE",e.OptionStartClick="OPTION_START_CLICK",e.OptionFinishClick="OPTION_FINISH_CLICK",e.PopoverPointerDown="POPOVER_POINTER_DOWN",e.PopoverPointerUp="POPOVER_POINTER_UP",e.UpdateAfterTypeahead="UPDATE_AFTER_TYPEAHEAD"}(r||(r={}));var p=v.assign({navigationValue:null}),b=v.assign({typeaheadQuery:null}),y=v.assign({value:function(e,t){return t.value}}),h=v.assign({navigationValue:function(e,t){return t.value}}),E=v.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 w(e,t){if(t.type===r.Blur){var n=t.refs,a=n.list,o=n.popover,i=t.relatedTarget,u=o&&d.getOwnerDocument(o)||document;return!(u.activeElement===a||!o||o.contains(i||u.activeElement))}return!1}function D(e,t){if(t.type===r.OutsideMouseDown){var n=t.refs,a=n.button,o=n.popover,i=t.relatedTarget;return!(i===a||!a||a.contains(i)||!o||o.contains(i))}return!1}function x(e,t){return!!e.options.find((function(t){return t.value===e.navigationValue}))}function N(e,t){var n=t.refs.popover,a=t.relatedTarget;return!(n&&a&&n.contains(a))&&x(e)}function I(e,t){requestAnimationFrame((function(){t.refs.list&&t.refs.list.focus()}))}function m(e,t){t.refs.button&&t.refs.button.focus()}function K(e,t){return!t.disabled}function O(e,t){return t.type!==r.Navigate||!t||!t.disabled}function T(e,t){return!(t&&t.disabled||null==e.navigationValue)}function C(e,t){t.callback&&t.callback(t.value)}function M(e,t){if(t.type===r.KeyDownEnter){var n=t.refs.hiddenInput;if(n&&n.form){var a=n.form.querySelector("button,[type='submit']");a&&a.click()}}}var R=v.assign({typeaheadQuery:function(e,t){return(e.typeaheadQuery||"")+t.query}}),S=v.assign({typeaheadQuery:""}),_=v.assign({value:function(e,t){if(t.type===r.UpdateAfterTypeahead&&t.query){var n=V(e.options,t.query);if(n&&!n.disabled)return t.callback&&t.callback(n.value),n.value}return e.value}}),A=v.assign({navigationValue:function(e,t){if(t.type===r.UpdateAfterTypeahead&&t.query){var n=V(e.options,t.query);if(n&&!n.disabled)return n.value}return e.navigationValue}}),L=((a={})[r.GetDerivedData]={actions:v.assign((function(e,t){return g({},e,{},t.data,{refs:g({},e.refs,{},t.data.refs||{})})}))},a[r.ValueChange]={actions:[y,C]},a),k=((o={})[r.ClearNavSelection]={actions:[p,I]},o[r.OptionFinishClick]={target:i.Idle,actions:[y,C,m,b],cond:T},o[r.KeyDownEnter]={target:i.Idle,actions:[y,C,m,b],cond:T},o[r.KeyDownSpace]={target:i.Idle,actions:[y,C,m,b],cond:T},o[r.ButtonMouseDown]={target:i.Idle,actions:[m]},o[r.KeyDownEscape]={target:i.Idle,actions:[m]},o);function V(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 W=c.createDescendantContext("ListboxDescendantContext"),U=d.createNamedContext("ListboxContext",{}),P=d.createNamedContext("ListboxGroupContext",{}),B=function(){return t.useContext(U)},q=t.forwardRef((function(e,a){var o=e["aria-labelledby"],l=e["aria-label"],s=e.children,y=e.defaultValue,m=e.disabled,T=void 0!==m&&m,C=e.form,V=e.name,P=e.onChange,B=e.required,q=e.value,F=e._componentName,j=void 0===F?"ListboxInput":F,G=f(e,["aria-labelledby","aria-label","children","defaultValue","disabled","form","name","onChange","required","value","_componentName"]),Y=t.useRef(null!=q).current,H=c.useDescendants(),Q=H[0],z=H[1],J=t.useRef(!1),Z=t.useRef(!1),$=t.useRef(null),ee=t.useRef(null),te=t.useRef(null),ne=t.useRef(null),ae=t.useRef(null),oe=v.useCreateMachine(function(e){var t,n,a,o,u,l;return{id:"mixed-checkbox",initial:i.Idle,context:{value:e.value,refs:{button:null,input:null,list:null,popover:null,hiddenInput:null},options:[],navigationValue:null,typeaheadQuery:null},states:(l={},l[i.Idle]={on:g({},L,(t={},t[r.ButtonMouseDown]={target:i.Navigating,actions:[E],cond:K},t[r.KeyDownSpace]={target:i.NavigatingWithKeys,actions:[E,I],cond:K},t[r.KeyDownSearch]={target:i.Idle,actions:R,cond:K},t[r.UpdateAfterTypeahead]={target:i.Idle,actions:[_],cond:K},t[r.ClearTypeahead]={target:i.Idle,actions:S},t[r.KeyDownNavigate]={target:i.NavigatingWithKeys,actions:[E,b],cond:K},t[r.KeyDownEnter]={actions:[M],cond:K},t))},l[i.Interacting]={entry:[p],on:g({},L,{},k,(n={},n[r.KeyDownEnter]=i.Interacting,n[r.Blur]=[{target:i.Idle,cond:w,actions:b},{target:i.Navigating,cond:N},{target:i.Interacting,actions:b}],n[r.OutsideMouseDown]=[{target:i.Idle,cond:D,actions:b},{target:i.Navigating,cond:x},{target:i.Interacting,actions:b}],n[r.Navigate]={target:i.Navigating,actions:[h],cond:O},n[r.KeyDownNavigate]={target:i.NavigatingWithKeys,actions:[h,b,I]},n))},l[i.Navigating]={on:g({},L,{},k,(a={},a[r.Blur]=[{target:i.Idle,cond:w,actions:b},{target:i.Navigating,cond:N},{target:i.Interacting,actions:b}],a[r.OutsideMouseDown]=[{target:i.Idle,cond:D,actions:b},{target:i.Navigating,cond:x},{target:i.Interacting,actions:b}],a[r.ButtonMouseUp]={target:i.Navigating,actions:[E,I]},a[r.Navigate]={target:i.Navigating,actions:[h],cond:O},a[r.KeyDownNavigate]={target:i.NavigatingWithKeys,actions:[h,b,I]},a[r.KeyDownSearch]={target:i.NavigatingWithKeys,actions:R},a[r.UpdateAfterTypeahead]={actions:[A]},a[r.ClearTypeahead]={actions:S},a))},l[i.NavigatingWithKeys]={on:g({},L,{},k,(o={},o[r.Blur]=[{target:i.Idle,cond:w,actions:b},{target:i.NavigatingWithKeys,cond:N},{target:i.Interacting,actions:b}],o[r.OutsideMouseDown]=[{target:i.Idle,cond:D,actions:b},{target:i.NavigatingWithKeys,cond:x},{target:i.Interacting,actions:b}],o[r.Navigate]={target:i.Navigating,actions:[h],cond:O},o[r.KeyDownNavigate]={target:i.NavigatingWithKeys,actions:[h,b,I]},o[r.KeyDownSearch]={target:i.NavigatingWithKeys,actions:R},o[r.UpdateAfterTypeahead]={actions:[A]},o[r.ClearTypeahead]={actions:S},o))},l[i.Searching]={on:g({},L,{},k,(u={},u[r.Blur]=[{target:i.Idle,cond:w,actions:b},{target:i.Searching,cond:N},{target:i.Interacting,actions:b}],u[r.OutsideMouseDown]=[{target:i.Idle,cond:D,actions:b},{target:i.Searching,cond:x},{target:i.Interacting,actions:b}],u[r.Navigate]={target:i.Navigating,actions:[h,b],cond:O},u[r.KeyDownNavigate]={target:i.NavigatingWithKeys,actions:[h,b,I]},u[r.KeyDownSearch]={target:i.NavigatingWithKeys,actions:R},u[r.UpdateAfterTypeahead]={actions:[A]},u[r.ClearTypeahead]={actions:S},u))},l)}}({value:(Y?q:y)||null})),ie=v.useMachineLogger(v.useMachine(oe,{button:$,hiddenInput:ee,input:te,list:ne,popover:ae}),!1),re=ie[0],ue=ie[1],le=u.useId(G.id),se=G.id||d.makeId("listbox-input",le),ce=d.useForkedRef(te,a),de=t.useMemo((function(){var e=Q.find((function(e){return e.value===re.context.value}));return e?e.label:null}),[Q,re.context.value]),ve=t.useMemo((function(){return{ariaLabel:l,disabled:T,ids:{label:o,input:se,listbox:d.makeId("listbox",se),button:d.makeId("button",se)},listboxValue:re.context.value,listboxValueLabel:de,mouseEventStartedRef:Z,mouseMovedRef:J,onValueChange:P,refs:{button:$,hiddenInput:ee,input:te,list:ne,popover:ae},send:ue,state:re}}),[l,o,re,T,se,P,ue,de]);d.useControlledSwitchWarning(q,"value",j);var ge=t.useRef(!1);if(!Y&&!y&&!ge.current&&Q.length){ge.current=!0;var fe=Q.find((function(e){return!e.disabled}));fe&&fe.value&&ue({type:r.ValueChange,value:fe.value})}return Y&&q!==re.context.value&&ue({type:r.ValueChange,value:q}),d.useIsomorphicLayoutEffect((function(){ue({type:r.GetDerivedData,data:{options:Q}})}),[Q,ue]),t.useEffect((function(){function e(e){ue({type:r.OutsideMouseDown,relatedTarget:e.relatedTarget||e.target})}return window.addEventListener("mousedown",e),function(){window.removeEventListener("mousedown",e)}}),[ue]),t.useEffect((function(){return d.checkStyles("listbox")}),[]),n.createElement(c.DescendantProvider,{context:W,items:Q,set:z},n.createElement(U.Provider,{value:ve},n.createElement("div",Object.assign({},G,{ref:ce,"data-reach-listbox-input":"","data-state":X(re.value)?"expanded":"closed","data-value":re.context.value,id:se}),d.isFunction(s)?s({value:re.context.value,valueLabel:de,expanded:X(re.value)}):s),(C||V||B)&&n.createElement("input",{ref:ee,disabled:T,form:C,name:V,readOnly:!0,required:B,tabIndex:-1,type:"text",value:re.context.value||""})))})),F=t.forwardRef((function(e,a){var o=e.arrow,i=void 0===o?"▼":o,r=e.button,u=e.children,l=e.portal,s=void 0===l||l,c=f(e,["arrow","button","children","portal"]);return n.createElement(q,Object.assign({},c,{_componentName:"Listbox",ref:a}),(function(e){var a=e.value,o=e.valueLabel;return n.createElement(t.Fragment,null,n.createElement(j,{arrow:i,children:r?d.isFunction(r)?r({value:a,label:o}):r:void 0}),n.createElement(Y,{portal:s},n.createElement(H,null,u)))}))})),j=d.forwardRefWithAs((function(e,a){var o=e["aria-label"],i=e.arrow,u=void 0!==i&&i,l=e.as,s=void 0===l?"span":l,c=e.children,v=e.onKeyDown,g=e.onMouseDown,p=e.onMouseUp,b=f(e,["aria-label","arrow","as","children","onKeyDown","onMouseDown","onMouseUp"]),y=B(),h=y.disabled,E=y.ids,w=E.button,D=E.label,x=y.mouseEventStartedRef,N=y.state,I=y.send,m=y.listboxValueLabel,K=N.context.value,O=d.useForkedRef(y.refs.button,a),T=Z(),C=X(N.value),M=t.useMemo((function(){return c?d.isFunction(c)?c({expanded:C,label:m,value:K}):c:m}),[c,m,C,K]);return n.createElement(s,Object.assign({"aria-disabled":h||void 0,"aria-expanded":C||void 0,"aria-haspopup":"listbox","aria-labelledby":o?void 0:[D,w].filter(Boolean).join(" "),"aria-label":o,role:"button",tabIndex:h?-1:0},b,{ref:O,"data-reach-listbox-button":"",id:w,onKeyDown:d.wrapEvent(v,T),onMouseDown:d.wrapEvent(g,(function(e){d.isRightClick(e.nativeEvent)||(x.current=!0,e.preventDefault(),I({type:r.ButtonMouseDown,disabled:h}))})),onMouseUp:d.wrapEvent(p,(function(e){x.current&&(d.isRightClick(e.nativeEvent)||I({type:r.ButtonMouseUp})),x.current=!1}))}),M,u&&n.createElement(G,null,d.isBoolean(u)?null:u))})),G=t.forwardRef((function(e,t){var a=e.children,o=f(e,["children"]),i=X(B().state.value),r=i?"▲":"▼";return n.createElement("span",Object.assign({"aria-hidden":!0},o,{ref:t,"data-reach-listbox-arrow":"","data-expanded":i?"":void 0}),d.isFunction(a)?a({expanded:i}):a||r)})),Y=t.forwardRef((function(e,t){var a=e.position,o=void 0===a?l.positionMatchWidth:a,i=e.onBlur,u=e.onKeyDown,c=e.portal,v=void 0===c||c,p=f(e,["position","onBlur","onKeyDown","portal"]),b=B(),y=b.refs,h=y.button,E=b.send,w=b.state.value,D=d.useForkedRef(y.popover,t),x=Z(),N=g({hidden:!X(w),tabIndex:-1},p,{ref:D,"data-reach-listbox-popover":"",onBlur:d.wrapEvent(i,(function(e){var t=e.nativeEvent;requestAnimationFrame((function(){E({type:r.Blur,relatedTarget:t.relatedTarget||t.target})}))})),onKeyDown:d.wrapEvent(u,x)});return v?n.createElement(s,Object.assign({},N,{targetRef:h,position:o})):n.createElement("div",Object.assign({},N))})),H=d.forwardRefWithAs((function(e,t){var a=e.as,o=void 0===a?"ul":a,i=f(e,["as"]),r=B(),u=r.ariaLabel,l=r.ids,s=l.listbox,c=l.label,v=r.state,g=v.context,p=g.value,b=g.navigationValue,y=v.value,h=d.useForkedRef(t,r.refs.list);return n.createElement(o,Object.assign({"aria-activedescendant":$(X(y)?b:p),"aria-labelledby":u?void 0:c,"aria-label":u,role:"listbox",tabIndex:-1},i,{ref:h,"data-reach-listbox-list":"",id:s}))})),Q=d.forwardRefWithAs((function(e,a){var o=e.as,i=void 0===o?"li":o,u=e.children,l=e.disabled,s=e.onMouseDown,v=e.onMouseEnter,g=e.onMouseLeave,p=e.onMouseMove,b=e.onMouseUp,y=e.onTouchStart,h=e.value,E=e.label,w=f(e,["as","children","disabled","onMouseDown","onMouseEnter","onMouseLeave","onMouseMove","onMouseUp","onTouchStart","value","label"]),D=B(),x=D.send,N=D.state,I=N.value,m=N.context,K=m.value,O=m.navigationValue,T=D.onValueChange,C=D.mouseEventStartedRef,M=D.mouseMovedRef,R=t.useState(E),S=R[1],_=E||R[0]||"",A=t.useRef(null);c.useDescendant({context:W,element:A.current,value:h,label:_,disabled:!!l});var L=t.useCallback((function(e){E||S((function(t){return e.textContent&&t!==e.textContent?e.textContent:t||""}))}),[E]),k=d.useForkedRef(L,a,A),V=!!O&&O===h,U=K===h;return n.createElement(i,Object.assign({"aria-selected":(X(I)?V:U)||void 0,"aria-disabled":l||void 0,role:"option"},w,{ref:k,id:$(h),"data-reach-listbox-option":"","data-current":U?"":void 0,"data-label":_,"data-value":h,onMouseDown:d.wrapEvent(s,(function(e){e.preventDefault(),C.current=!0,d.isRightClick(e.nativeEvent)||x({type:r.OptionStartClick})})),onMouseEnter:d.wrapEvent(v,(function(){M.current&&(M.current=!1,x({type:r.Navigate,value:h,disabled:!!l}))})),onMouseLeave:d.wrapEvent(g,(function(){x({type:r.ClearNavSelection})})),onMouseMove:d.wrapEvent(p,(function(){M.current=!0,O!==h&&x({type:r.Navigate,value:h,disabled:!!l})})),onMouseUp:d.wrapEvent(b,(function(e){C.current&&(C.current=!1,d.isRightClick(e.nativeEvent)||x({type:r.OptionFinishClick,value:h,callback:T,disabled:!!l}))})),onTouchStart:d.wrapEvent(y,(function(){x({type:r.Navigate,value:h,disabled:!!l})}))}),u)})),z=t.forwardRef((function(e,t){var a=e.label,o=e.children,i=f(e,["label","children"]),r=B().ids.listbox,l=d.makeId("label",u.useId(i.id),r);return n.createElement(P.Provider,{value:{labelId:l}},n.createElement("div",Object.assign({"aria-labelledby":l,role:"group"},i,{"data-reach-listbox-group":"",ref:t}),a&&n.createElement(J,null,a),o))})),J=d.forwardRefWithAs((function(e,a){var o=e.as,i=void 0===o?"span":o,r=f(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 X(e){return[i.Navigating,i.NavigatingWithKeys,i.Interacting,i.Searching].includes(e)}function Z(){var e=B(),n=e.disabled,a=e.onValueChange,o=e.state.context,i=o.navigationValue,u=o.typeaheadQuery,l=e.send,s=t.useContext(W).descendants;t.useEffect((function(){u&&l({type:r.UpdateAfterTypeahead,query:u,callback:a});var e=window.setTimeout((function(){null!=u&&l({type:r.ClearTypeahead})}),1e3);return function(){window.clearTimeout(e)}}),[a,l,u]);var v=s.findIndex((function(e){return e.value===i}));return d.wrapEvent((function(e){var t=e.key,o=d.isString(t)&&1===t.length,u=s.find((function(e){return e.value===i}));switch(t){case"Enter":return void l({type:r.KeyDownEnter,value:i,callback:a,disabled:!!((null==u?void 0:u.disabled)||n)});case" ":return e.preventDefault(),void l({type:r.KeyDownSpace,value:i,callback:a,disabled:!!((null==u?void 0:u.disabled)||n)});case"Escape":return void l({type:r.KeyDownEscape});case"Tab":return void l({type:e.shiftKey?r.KeyDownShiftTab:r.KeyDownTab});default:return void(o&&l({type:r.KeyDownSearch,query:t,disabled:n}))}}),c.useDescendantKeyDown(W,{currentIndex:v,orientation:"vertical",key:"index",rotate:!0,filter:function(e){return!e.disabled},callback:function(e){l({type:r.KeyDownNavigate,value:s[e].value,disabled:n})}}))}function $(e){var t=B();return e?d.makeId("option-"+e,t.ids.input):void 0}exports.Listbox=F,exports.ListboxArrow=G,exports.ListboxButton=j,exports.ListboxGroup=z,exports.ListboxGroupLabel=J,exports.ListboxInput=q,exports.ListboxList=H,exports.ListboxOption=Q,exports.ListboxPopover=Y;
 //# sourceMappingURL=listbox.cjs.production.min.js.map

dist/listbox.esm.js

@@ -213,3 +213,3 @@ import React, { forwardRef, useRef, useMemo, useEffect, Fragment, useContext, useState, useCallback } from 'react';
 function submitForm(data, event) {
-  if (event.type !== ListboxEvents.KeyDownEnter || event.disabled) {
+  if (event.type !== ListboxEvents.KeyDownEnter) {
     return;
@@ -306,2 +306,9 @@ } // So this one is a little weird, but here's what we're doing.
   target: ListboxStates.Idle,
+  // When the user triggers a mouseDown event on the button, we call
+  // event.preventDefault() because the browser will naturally call mouseUp
+  // and click, which will reopen the button (which we don't want). As such,
+  // the click won't blur the open list or re-focus the trigger, so we call
+  // `focusButton` to do that manually. We could work around this with
+  // deferred transitions with xstate, but @xstate/fsm currently doesn't
+  // support that feature and this works good enough for the moment.
   actions: [focusButton]
@@ -343,3 +350,3 @@ }, _openEvents[ListboxEvents.KeyDownEscape] = {
         target: ListboxStates.Navigating,
-        actions: [navigateFromCurrentValue, focusButton],
+        actions: [navigateFromCurrentValue],
         cond: listboxIsNotDisabled
@@ -439,3 +446,2 @@ }, _extends2[ListboxEvents.KeyDownSpace] = {
     }, _states[ListboxStates.NavigatingWithKeys] = {
-      // entry: focusList,
       on: _extends({}, commonEvents, {}, openEvents, (_extends5 = {}, _extends5[ListboxEvents.Blur] = [{
@@ -737,3 +743,4 @@ target: ListboxStates.Idle,
     value: current.context.value,
-    valueLabel: valueLabel
+    valueLabel: valueLabel,
+    expanded: isExpanded(current.value)
   }) : children), (form || name || required) && React.createElement("input", {
@@ -857,3 +864,2 @@ ref: hiddenInput,
       mouseEventStartedRef.current = true;
-      event.persist();
       event.preventDefault();
@@ -860,0 +866,0 @@ send({

package.json

 {
   "name": "@reach/listbox",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Accessible React listbox input.",
@@ -17,3 +17,3 @@ "author": "React Training <[e-mail]>",
     "@reach/auto-id": "^0.9.0",
-    "@reach/descendants": "^0.9.0",
+    "@reach/descendants": "^0.9.1",
     "@reach/machine": "^0.9.0",
@@ -36,3 +36,3 @@ "@reach/popover": "^0.9.0",
   ],
-  "gitHead": "0c789bb48554bf13c62dd09210ebdf2f9af33d30"
+  "gitHead": "19b5b1ec7682dfed613512f1592958a47d43ad4d"
 }

No alert changes

Improved metrics

Total package byte prevSize

470963

increased by0.55%

Lines of code

3400

increased by0.41%

Dependency changes

• Updated@reach/descendants@^0.9.1