@reach/combobox - npm Package Compare versions

Comparing version 0.7.4 to 0.8.0

dist/combobox.cjs.development.js

@@ -90,3 +90,3 @@ 'use strict';
   }, _states[NAVIGATING] = {
-    on: (_on3 = {}, _on3[CHANGE] = SUGGESTING, _on3[FOCUS] = SUGGESTING, _on3[CLEAR] = IDLE, _on3[BLUR] = IDLE, _on3[ESCAPE] = IDLE, _on3[NAVIGATE] = NAVIGATING, _on3[SELECT_WITH_KEYBOARD] = IDLE, _on3[CLOSE_WITH_BUTTON] = IDLE, _on3[INTERACT] = INTERACTING, _on3)
+    on: (_on3 = {}, _on3[CHANGE] = SUGGESTING, _on3[FOCUS] = SUGGESTING, _on3[CLEAR] = IDLE, _on3[BLUR] = IDLE, _on3[ESCAPE] = IDLE, _on3[NAVIGATE] = NAVIGATING, _on3[SELECT_WITH_CLICK] = IDLE, _on3[SELECT_WITH_KEYBOARD] = IDLE, _on3[CLOSE_WITH_BUTTON] = IDLE, _on3[INTERACT] = INTERACTING, _on3)
   }, _states[INTERACTING] = {
@@ -128,2 +128,3 @@ on: (_on4 = {}, _on4[CHANGE] = SUGGESTING, _on4[FOCUS] = SUGGESTING, _on4[BLUR] = IDLE, _on4[ESCAPE] = IDLE, _on4[NAVIGATE] = NAVIGATING, _on4[CLOSE_WITH_BUTTON] = IDLE, _on4[SELECT_WITH_CLICK] = IDLE, _on4)
     case SELECT_WITH_CLICK:
+      event.callback(event.value);
       return _extends({}, nextState, {
@@ -135,2 +136,3 @@ value: event.value,
     case SELECT_WITH_KEYBOARD:
+      event.callback(data.navigationValue || null);
       return _extends({}, nextState, {
@@ -259,3 +261,3 @@ value: data.navigationValue,
     listboxId: listboxId,
-    onSelect: onSelect,
+    onSelect: onSelect || utils.noop,
     openOnFocus: openOnFocus,
@@ -285,5 +287,5 @@ persistSelectionRef: persistSelectionRef,
 });
-Combobox.displayName = "Combobox";
 
 {
+  Combobox.displayName = "Combobox";
   Combobox.propTypes = {
@@ -427,4 +429,7 @@ as: PropTypes.elementType,
 });
-ComboboxInput.displayName = "ComboboxInput"; ////////////////////////////////////////////////////////////////////////////////
 
+{
+  ComboboxInput.displayName = "ComboboxInput";
+} ////////////////////////////////////////////////////////////////////////////////
+
 /**
@@ -440,2 +445,3 @@ * ComboboxPopover
 
+
 var ComboboxPopover =
@@ -484,4 +490,7 @@ /*#__PURE__*/
 });
-ComboboxPopover.displayName = "ComboboxPopover"; ////////////////////////////////////////////////////////////////////////////////
 
+{
+  ComboboxPopover.displayName = "ComboboxPopover";
+} ////////////////////////////////////////////////////////////////////////////////
+
 /**
@@ -496,2 +505,3 @@ * ComboboxList
 
+
 var ComboboxList =
@@ -519,4 +529,7 @@ /*#__PURE__*/
 });
-ComboboxList.displayName = "ComboboxList"; ////////////////////////////////////////////////////////////////////////////////
 
+{
+  ComboboxList.displayName = "ComboboxList";
+} ////////////////////////////////////////////////////////////////////////////////
+
 /**
@@ -530,2 +543,3 @@ * ComboboxOption
 
+
 var ComboboxOption =
@@ -554,5 +568,5 @@ /*#__PURE__*/
   var handleClick = function handleClick() {
-    onSelect && onSelect(value);
     transition(SELECT_WITH_CLICK, {
-      value: value
+      value: value,
+      callback: onSelect
     });
@@ -585,4 +599,7 @@ };
 });
-ComboboxOption.displayName = "ComboboxOption"; ////////////////////////////////////////////////////////////////////////////////
 
+{
+  ComboboxOption.displayName = "ComboboxOption";
+} ////////////////////////////////////////////////////////////////////////////////
+
 /**
@@ -605,2 +622,3 @@ * ComboboxOptionText
 
+
 function ComboboxOptionText() {
@@ -628,4 +646,7 @@ var _useContext5 = React.useContext(OptionContext),
 }
-ComboboxOptionText.displayName = "ComboboxOptionText"; ////////////////////////////////////////////////////////////////////////////////
 
+{
+  ComboboxOptionText.displayName = "ComboboxOptionText";
+} ////////////////////////////////////////////////////////////////////////////////
+
 /**
@@ -635,2 +656,3 @@ * ComboboxButton
 
+
 var ComboboxButton =
@@ -673,4 +695,7 @@ /*#__PURE__*/
 });
