@reach/combobox - npm Package Compare versions

Comparing version 0.10.3 to 0.10.4

dist/combobox.cjs.development.js

@@ -101,3 +101,3 @@ 'use strict';
 var reducer = function reducer(data, event) {
-  var nextState = _extends(_extends({}, data), {}, {
+  var nextState = _extends({}, data, {
     lastEventType: event.type
@@ -109,3 +109,3 @@ });
     case INITIAL_CHANGE:
-      return _extends(_extends({}, nextState), {}, {
+      return _extends({}, nextState, {
         navigationValue: null,
@@ -117,3 +117,3 @@ value: event.value
     case OPEN_WITH_BUTTON:
-      return _extends(_extends({}, nextState), {}, {
+      return _extends({}, nextState, {
         navigationValue: findNavigationValue(nextState, event)
@@ -123,3 +123,3 @@ });
     case CLEAR:
-      return _extends(_extends({}, nextState), {}, {
+      return _extends({}, nextState, {
         value: "",
@@ -131,3 +131,3 @@ navigationValue: null
     case ESCAPE:
-      return _extends(_extends({}, nextState), {}, {
+      return _extends({}, nextState, {
         navigationValue: null
@@ -137,3 +137,3 @@ });
     case SELECT_WITH_CLICK:
-      return _extends(_extends({}, nextState), {}, {
+      return _extends({}, nextState, {
         value: event.value,
@@ -144,3 +144,3 @@ navigationValue: null
     case SELECT_WITH_KEYBOARD:
-      return _extends(_extends({}, nextState), {}, {
+      return _extends({}, nextState, {
         value: data.navigationValue,
@@ -151,3 +151,3 @@ navigationValue: null
     case CLOSE_WITH_BUTTON:
-      return _extends(_extends({}, nextState), {}, {
+      return _extends({}, nextState, {
         navigationValue: null
@@ -160,3 +160,3 @@ });
     case FOCUS:
-      return _extends(_extends({}, nextState), {}, {
+      return _extends({}, nextState, {
         navigationValue: findNavigationValue(nextState, event)
@@ -452,3 +452,5 @@ });
       onBlur = _ref3.onBlur,
-      props = _objectWithoutPropertiesLoose(_ref3, ["children", "portal", "onKeyDown", "onBlur"]);
+      _ref3$position = _ref3.position,
+      position = _ref3$position === void 0 ? Popover.positionMatchWidth : _ref3$position,
+      props = _objectWithoutPropertiesLoose(_ref3, ["children", "portal", "onKeyDown", "onBlur", "position"]);
 
@@ -477,5 +479,4 @@ var _useContext2 = React.useContext(ComboboxContext),
   return portal ? React__default.createElement(Popover__default, Object.assign({}, props, {
-    // @ts-ignore
     ref: ref,
-    position: Popover.positionMatchWidth,
+    position: position,
     targetRef: inputRef
@@ -482,0 +483,0 @@ }, sharedProps)) : React__default.createElement("div", Object.assign({

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

dist/combobox.esm.js

@@ -93,3 +93,3 @@ import React, { useRef, useEffect, useContext, useCallback, forwardRef, useMemo, useState, useReducer } from 'react';
 var reducer = function reducer(data, event) {
-  var nextState = _extends(_extends({}, data), {}, {
+  var nextState = _extends({}, data, {
     lastEventType: event.type
@@ -101,3 +101,3 @@ });
     case INITIAL_CHANGE:
-      return _extends(_extends({}, nextState), {}, {
+      return _extends({}, nextState, {
         navigationValue: null,
@@ -109,3 +109,3 @@ value: event.value
     case OPEN_WITH_BUTTON:
-      return _extends(_extends({}, nextState), {}, {
+      return _extends({}, nextState, {
         navigationValue: findNavigationValue(nextState, event)
@@ -115,3 +115,3 @@ });
     case CLEAR:
-      return _extends(_extends({}, nextState), {}, {
+      return _extends({}, nextState, {
         value: "",
@@ -123,3 +123,3 @@ navigationValue: null
     case ESCAPE:
-      return _extends(_extends({}, nextState), {}, {
+      return _extends({}, nextState, {
         navigationValue: null
@@ -129,3 +129,3 @@ });
     case SELECT_WITH_CLICK:
-      return _extends(_extends({}, nextState), {}, {
+      return _extends({}, nextState, {
         value: event.value,
@@ -136,3 +136,3 @@ navigationValue: null
     case SELECT_WITH_KEYBOARD:
-      return _extends(_extends({}, nextState), {}, {
+      return _extends({}, nextState, {
         value: data.navigationValue,
@@ -143,3 +143,3 @@ navigationValue: null
     case CLOSE_WITH_BUTTON:
-      return _extends(_extends({}, nextState), {}, {
+      return _extends({}, nextState, {
         navigationValue: null
@@ -152,3 +152,3 @@ });
     case FOCUS:
-      return _extends(_extends({}, nextState), {}, {
+      return _extends({}, nextState, {
         navigationValue: findNavigationValue(nextState, event)
@@ -444,3 +444,5 @@ });
       onBlur = _ref3.onBlur,
-      props = _objectWithoutPropertiesLoose(_ref3, ["children", "portal", "onKeyDown", "onBlur"]);
+      _ref3$position = _ref3.position,
+      position = _ref3$position === void 0 ? positionMatchWidth : _ref3$position,
+      props = _objectWithoutPropertiesLoose(_ref3, ["children", "portal", "onKeyDown", "onBlur", "position"]);
 
@@ -469,5 +471,4 @@ var _useContext2 = useContext(ComboboxContext),
   return portal ? React.createElement(Popover, Object.assign({}, props, {
-    // @ts-ignore
     ref: ref,
-    position: positionMatchWidth,
+    position: position,
     targetRef: inputRef
@@ -474,0 +475,0 @@ }, sharedProps)) : React.createElement("div", Object.assign({

dist/index.d.ts

@@ -17,3 +17,3 @@ /**
  * @see Docs     https://reacttraining.com/reach-ui/combobox
- * @see Source   https://github.com/reach/reach-ui/tree/master/packages/combobox
+ * @see Source   https://github.com/reach/reach-ui/tree/main/packages/combobox
  * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2/#combobox
@@ -20,0 +20,0 @@ */

package.json

 {
   "name": "@reach/combobox",
-  "version": "0.10.3",
+  "version": "0.10.4",
   "description": "Accessible React Combobox (Autocomplete).",
@@ -16,10 +16,10 @@ "author": "React Training <[e-mail]>",
   "dependencies": {
-    "@reach/auto-id": "^0.10.3",
-    "@reach/descendants": "^0.10.3",
-    "@reach/popover": "^0.10.3",
-    "@reach/portal": "^0.10.3",
-    "@reach/utils": "^0.10.3",
+    "@reach/auto-id": "0.10.4",
+    "@reach/descendants": "0.10.4",
+    "@reach/popover": "0.10.4",
+    "@reach/portal": "0.10.4",
+    "@reach/utils": "0.10.4",
     "highlight-words-core": "1.2.2",
     "prop-types": "^15.7.2",
-    "tslib": "^1.11.2"
+    "tslib": "^2.0.0"
   },
@@ -38,3 +38,3 @@ "peerDependencies": {
   ],
-  "gitHead": "fd32b2b31a3e50265b0c274654a5e4105847d18e"
+  "gitHead": "a0c7b3672835b2a9f84732663bb0e78992541211"
 }

README.md

@@ -5,3 +5,3 @@ # @reach/combobox
 
-[Docs](https://reacttraining.com/reach-ui/combobox) | [Source](https://github.com/reach/reach-ui/tree/master/packages/combobox) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#combobox)
+[Docs](https://reacttraining.com/reach-ui/combobox) | [Source](https://github.com/reach/reach-ui/tree/main/packages/combobox) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#combobox)
 
@@ -8,0 +8,0 @@ Accessible combobox (autocomplete or autosuggest) component for React.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

253182

increased by0.03%

Lines of code

1990

increased by0.1%

Dependency changes

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

• + Added@reach/descendants@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/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)

• - Removedtslib@1.14.1(transitive)

• Updated@reach/auto-id@0.10.4

• Updated@reach/descendants@0.10.4

• Updated@reach/popover@0.10.4

• Updated@reach/portal@0.10.4

• Updated@reach/utils@0.10.4

• Updatedtslib@^2.0.0