-ComboboxButton.displayName = "ComboboxButton"; ////////////////////////////////////////////////////////////////////////////////
 
+{
+  ComboboxButton.displayName = "ComboboxButton";
+} ////////////////////////////////////////////////////////////////////////////////
+
 /**
@@ -685,2 +710,3 @@ * Move focus back to the input if we start navigating w/ the
 
+
 function useFocusManagement(lastEventType, inputRef) {
@@ -846,4 +872,5 @@ /*
             event.preventDefault();
-            onSelect && onSelect(navigationValue);
-            transition(SELECT_WITH_KEYBOARD);
+            transition(SELECT_WITH_KEYBOARD, {
+              callback: onSelect
+            });
           }
@@ -909,12 +936,15 @@
 
-    if (!nextState) {
+    if (nextState) {
+      dispatch(_extends({
+        type: event,
+        state: state,
+        nextState: state
+      }, payload));
+      setState(nextState);
+      return;
+    }
+
+    {
       throw new Error("Unknown event \"" + event + "\" for state \"" + state + "\"");
     }
-
-    dispatch(_extends({
-      type: event,
-      state: state,
-      nextState: state
-    }, payload));
-    setState(nextState);
   };
@@ -921,0 +951,0 @@

dist/combobox.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 o,a,r,i,u,l=require("@reach/utils"),s=require("highlight-words-core"),c=e(require("escape-regexp")),v=require("@reach/auto-id"),E=require("@reach/popover"),f=e(E);function p(){return(p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}function d(e,t){if(null==e)return{};var n,o,a={},r=Object.keys(e);for(o=0;o<r.length;o++)t.indexOf(n=r[o])>=0||(a[n]=e[n]);return a}var C="IDLE",T={initial:C,states:(u={},u.IDLE={on:(o={},o.BLUR=C,o.CLEAR=C,o.CHANGE="SUGGESTING",o.FOCUS="SUGGESTING",o.NAVIGATE="NAVIGATING",o.OPEN_WITH_BUTTON="SUGGESTING",o)},u.SUGGESTING={on:(a={},a.CHANGE="SUGGESTING",a.FOCUS="SUGGESTING",a.NAVIGATE="NAVIGATING",a.CLEAR=C,a.ESCAPE=C,a.BLUR=C,a.SELECT_WITH_CLICK=C,a.INTERACT="INTERACTING",a.CLOSE_WITH_BUTTON=C,a)},u.NAVIGATING={on:(r={},r.CHANGE="SUGGESTING",r.FOCUS="SUGGESTING",r.CLEAR=C,r.BLUR=C,r.ESCAPE=C,r.NAVIGATE="NAVIGATING",r.SELECT_WITH_KEYBOARD=C,r.CLOSE_WITH_BUTTON=C,r.INTERACT="INTERACTING",r)},u.INTERACTING={on:(i={},i.CHANGE="SUGGESTING",i.FOCUS="SUGGESTING",i.BLUR=C,i.ESCAPE=C,i.NAVIGATE="NAVIGATING",i.CLOSE_WITH_BUTTON=C,i.SELECT_WITH_CLICK=C,i)},u)},I=function(e,t){var n=p({},e,{lastEventType:t.type});switch(t.type){case"CHANGE":return p({},n,{navigationValue:null,value:t.value});case"NAVIGATE":case"OPEN_WITH_BUTTON":return p({},n,{navigationValue:A(n,t)});case"CLEAR":return p({},n,{value:"",navigationValue:null});case"BLUR":case"ESCAPE":return p({},n,{navigationValue:null});case"SELECT_WITH_CLICK":return p({},n,{value:t.value,navigationValue:null});case"SELECT_WITH_KEYBOARD":return p({},n,{value:e.navigationValue,navigationValue:null});case"CLOSE_WITH_BUTTON":return p({},n,{navigationValue:null});case"INTERACT":return n;case"FOCUS":return p({},n,{navigationValue:A(n,t)});default:return n}},b=["SUGGESTING","NAVIGATING","INTERACTING"],N=function(e){return b.includes(e)};function A(e,t){return t.value?t.value:t.persistSelection?e.value:null}var x=l.createDescendantContext("ComboboxDescendantContext"),G=l.createNamedContext("ComboboxContext",{}),m=l.createNamedContext("OptionContext",{}),h=l.forwardRefWithAs((function(e,o){var a=e.onSelect,r=e.openOnFocus,i=void 0!==r&&r,u=e.children,s=e.as,c=void 0===s?"div":s,E=d(e,["onSelect","openOnFocus","children","as"]),f=l.useDescendants(),C=f[0],b=f[1],A=t.useRef(),m=t.useRef(),h=t.useRef(),S=t.useRef(),R=t.useRef(),g=function(e,n,o){var a=t.useState(e.initial),r=a[0],i=a[1],u=t.useReducer(n,{value:"",navigationValue:null}),l=u[1];return[r,u[0],function(t,n){void 0===n&&(n={});var o=e.states[r],a=o&&o.on[t];if(!a)throw new Error('Unknown event "'+t+'" for state "'+r+'"');l(p({type:t,state:r,nextState:r},n)),i(a)}]}(T,I),O=g[0],_=g[1],L=g[2];!function(e,t){l.useIsomorphicLayoutEffect((function(){"NAVIGATE"!==e&&"ESCAPE"!==e&&"SELECT_WITH_CLICK"!==e&&"OPEN_WITH_BUTTON"!==e||t.current.focus()}),[t,e])}(_.lastEventType,A);var w=v.useId(E.id),V=w?l.makeId("listbox",w):"listbox",y={autocompletePropRef:S,buttonRef:h,data:_,inputRef:A,isVisible:N(O),listboxId:V,onSelect:a,openOnFocus:i,persistSelectionRef:R,popoverRef:m,state:O,transition:L};return t.useEffect((function(){return l.checkStyles("combobox")}),[]),n.createElement(l.DescendantProvider,{context:x,items:C,set:b},n.createElement(G.Provider,{value:y},n.createElement(c,Object.assign({},E,{"data-reach-combobox":"",ref:o,role:"combobox","aria-haspopup":"listbox","aria-owns":V,"aria-expanded":y.isVisible}),u)))}));h.displayName="Combobox";var S=l.forwardRefWithAs((function(e,o){var a=e.as,r=void 0===a?"input":a,i=e.selectOnClick,u=void 0!==i&&i,s=e.autocomplete,c=void 0===s||s,v=e.onClick,E=e.onChange,f=e.onKeyDown,p=e.onBlur,C=e.onFocus,T=e.value,I=d(e,["as","selectOnClick","autocomplete","onClick","onChange","onKeyDown","onBlur","onFocus","value"]),b=t.useContext(G),N=b.data,A=N.navigationValue,x=N.value,m=N.lastEventType,h=b.inputRef,S=b.state,R=b.transition,g=b.listboxId,O=b.autocompletePropRef,_=b.openOnFocus,L=l.useForkedRef(h,o),U=t.useRef(!1),B=w(),H=V(),k=null!=T;l.useIsomorphicLayoutEffect((function(){O.current=c}),[c,O]);var W=function(e){""===e.trim()?R("CLEAR"):R("CHANGE",{value:e})};return k&&T!==x&&W(T),n.createElement(r,Object.assign({},I,{"data-reach-combobox-input":"",ref:L,value:(!c||"NAVIGATING"!==S&&"INTERACTING"!==S?T||x:A||T||x)||"",onClick:l.wrapEvent(v,(function(){U.current&&(U.current=!1,h.current.select())})),onBlur:l.wrapEvent(p,H),onFocus:l.wrapEvent(C,(function(){u&&(U.current=!0),_&&"SELECT_WITH_CLICK"!==m&&R("FOCUS")})),onChange:l.wrapEvent(E,(function(e){k||W(e.target.value)})),onKeyDown:l.wrapEvent(f,B),id:g,"aria-autocomplete":"both","aria-activedescendant":A?String(y(A)):void 0}))}));S.displayName="ComboboxInput";var R=t.forwardRef((function(e,o){var a=e.children,r=e.portal,i=void 0===r||r,u=e.onKeyDown,s=e.onBlur,c=d(e,["children","portal","onKeyDown","onBlur"]),v=t.useContext(G),p=v.inputRef,C=v.isVisible,T=l.useForkedRef(v.popoverRef,o),I=w(),b=V(),N={"data-reach-combobox-popover":"",onKeyDown:l.wrapEvent(u,I),onBlur:l.wrapEvent(s,b),hidden:!C,tabIndex:-1,children:a};return i?n.createElement(f,Object.assign({},c,{ref:T,position:E.positionMatchWidth,targetRef:p},N)):n.createElement("div",Object.assign({ref:T},c,N))}));R.displayName="ComboboxPopover";var g=l.forwardRefWithAs((function(e,o){var a=e.persistSelection,r=void 0!==a&&a,i=e.as,u=void 0===i?"ul":i,l=d(e,["persistSelection","as"]),s=t.useContext(G);return r&&(s.persistSelectionRef.current=!0),n.createElement(u,Object.assign({},l,{ref:o,"data-reach-combobox-list":"",role:"listbox"}))}));g.displayName="ComboboxList";var O=t.forwardRef((function(e,o){var a=e.children,r=e.value,i=e.onClick,u=d(e,["children","value","onClick"]),s=t.useContext(G),c=s.onSelect,v=s.data.navigationValue,E=s.transition,f=t.useRef(null),p=l.useForkedRef(o,f),C=l.useDescendant({context:x,element:f.current,value:r}),T=v===r;return n.createElement(m.Provider,{value:{value:r,index:C}},n.createElement("li",Object.assign({},u,{"data-reach-combobox-option":"",ref:p,id:String(y(r)),role:"option","aria-selected":T,"data-highlighted":T?"":void 0,tabIndex:-1,onClick:l.wrapEvent(i,(function(){c&&c(r),E("SELECT_WITH_CLICK",{value:r})})),children:a||n.createElement(_,null)})))}));function _(){var e=t.useContext(m).value,o=t.useContext(G).data.value,a=t.useMemo((function(){return s.findAll({searchWords:c(o||"").split(/\s+/),textToHighlight:e})}),[o,e]);return n.createElement(n.Fragment,null,a.length?a.map((function(t,o){var a=e.slice(t.start,t.end);return n.createElement("span",{key:o,"data-user-value":!!t.highlight||void 0,"data-suggested-value":!t.highlight||void 0},a)})):e)}O.displayName="ComboboxOption",_.displayName="ComboboxOptionText";var L=l.forwardRefWithAs((function(e,o){var a=e.as,r=void 0===a?"button":a,i=e.onClick,u=e.onKeyDown,s=d(e,["as","onClick","onKeyDown"]),c=t.useContext(G),v=c.transition,E=c.state,f=c.listboxId,p=c.isVisible,T=l.useForkedRef(c.buttonRef,o),I=w();return n.createElement(r,Object.assign({"data-reach-combobox-button":"","aria-controls":f,"aria-haspopup":"listbox","aria-expanded":p,ref:T,onClick:l.wrapEvent(i,(function(){v(E===C?"OPEN_WITH_BUTTON":"CLOSE_WITH_BUTTON")})),onKeyDown:l.wrapEvent(u,I)},s))}));function w(){var e=t.useContext(G),n=e.data.navigationValue,o=e.onSelect,a=e.state,r=e.transition,i=e.autocompletePropRef,u=e.persistSelectionRef,l=t.useContext(x).descendants;return function(e){switch(e.key){case"ArrowDown":if(e.preventDefault(),!l||0===l.length)return;if(a===C)r("NAVIGATE",{persistSelection:u.current});else{var t=l.findIndex((function(e){return e.value===n}));r("NAVIGATE",t===l.length-1?i.current?{value:null}:{value:l[0].value}:{value:l[(t+1)%l.length].value})}break;case"ArrowUp":if(e.preventDefault(),!l||0===l.length)return;if(a===C)r("NAVIGATE");else{var s=l.findIndex((function(e){return e.value===n}));r("NAVIGATE",0===s?i.current?{value:null}:{value:l[l.length-1].value}:-1===s?{value:l.length?l[l.length-1].value:null}:{value:l[(s-1+l.length)%l.length].value})}break;case"Escape":a!==C&&r("ESCAPE");break;case"Enter":"NAVIGATING"===a&&null!==n&&(e.preventDefault(),o&&o(n),r("SELECT_WITH_KEYBOARD"))}}}function V(){var e=t.useContext(G),n=e.state,o=e.transition,a=e.popoverRef,r=e.inputRef,i=e.buttonRef;return function(){requestAnimationFrame((function(){document.activeElement!==r.current&&document.activeElement!==i.current&&a.current&&(a.current.contains(document.activeElement)?"INTERACTING"!==n&&o("INTERACT"):o("BLUR"))}))}}L.displayName="ComboboxButton";var y=function(e){var t=0;if(0===e.length)return t;for(var n=0;n<e.length;n++)t=(t<<5)-t+e.charCodeAt(n),t&=t;return t};exports.Combobox=h,exports.ComboboxButton=L,exports.ComboboxInput=S,exports.ComboboxList=g,exports.ComboboxOption=O,exports.ComboboxOptionText=_,exports.ComboboxPopover=R;
+"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 o,a,r,u,i,l=require("@reach/utils"),c=require("highlight-words-core"),s=e(require("escape-regexp")),v=require("@reach/auto-id"),E=require("@reach/popover"),f=e(E);function d(){return(d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}function p(e,t){if(null==e)return{};var n,o,a={},r=Object.keys(e);for(o=0;o<r.length;o++)t.indexOf(n=r[o])>=0||(a[n]=e[n]);return a}var C="IDLE",T={initial:C,states:(i={},i.IDLE={on:(o={},o.BLUR=C,o.CLEAR=C,o.CHANGE="SUGGESTING",o.FOCUS="SUGGESTING",o.NAVIGATE="NAVIGATING",o.OPEN_WITH_BUTTON="SUGGESTING",o)},i.SUGGESTING={on:(a={},a.CHANGE="SUGGESTING",a.FOCUS="SUGGESTING",a.NAVIGATE="NAVIGATING",a.CLEAR=C,a.ESCAPE=C,a.BLUR=C,a.SELECT_WITH_CLICK=C,a.INTERACT="INTERACTING",a.CLOSE_WITH_BUTTON=C,a)},i.NAVIGATING={on:(r={},r.CHANGE="SUGGESTING",r.FOCUS="SUGGESTING",r.CLEAR=C,r.BLUR=C,r.ESCAPE=C,r.NAVIGATE="NAVIGATING",r.SELECT_WITH_CLICK=C,r.SELECT_WITH_KEYBOARD=C,r.CLOSE_WITH_BUTTON=C,r.INTERACT="INTERACTING",r)},i.INTERACTING={on:(u={},u.CHANGE="SUGGESTING",u.FOCUS="SUGGESTING",u.BLUR=C,u.ESCAPE=C,u.NAVIGATE="NAVIGATING",u.CLOSE_WITH_BUTTON=C,u.SELECT_WITH_CLICK=C,u)},i)},I=function(e,t){var n=d({},e,{lastEventType:t.type});switch(t.type){case"CHANGE":return d({},n,{navigationValue:null,value:t.value});case"NAVIGATE":case"OPEN_WITH_BUTTON":return d({},n,{navigationValue:b(n,t)});case"CLEAR":return d({},n,{value:"",navigationValue:null});case"BLUR":case"ESCAPE":return d({},n,{navigationValue:null});case"SELECT_WITH_CLICK":return t.callback(t.value),d({},n,{value:t.value,navigationValue:null});case"SELECT_WITH_KEYBOARD":return t.callback(e.navigationValue||null),d({},n,{value:e.navigationValue,navigationValue:null});case"CLOSE_WITH_BUTTON":return d({},n,{navigationValue:null});case"INTERACT":return n;case"FOCUS":return d({},n,{navigationValue:b(n,t)});default:return n}},A=["SUGGESTING","NAVIGATING","INTERACTING"],N=function(e){return A.includes(e)};function b(e,t){return t.value?t.value:t.persistSelection?e.value:null}var G=l.createDescendantContext("ComboboxDescendantContext"),h=l.createNamedContext("ComboboxContext",{}),S=l.createNamedContext("OptionContext",{}),x=l.forwardRefWithAs((function(e,o){var a=e.onSelect,r=e.openOnFocus,u=void 0!==r&&r,i=e.children,c=e.as,s=void 0===c?"div":c,E=p(e,["onSelect","openOnFocus","children","as"]),f=l.useDescendants(),C=f[0],A=f[1],b=t.useRef(),S=t.useRef(),x=t.useRef(),R=t.useRef(),g=t.useRef(),m=function(e,n,o){var a=t.useState(e.initial),r=a[0],u=a[1],i=t.useReducer(n,{value:"",navigationValue:null}),l=i[1];return[r,i[0],function(t,n){void 0===n&&(n={});var o=e.states[r],a=o&&o.on[t];if(a)return l(d({type:t,state:r,nextState:r},n)),void u(a)}]}(T,I),O=m[0],_=m[1],L=m[2];!function(e,t){l.useIsomorphicLayoutEffect((function(){"NAVIGATE"!==e&&"ESCAPE"!==e&&"SELECT_WITH_CLICK"!==e&&"OPEN_WITH_BUTTON"!==e||t.current.focus()}),[t,e])}(_.lastEventType,b);var V=v.useId(E.id),w=V?l.makeId("listbox",V):"listbox",U={autocompletePropRef:R,buttonRef:x,data:_,inputRef:b,isVisible:N(O),listboxId:w,onSelect:a||l.noop,openOnFocus:u,persistSelectionRef:g,popoverRef:S,state:O,transition:L};return t.useEffect((function(){return l.checkStyles("combobox")}),[]),n.createElement(l.DescendantProvider,{context:G,items:C,set:A},n.createElement(h.Provider,{value:U},n.createElement(s,Object.assign({},E,{"data-reach-combobox":"",ref:o,role:"combobox","aria-haspopup":"listbox","aria-owns":w,"aria-expanded":U.isVisible}),i)))})),R=l.forwardRefWithAs((function(e,o){var a=e.as,r=void 0===a?"input":a,u=e.selectOnClick,i=void 0!==u&&u,c=e.autocomplete,s=void 0===c||c,v=e.onClick,E=e.onChange,f=e.onKeyDown,d=e.onBlur,C=e.onFocus,T=e.value,I=p(e,["as","selectOnClick","autocomplete","onClick","onChange","onKeyDown","onBlur","onFocus","value"]),A=t.useContext(h),N=A.data,b=N.navigationValue,G=N.value,S=N.lastEventType,x=A.inputRef,R=A.state,g=A.transition,m=A.listboxId,O=A.autocompletePropRef,_=A.openOnFocus,L=l.useForkedRef(x,o),k=t.useRef(!1),y=V(),H=w(),B=null!=T;l.useIsomorphicLayoutEffect((function(){O.current=s}),[s,O]);var W=function(e){""===e.trim()?g("CLEAR"):g("CHANGE",{value:e})};return B&&T!==G&&W(T),n.createElement(r,Object.assign({},I,{"data-reach-combobox-input":"",ref:L,value:(!s||"NAVIGATING"!==R&&"INTERACTING"!==R?T||G:b||T||G)||"",onClick:l.wrapEvent(v,(function(){k.current&&(k.current=!1,x.current.select())})),onBlur:l.wrapEvent(d,H),onFocus:l.wrapEvent(C,(function(){i&&(k.current=!0),_&&"SELECT_WITH_CLICK"!==S&&g("FOCUS")})),onChange:l.wrapEvent(E,(function(e){B||W(e.target.value)})),onKeyDown:l.wrapEvent(f,y),id:m,"aria-autocomplete":"both","aria-activedescendant":b?String(U(b)):void 0}))})),g=t.forwardRef((function(e,o){var a=e.children,r=e.portal,u=void 0===r||r,i=e.onKeyDown,c=e.onBlur,s=p(e,["children","portal","onKeyDown","onBlur"]),v=t.useContext(h),d=v.inputRef,C=v.isVisible,T=l.useForkedRef(v.popoverRef,o),I=V(),A=w(),N={"data-reach-combobox-popover":"",onKeyDown:l.wrapEvent(i,I),onBlur:l.wrapEvent(c,A),hidden:!C,tabIndex:-1,children:a};return u?n.createElement(f,Object.assign({},s,{ref:T,position:E.positionMatchWidth,targetRef:d},N)):n.createElement("div",Object.assign({ref:T},s,N))})),m=l.forwardRefWithAs((function(e,o){var a=e.persistSelection,r=void 0!==a&&a,u=e.as,i=void 0===u?"ul":u,l=p(e,["persistSelection","as"]),c=t.useContext(h);return r&&(c.persistSelectionRef.current=!0),n.createElement(i,Object.assign({},l,{ref:o,"data-reach-combobox-list":"",role:"listbox"}))})),O=t.forwardRef((function(e,o){var a=e.children,r=e.value,u=e.onClick,i=p(e,["children","value","onClick"]),c=t.useContext(h),s=c.onSelect,v=c.data.navigationValue,E=c.transition,f=t.useRef(null),d=l.useForkedRef(o,f),C=l.useDescendant({context:G,element:f.current,value:r}),T=v===r;return n.createElement(S.Provider,{value:{value:r,index:C}},n.createElement("li",Object.assign({},i,{"data-reach-combobox-option":"",ref:d,id:String(U(r)),role:"option","aria-selected":T,"data-highlighted":T?"":void 0,tabIndex:-1,onClick:l.wrapEvent(u,(function(){E("SELECT_WITH_CLICK",{value:r,callback:s})})),children:a||n.createElement(_,null)})))}));function _(){var e=t.useContext(S).value,o=t.useContext(h).data.value,a=t.useMemo((function(){return c.findAll({searchWords:s(o||"").split(/\s+/),textToHighlight:e})}),[o,e]);return n.createElement(n.Fragment,null,a.length?a.map((function(t,o){var a=e.slice(t.start,t.end);return n.createElement("span",{key:o,"data-user-value":!!t.highlight||void 0,"data-suggested-value":!t.highlight||void 0},a)})):e)}var L=l.forwardRefWithAs((function(e,o){var a=e.as,r=void 0===a?"button":a,u=e.onClick,i=e.onKeyDown,c=p(e,["as","onClick","onKeyDown"]),s=t.useContext(h),v=s.transition,E=s.state,f=s.listboxId,d=s.isVisible,T=l.useForkedRef(s.buttonRef,o),I=V();return n.createElement(r,Object.assign({"data-reach-combobox-button":"","aria-controls":f,"aria-haspopup":"listbox","aria-expanded":d,ref:T,onClick:l.wrapEvent(u,(function(){v(E===C?"OPEN_WITH_BUTTON":"CLOSE_WITH_BUTTON")})),onKeyDown:l.wrapEvent(i,I)},c))}));function V(){var e=t.useContext(h),n=e.data.navigationValue,o=e.onSelect,a=e.state,r=e.transition,u=e.autocompletePropRef,i=e.persistSelectionRef,l=t.useContext(G).descendants;return function(e){switch(e.key){case"ArrowDown":if(e.preventDefault(),!l||0===l.length)return;if(a===C)r("NAVIGATE",{persistSelection:i.current});else{var t=l.findIndex((function(e){return e.value===n}));r("NAVIGATE",t===l.length-1?u.current?{value:null}:{value:l[0].value}:{value:l[(t+1)%l.length].value})}break;case"ArrowUp":if(e.preventDefault(),!l||0===l.length)return;if(a===C)r("NAVIGATE");else{var c=l.findIndex((function(e){return e.value===n}));r("NAVIGATE",0===c?u.current?{value:null}:{value:l[l.length-1].value}:-1===c?{value:l.length?l[l.length-1].value:null}:{value:l[(c-1+l.length)%l.length].value})}break;case"Escape":a!==C&&r("ESCAPE");break;case"Enter":"NAVIGATING"===a&&null!==n&&(e.preventDefault(),r("SELECT_WITH_KEYBOARD",{callback:o}))}}}function w(){var e=t.useContext(h),n=e.state,o=e.transition,a=e.popoverRef,r=e.inputRef,u=e.buttonRef;return function(){requestAnimationFrame((function(){document.activeElement!==r.current&&document.activeElement!==u.current&&a.current&&(a.current.contains(document.activeElement)?"INTERACTING"!==n&&o("INTERACT"):o("BLUR"))}))}}var U=function(e){var t=0;if(0===e.length)return t;for(var n=0;n<e.length;n++)t=(t<<5)-t+e.charCodeAt(n),t&=t;return t};exports.Combobox=x,exports.ComboboxButton=L,exports.ComboboxInput=R,exports.ComboboxList=m,exports.ComboboxOption=O,exports.ComboboxOptionText=_,exports.ComboboxPopover=g;
 //# sourceMappingURL=combobox.cjs.production.min.js.map

dist/combobox.esm.js

 import React, { useRef, useEffect, useContext, forwardRef, useMemo, useState, useReducer } from 'react';
 import PropTypes from 'prop-types';
-import { forwardRefWithAs, useDescendants, makeId, checkStyles, DescendantProvider, useForkedRef, useIsomorphicLayoutEffect, wrapEvent, useDescendant, createDescendantContext, createNamedContext } from '@reach/utils';
+import { forwardRefWithAs, useDescendants, makeId, checkStyles, DescendantProvider, useForkedRef, useIsomorphicLayoutEffect, wrapEvent, useDescendant, createDescendantContext, createNamedContext, noop } from '@reach/utils';
 import { findAll } from 'highlight-words-core';
@@ -82,3 +82,3 @@ import escapeRegexp from 'escape-regexp';
   }, _states[NAVIGATING] = {
-    on: (_on3 = {}, _on3[CHANGE] = SUGGESTING, _on3[FOCUS] = SUGGESTING, _on3[CLEAR] = IDLE, _on3[BLUR] = IDLE, _on3[ESCAPE] = IDLE, _on3[NAVIGATE] = NAVIGATING, _on3[SELECT_WITH_KEYBOARD] = IDLE, _on3[CLOSE_WITH_BUTTON] = IDLE, _on3[INTERACT] = INTERACTING, _on3)
+    on: (_on3 = {}, _on3[CHANGE] = SUGGESTING, _on3[FOCUS] = SUGGESTING, _on3[CLEAR] = IDLE, _on3[BLUR] = IDLE, _on3[ESCAPE] = IDLE, _on3[NAVIGATE] = NAVIGATING, _on3[SELECT_WITH_CLICK] = IDLE, _on3[SELECT_WITH_KEYBOARD] = IDLE, _on3[CLOSE_WITH_BUTTON] = IDLE, _on3[INTERACT] = INTERACTING, _on3)
   }, _states[INTERACTING] = {
@@ -120,2 +120,3 @@ on: (_on4 = {}, _on4[CHANGE] = SUGGESTING, _on4[FOCUS] = SUGGESTING, _on4[BLUR] = IDLE, _on4[ESCAPE] = IDLE, _on4[NAVIGATE] = NAVIGATING, _on4[CLOSE_WITH_BUTTON] = IDLE, _on4[SELECT_WITH_CLICK] = IDLE, _on4)
     case SELECT_WITH_CLICK:
+      event.callback(event.value);
       return _extends({}, nextState, {
@@ -127,2 +128,3 @@ value: event.value,
     case SELECT_WITH_KEYBOARD:
+      event.callback(data.navigationValue || null);
       return _extends({}, nextState, {
@@ -251,3 +253,3 @@ value: data.navigationValue,
     listboxId: listboxId,
-    onSelect: onSelect,
+    onSelect: onSelect || noop,
     openOnFocus: openOnFocus,
@@ -277,5 +279,5 @@ persistSelectionRef: persistSelectionRef,
 });
-Combobox.displayName = "Combobox";
 
 if (process.env.NODE_ENV !== "production") {
+  Combobox.displayName = "Combobox";
   Combobox.propTypes = {
@@ -419,4 +421,7 @@ as: PropTypes.elementType,
 });
-ComboboxInput.displayName = "ComboboxInput"; ////////////////////////////////////////////////////////////////////////////////
 
+if (process.env.NODE_ENV !== "production") {
+  ComboboxInput.displayName = "ComboboxInput";
+} ////////////////////////////////////////////////////////////////////////////////
+
 /**
@@ -432,2 +437,3 @@ * ComboboxPopover
 
+
 var ComboboxPopover =
@@ -476,4 +482,7 @@ /*#__PURE__*/
 });
-ComboboxPopover.displayName = "ComboboxPopover"; ////////////////////////////////////////////////////////////////////////////////
 
+if (process.env.NODE_ENV !== "production") {
+  ComboboxPopover.displayName = "ComboboxPopover";
+} ////////////////////////////////////////////////////////////////////////////////
+
 /**
@@ -488,2 +497,3 @@ * ComboboxList
 
+
 var ComboboxList =
@@ -511,4 +521,7 @@ /*#__PURE__*/
 });
-ComboboxList.displayName = "ComboboxList"; ////////////////////////////////////////////////////////////////////////////////
 
+if (process.env.NODE_ENV !== "production") {
+  ComboboxList.displayName = "ComboboxList";
+} ////////////////////////////////////////////////////////////////////////////////
+
 /**
@@ -522,2 +535,3 @@ * ComboboxOption
 
+
 var ComboboxOption =
@@ -546,5 +560,5 @@ /*#__PURE__*/
   var handleClick = function handleClick() {
-    onSelect && onSelect(value);
     transition(SELECT_WITH_CLICK, {
-      value: value
+      value: value,
+      callback: onSelect
     });
@@ -577,4 +591,7 @@ };
 });
-ComboboxOption.displayName = "ComboboxOption"; ////////////////////////////////////////////////////////////////////////////////
 
+if (process.env.NODE_ENV !== "production") {
+  ComboboxOption.displayName = "ComboboxOption";
+} ////////////////////////////////////////////////////////////////////////////////
+
 /**
@@ -597,2 +614,3 @@ * ComboboxOptionText
 
+
 function ComboboxOptionText() {
@@ -620,4 +638,7 @@ var _useContext5 = useContext(OptionContext),
 }
-ComboboxOptionText.displayName = "ComboboxOptionText"; ////////////////////////////////////////////////////////////////////////////////
 
+if (process.env.NODE_ENV !== "production") {
+  ComboboxOptionText.displayName = "ComboboxOptionText";
+} ////////////////////////////////////////////////////////////////////////////////
+
 /**
@@ -627,2 +648,3 @@ * ComboboxButton
 
+
 var ComboboxButton =
@@ -665,4 +687,7 @@ /*#__PURE__*/
 });
-ComboboxButton.displayName = "ComboboxButton"; ////////////////////////////////////////////////////////////////////////////////
 
+if (process.env.NODE_ENV !== "production") {
+  ComboboxButton.displayName = "ComboboxButton";
+} ////////////////////////////////////////////////////////////////////////////////
+
 /**
@@ -677,2 +702,3 @@ * Move focus back to the input if we start navigating w/ the
 
+
 function useFocusManagement(lastEventType, inputRef) {
@@ -838,4 +864,5 @@ /*
             event.preventDefault();
-            onSelect && onSelect(navigationValue);
-            transition(SELECT_WITH_KEYBOARD);
+            transition(SELECT_WITH_KEYBOARD, {
+              callback: onSelect
+            });
           }
@@ -901,12 +928,15 @@
 
-    if (!nextState) {
+    if (nextState) {
+      dispatch(_extends({
+        type: event,
+        state: state,
+        nextState: state
+      }, payload));
+      setState(nextState);
+      return;
+    }
+
+    if (process.env.NODE_ENV !== "production") {
       throw new Error("Unknown event \"" + event + "\" for state \"" + state + "\"");
     }
-
-    dispatch(_extends({
-      type: event,
-      state: state,
-      nextState: state
-    }, payload));
-    setState(nextState);
   };
@@ -913,0 +943,0 @@

package.json

 {
   "name": "@reach/combobox",
-  "version": "0.7.4",
+  "version": "0.8.0",
   "description": "Accessible React Combobox (Autocomplete).",
@@ -18,6 +18,6 @@ "author": "React Training <[e-mail]>",
   "dependencies": {
-    "@reach/auto-id": "^0.7.4",
-    "@reach/popover": "^0.7.4",
-    "@reach/portal": "^0.7.4",
-    "@reach/utils": "^0.7.4",
+    "@reach/auto-id": "^0.8.0",
+    "@reach/popover": "^0.8.0",
+    "@reach/portal": "^0.8.0",
+    "@reach/utils": "^0.8.0",
     "escape-regexp": "0.0.1",
@@ -39,3 +39,3 @@ "highlight-words-core": "1.2.2",
   ],
-  "gitHead": "f460709e283a60dd5ea62952b7feaf88546a50ff"
+  "gitHead": "7702c46373c7f11adc21184e7def9977203e9326"
 }

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

Worsened metrics

Total package byte prevSize

226918

decreased by-2.48%

Lines of code

1725

decreased by-9.07%

Number of low supply chain risk alerts

9

increased by350%

Dependency changes

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

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

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

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

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

• + Addedtslib@1.14.1(transitive)

• + Addedwarning@4.0.3(transitive)

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

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

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

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

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

• Updated@reach/auto-id@^0.8.0

• Updated@reach/popover@^0.8.0

• Updated@reach/portal@^0.8.0

• Updated@reach/utils@^0.8.0