@reach/combobox - npm Package Compare versions

Comparing version 0.18.0-pre.3 to 0.18.0-pre.4

CHANGELOG.md

 # @reach/combobox
 
+## 0.18.0-pre.4
+
+### Minor Changes
+
+- We no longer check that our internal styles are included by looking for a defined CSS custom property. You can still include our base styles as before, but this removes the need to define `--reach-<pkg>` in your own stylesheets to silence dev warnings. ([`69df3a03`](https://github.com/reach/reach-ui/commit/69df3a038d12c0e731778c9ac6e18ba6f81fbb49))
+
+### Patch Changes
+
+- Updated dependencies:
+  - `@reach/utils@0.18.0-pre.4`
+  - `@reach/polymorphic@0.18.0-pre.4`
+  - `@reach/popover@0.18.0-pre.4`
+  - `@reach/auto-id@0.18.0-pre.4`
+  - `@reach/descendants@0.18.0-pre.4`
+  - `@reach/portal@0.18.0-pre.4`
+
 ## 0.18.0-pre.3
@@ -4,0 +20,0 @@

dist/reach-combobox.cjs.dev.js

 "use strict";
 /**
-  * @reach/combobox v0.18.0-pre.3
+  * @reach/combobox v0.18.0-pre.4
   *
@@ -384,3 +384,2 @@ * Copyright (c) 2018-2022, React Training LLC
   };
-  (0, import_utils.useCheckStyles)("combobox");
   return /* @__PURE__ */ React.createElement(import_descendants.DescendantProvider, {
@@ -387,0 +386,0 @@ context: ComboboxDescendantContext,

dist/reach-combobox.cjs.prod.js

@@ -1,1 +0,1 @@
-"use strict";var Be=Object.create;var F=Object.defineProperty,Ge=Object.defineProperties,Ue=Object.getOwnPropertyDescriptor,We=Object.getOwnPropertyDescriptors,Fe=Object.getOwnPropertyNames,J=Object.getOwnPropertySymbols,Ke=Object.getPrototypeOf,ne=Object.prototype.hasOwnProperty,fe=Object.prototype.propertyIsEnumerable;var pe=(e,t,o)=>t in e?F(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,b=(e,t)=>{for(var o in t||(t={}))ne.call(t,o)&&pe(e,o,t[o]);if(J)for(var o of J(t))fe.call(t,o)&&pe(e,o,t[o]);return e},m=(e,t)=>Ge(e,We(t));var D=(e,t)=>{var o={};for(var n in e)ne.call(e,n)&&t.indexOf(n)<0&&(o[n]=e[n]);if(e!=null&&J)for(var n of J(e))t.indexOf(n)<0&&fe.call(e,n)&&(o[n]=e[n]);return o};var je=(e,t)=>{for(var o in t)F(e,o,{get:t[o],enumerable:!0})},be=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of Fe(t))!ne.call(e,l)&&l!==o&&F(e,l,{get:()=>t[l],enumerable:!(n=Ue(t,l))||n.enumerable});return e};var ze=(e,t,o)=>(o=e!=null?Be(Ke(e)):{},be(t||!e||!e.__esModule?F(o,"default",{value:e,enumerable:!0}):o,e)),Ye=e=>be(F({},"__esModule",{value:!0}),e);var at={};je(at,{Combobox:()=>Ie,ComboboxButton:()=>ye,ComboboxInput:()=>ge,ComboboxList:()=>Te,ComboboxOption:()=>Se,ComboboxOptionText:()=>ue,ComboboxPopover:()=>ve,escapeRegexp:()=>Pe,unstable_useKeyDown:()=>ee,useComboboxContext:()=>ot,useComboboxOptionContext:()=>nt});module.exports=Ye(at);var a=ze(require("react")),s=require("@reach/utils"),L=require("@reach/descendants");function $e({autoEscape:e,caseSensitive:t=!1,findChunks:o=xe,sanitize:n,searchWords:l,textToHighlight:i}){return me({chunksToHighlight:Ce({chunks:o({autoEscape:e,caseSensitive:t,sanitize:n,searchWords:l,textToHighlight:i})}),totalLength:i?i.length:0})}function Ce({chunks:e}){return e.sort((t,o)=>t.start-o.start).reduce((t,o)=>{if(t.length===0)return[o];{let n=t.pop();if(o.start<=n.end){let l=Math.max(n.end,o.end);t.push({highlight:!1,start:n.start,end:l})}else t.push(n,o);return t}},[])}function xe({autoEscape:e,caseSensitive:t,sanitize:o=qe,searchWords:n,textToHighlight:l}){return l=o(l||""),n.filter(i=>i).reduce((i,u)=>{u=o(u),e&&(u=Je(u));let r=new RegExp(u,t?"g":"gi"),d;for(;d=r.exec(l||"");){let p=d.index,f=r.lastIndex;f>p&&i.push({highlight:!1,start:p,end:f}),d.index===r.lastIndex&&r.lastIndex++}return i},[])}function me({chunksToHighlight:e,totalLength:t}){let o=[];if(e.length===0)n(0,t,!1);else{let l=0;e.forEach(i=>{n(l,i.start,!1),n(i.start,i.end,!0),l=i.end}),n(l,t,!1)}return o;function n(l,i,u){i-l>0&&o.push({start:l,end:i,highlight:u})}}function qe(e){return e}function Je(e){return e.replace(/[-[\]/{}()*+?.\\^$|]/g,"\\$&")}var Re={combineChunks:Ce,fillInChunks:me,findAll:$e,findChunks:xe};var Ee=require("@reach/auto-id"),X=require("@reach/popover"),c="IDLE",T="SUGGESTING",A="NAVIGATING",G="INTERACTING",V="CLEAR",k="CHANGE",ae="INITIAL_CHANGE",I="NAVIGATE",le="SELECT_WITH_KEYBOARD",w="SELECT_WITH_CLICK",U="ESCAPE",M="BLUR",Q="INTERACT",B="FOCUS",Z="OPEN_WITH_BUTTON",re="OPEN_WITH_INPUT_CLICK",K="CLOSE_WITH_BUTTON",Qe={initial:c,states:{[c]:{on:{[M]:c,[V]:c,[k]:T,[ae]:c,[B]:T,[I]:A,[Z]:T,[re]:T}},[T]:{on:{[k]:T,[B]:T,[I]:A,[V]:c,[U]:c,[M]:c,[w]:c,[Q]:G,[K]:c}},[A]:{on:{[k]:T,[B]:T,[V]:c,[M]:c,[U]:c,[I]:A,[w]:c,[le]:c,[K]:c,[Q]:G}},[G]:{on:{[V]:c,[k]:T,[B]:T,[M]:c,[U]:c,[I]:A,[K]:c,[w]:c}}}},Xe=(e,t)=>{let o=m(b({},e),{lastEventType:t.type});switch(t.type){case k:case ae:return m(b({},o),{navigationValue:null,value:t.value});case I:case Z:case re:return m(b({},o),{navigationValue:he(o,t)});case V:return m(b({},o),{value:"",navigationValue:null});case M:case U:return m(b({},o),{navigationValue:null});case w:return m(b({},o),{value:t.isControlled?e.value:t.value,navigationValue:null});case le:return m(b({},o),{value:t.isControlled?e.value:e.navigationValue,navigationValue:null});case K:return m(b({},o),{navigationValue:null});case Q:return o;case B:return m(b({},o),{navigationValue:he(o,t)});default:return o}};function Ze(e){return[T,A,G].includes(e)}function he(e,t){return t.value?t.value:t.persistSelection?e.value:null}var ie=(0,L.createDescendantContext)("ComboboxDescendantContext"),P=(0,s.createNamedContext)("ComboboxContext",{}),se=(0,s.createNamedContext)("OptionContext",{}),Ie=a.forwardRef((d,r)=>{var p=d,{onSelect:e,openOnFocus:t=!1,children:o,as:n="div","aria-label":l,"aria-labelledby":i}=p,u=D(p,["onSelect","openOnFocus","children","as","aria-label","aria-labelledby"]);var $;let[f,g]=(0,L.useDescendantsInit)(),h=a.useRef(),E=a.useRef(),x=a.useRef(),C=a.useRef(!1),S=a.useRef(!1),O={value:"",navigationValue:null},[y,N,v]=tt(Qe,Xe,O);et(N.lastEventType,h);let H=(0,Ee.useId)(u.id),j=H?(0,s.makeId)("listbox",H):"listbox",z=a.useRef(!1),W=Ze(y),Y={ariaLabel:l,ariaLabelledby:i,autocompletePropRef:C,buttonRef:x,comboboxId:H,data:N,inputRef:h,isExpanded:W,listboxId:j,onSelect:e||s.noop,openOnFocus:t,persistSelectionRef:S,popoverRef:E,state:y,transition:v,isControlledRef:z};return(0,s.useCheckStyles)("combobox"),a.createElement(L.DescendantProvider,{context:ie,items:f,set:g},a.createElement(P.Provider,{value:Y},a.createElement(n,m(b({},u),{"data-reach-combobox":"","data-state":ce(y),"data-expanded":W||void 0,ref:r}),(0,s.isFunction)(o)?o({id:H,isExpanded:W,navigationValue:($=N.navigationValue)!=null?$:null,state:y}):o)))});Ie.displayName="Combobox";var ge=a.forwardRef((g,f)=>{var h=g,{as:e="input",selectOnClick:t=!1,autocomplete:o=!0,onClick:n,onChange:l,onKeyDown:i,onBlur:u,onFocus:r,value:d}=h,p=D(h,["as","selectOnClick","autocomplete","onClick","onChange","onKeyDown","onBlur","onFocus","value"]);let{current:E}=a.useRef(d),x=a.useRef(!1);(0,s.useUpdateEffect)(()=>{x.current=!0},[d]);let{data:{navigationValue:C,value:S,lastEventType:O},inputRef:y,state:N,transition:v,listboxId:H,autocompletePropRef:j,openOnFocus:z,isExpanded:W,ariaLabel:Y,ariaLabelledby:$,persistSelectionRef:Oe,isControlledRef:_e}=a.useContext(P),Ae=(0,s.useComposedRefs)(y,f),te=a.useRef(!1),De=ee(),Ve=Ne(),_=typeof d!="undefined",lt=typeof E!="undefined";a.useEffect(()=>{_e.current=_},[_]),(0,s.useIsomorphicLayoutEffect)(()=>{j.current=o},[o,j]);let oe=a.useCallback(R=>{R.trim()===""?v(V,{isControlled:_}):R===E&&!x.current?v(ae,{value:R}):v(k,{value:R})},[E,v,_]);a.useEffect(()=>{_&&d!==S&&(d.trim()===""?(S||"").trim()!=="":!0)&&oe(d)},[d,oe,_,S]),a.useEffect(()=>{var de;let R=(de=y.current)==null?void 0:de.form;if(!R)return;function q(rt){v(V,{isControlled:_})}return R.addEventListener("reset",q),()=>{R==null||R.removeEventListener("reset",q)}},[y,_,v]);function we(R){let{value:q}=R.target;_||oe(q)}function He(){t&&(te.current=!0),z&&O!==w&&v(B,{persistSelection:Oe.current})}function ke(){var R;te.current&&(te.current=!1,(R=y.current)==null||R.select()),z&&N===c&&v(re)}let Me=o&&(N===A||N===G)?C||d||S:d||S;return a.createElement(e,m(b({"aria-activedescendant":C?String(Le(C)):void 0,"aria-autocomplete":"both","aria-controls":H,"aria-expanded":W,"aria-haspopup":"listbox","aria-label":Y,"aria-labelledby":Y?void 0:$,role:"combobox"},p),{"data-reach-combobox-input":"","data-state":ce(N),ref:Ae,onBlur:(0,s.composeEventHandlers)(u,Ve),onChange:(0,s.composeEventHandlers)(l,we),onClick:(0,s.composeEventHandlers)(n,ke),onFocus:(0,s.composeEventHandlers)(r,He),onKeyDown:(0,s.composeEventHandlers)(i,De),value:Me||""}))});ge.displayName="ComboboxInput";var ve=a.forwardRef((d,r)=>{var p=d,{as:e="div",children:t,portal:o=!0,onKeyDown:n,onBlur:l,position:i=X.positionMatchWidth}=p,u=D(p,["as","children","portal","onKeyDown","onBlur","position"]);let{popoverRef:f,inputRef:g,isExpanded:h,state:E}=a.useContext(P),x=(0,s.useComposedRefs)(f,r),C=ee(),S=Ne(),O={"data-reach-combobox-popover":"","data-state":ce(E),onKeyDown:(0,s.composeEventHandlers)(n,C),onBlur:(0,s.composeEventHandlers)(l,S),hidden:!h,tabIndex:-1,children:t};return o?a.createElement(X.Popover,b(m(b({as:e},u),{ref:x,"data-expanded":h||void 0,position:i,targetRef:g,unstable_skipInitialPortalRender:!0}),O)):a.createElement(e,b(b({ref:x},u),O))});ve.displayName="ComboboxPopover";var Te=a.forwardRef((l,n)=>{var i=l,{persistSelection:e=!1,as:t="ul"}=i,o=D(i,["persistSelection","as"]);let{persistSelectionRef:u,listboxId:r}=a.useContext(P);return e&&(u.current=!0),a.createElement(t,m(b({role:"listbox"},o),{ref:n,"data-reach-combobox-list":"",id:r}))});Te.displayName="ComboboxList";var Se=a.forwardRef((r,u)=>{var d=r,{as:e="li",children:t,index:o,value:n,onClick:l}=d,i=D(d,["as","children","index","value","onClick"]);let{onSelect:p,data:{navigationValue:f},transition:g,isControlledRef:h}=a.useContext(P),E=a.useRef(null),[x,C]=(0,s.useStatefulRefValue)(E,null),S=a.useMemo(()=>({element:x,value:n}),[n,x]),O=(0,L.useDescendant)(S,ie,o),y=(0,s.useComposedRefs)(u,C),N=f===n,v=()=>{p&&p(n),g(w,{value:n,isControlled:h.current})};return a.createElement(se.Provider,{value:{value:n,index:O}},a.createElement(e,m(b({"aria-selected":N,role:"option"},i),{"data-reach-combobox-option":"",ref:y,id:String(Le(n)),"data-highlighted":N?"":void 0,tabIndex:-1,onClick:(0,s.composeEventHandlers)(l,v)}),t?(0,s.isFunction)(t)?t({value:n,index:O}):t:a.createElement(ue,null)))});Se.displayName="ComboboxOption";function ue(){let{value:e}=a.useContext(se),{data:{value:t}}=a.useContext(P),o=a.useMemo(()=>Re.findAll({searchWords:Pe(t||"").split(/\s+/),textToHighlight:e}),[t,e]);return a.createElement(a.Fragment,null,o.length?o.map((n,l)=>{let i=e.slice(n.start,n.end);return a.createElement("span",{key:l,"data-reach-combobox-option-text":"","data-user-value":n.highlight?!0:void 0,"data-suggested-value":n.highlight?void 0:!0},i)}):e)}ue.displayName="ComboboxOptionText";var ye=a.forwardRef((i,l)=>{var u=i,{as:e="button",onClick:t,onKeyDown:o}=u,n=D(u,["as","onClick","onKeyDown"]);let{transition:r,state:d,buttonRef:p,listboxId:f,isExpanded:g}=a.useContext(P),h=(0,s.useComposedRefs)(p,l),E=ee(),x=()=>{r(d===c?Z:K)};return a.createElement(e,m(b({"aria-controls":f,"aria-haspopup":"listbox","aria-expanded":g},n),{"data-reach-combobox-button":"",ref:h,onClick:(0,s.composeEventHandlers)(t,x),onKeyDown:(0,s.composeEventHandlers)(o,E)}))});ye.displayName="ComboboxButton";function et(e,t){(0,s.useIsomorphicLayoutEffect)(()=>{var o;(e===I||e===U||e===w||e===Z)&&((o=t.current)==null||o.focus())},[t,e])}function ee(){let{data:{navigationValue:e},onSelect:t,state:o,transition:n,autocompletePropRef:l,persistSelectionRef:i,isControlledRef:u}=a.useContext(P),r=(0,L.useDescendants)(ie);return function(p){let f=r.findIndex(({value:C})=>C===e);function g(){return f===r.length-1?l.current?null:E():r[(f+1)%r.length]}function h(){return f===0?l.current?null:x():f===-1?x():r[(f-1+r.length)%r.length]}function E(){return r[0]}function x(){return r[r.length-1]}switch(p.key){case"ArrowDown":if(p.preventDefault(),!r||!r.length)return;if(o===c)n(I,{persistSelection:i.current});else{let C=g();n(I,{value:C?C.value:null})}break;case"ArrowUp":if(p.preventDefault(),!r||r.length===0)return;if(o===c)n(I,{persistSelection:i.current});else{let C=h();n(I,{value:C?C.value:null})}break;case"Home":case"PageUp":if(p.preventDefault(),!r||r.length===0)return;o===c?n(I):n(I,{value:E().value});break;case"End":case"PageDown":if(p.preventDefault(),!r||r.length===0)return;o===c?n(I):n(I,{value:x().value});break;case"Escape":o!==c&&n(U);break;case"Enter":o===A&&e!==null&&(p.preventDefault(),t&&t(e),n(le,{isControlled:u.current}));break}}}function Ne(){let{state:e,transition:t,popoverRef:o,inputRef:n,buttonRef:l}=a.useContext(P);return function(u){let r=o.current,d=n.current,p=l.current,f=u.relatedTarget;f!==d&&f!==p&&r&&(r.contains(f)?e!==G&&t(Q):t(M))}}function tt(e,t,o){let[n,l]=a.useState(e.initial),[i,u]=a.useReducer(t,o);return[n,i,(d,p={})=>{let f=e.states[n],g=f&&f.on[d];if(g){u(b({type:d,state:n,nextState:n},p)),l(g);return}}]}function Le(e){let t=0;if(e.length===0)return t;for(let o=0;o<e.length;o++)t=(t<<5)-t+e.charCodeAt(o),t=t&t;return t}function ce(e){return e.toLowerCase()}function Pe(e){return String(e).replace(/([.*+?=^!:${}()|[\]/\\])/g,"\\$1")}function ot(){let{isExpanded:e,comboboxId:t,data:o,state:n}=a.useContext(P),{navigationValue:l}=o;return a.useMemo(()=>({id:t,isExpanded:e,navigationValue:l!=null?l:null,state:n}),[t,e,l,n])}function nt(){let{value:e,index:t}=a.useContext(se);return a.useMemo(()=>({value:e,index:t}),[e,t])}0&&(module.exports={Combobox,ComboboxButton,ComboboxInput,ComboboxList,ComboboxOption,ComboboxOptionText,ComboboxPopover,escapeRegexp,unstable_useKeyDown,useComboboxContext,useComboboxOptionContext});
+"use strict";var Be=Object.create;var F=Object.defineProperty,Ge=Object.defineProperties,Ue=Object.getOwnPropertyDescriptor,We=Object.getOwnPropertyDescriptors,Fe=Object.getOwnPropertyNames,J=Object.getOwnPropertySymbols,Ke=Object.getPrototypeOf,ne=Object.prototype.hasOwnProperty,fe=Object.prototype.propertyIsEnumerable;var pe=(e,t,o)=>t in e?F(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,b=(e,t)=>{for(var o in t||(t={}))ne.call(t,o)&&pe(e,o,t[o]);if(J)for(var o of J(t))fe.call(t,o)&&pe(e,o,t[o]);return e},m=(e,t)=>Ge(e,We(t));var D=(e,t)=>{var o={};for(var n in e)ne.call(e,n)&&t.indexOf(n)<0&&(o[n]=e[n]);if(e!=null&&J)for(var n of J(e))t.indexOf(n)<0&&fe.call(e,n)&&(o[n]=e[n]);return o};var je=(e,t)=>{for(var o in t)F(e,o,{get:t[o],enumerable:!0})},be=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of Fe(t))!ne.call(e,l)&&l!==o&&F(e,l,{get:()=>t[l],enumerable:!(n=Ue(t,l))||n.enumerable});return e};var ze=(e,t,o)=>(o=e!=null?Be(Ke(e)):{},be(t||!e||!e.__esModule?F(o,"default",{value:e,enumerable:!0}):o,e)),Ye=e=>be(F({},"__esModule",{value:!0}),e);var at={};je(at,{Combobox:()=>Ie,ComboboxButton:()=>Se,ComboboxInput:()=>ge,ComboboxList:()=>Te,ComboboxOption:()=>ye,ComboboxOptionText:()=>ue,ComboboxPopover:()=>ve,escapeRegexp:()=>Pe,unstable_useKeyDown:()=>ee,useComboboxContext:()=>ot,useComboboxOptionContext:()=>nt});module.exports=Ye(at);var a=ze(require("react")),s=require("@reach/utils"),L=require("@reach/descendants");function $e({autoEscape:e,caseSensitive:t=!1,findChunks:o=xe,sanitize:n,searchWords:l,textToHighlight:i}){return me({chunksToHighlight:Ce({chunks:o({autoEscape:e,caseSensitive:t,sanitize:n,searchWords:l,textToHighlight:i})}),totalLength:i?i.length:0})}function Ce({chunks:e}){return e.sort((t,o)=>t.start-o.start).reduce((t,o)=>{if(t.length===0)return[o];{let n=t.pop();if(o.start<=n.end){let l=Math.max(n.end,o.end);t.push({highlight:!1,start:n.start,end:l})}else t.push(n,o);return t}},[])}function xe({autoEscape:e,caseSensitive:t,sanitize:o=qe,searchWords:n,textToHighlight:l}){return l=o(l||""),n.filter(i=>i).reduce((i,u)=>{u=o(u),e&&(u=Je(u));let r=new RegExp(u,t?"g":"gi"),d;for(;d=r.exec(l||"");){let p=d.index,f=r.lastIndex;f>p&&i.push({highlight:!1,start:p,end:f}),d.index===r.lastIndex&&r.lastIndex++}return i},[])}function me({chunksToHighlight:e,totalLength:t}){let o=[];if(e.length===0)n(0,t,!1);else{let l=0;e.forEach(i=>{n(l,i.start,!1),n(i.start,i.end,!0),l=i.end}),n(l,t,!1)}return o;function n(l,i,u){i-l>0&&o.push({start:l,end:i,highlight:u})}}function qe(e){return e}function Je(e){return e.replace(/[-[\]/{}()*+?.\\^$|]/g,"\\$&")}var Re={combineChunks:Ce,fillInChunks:me,findAll:$e,findChunks:xe};var Ee=require("@reach/auto-id"),X=require("@reach/popover"),c="IDLE",T="SUGGESTING",A="NAVIGATING",G="INTERACTING",V="CLEAR",k="CHANGE",ae="INITIAL_CHANGE",I="NAVIGATE",le="SELECT_WITH_KEYBOARD",w="SELECT_WITH_CLICK",U="ESCAPE",M="BLUR",Q="INTERACT",B="FOCUS",Z="OPEN_WITH_BUTTON",re="OPEN_WITH_INPUT_CLICK",K="CLOSE_WITH_BUTTON",Qe={initial:c,states:{[c]:{on:{[M]:c,[V]:c,[k]:T,[ae]:c,[B]:T,[I]:A,[Z]:T,[re]:T}},[T]:{on:{[k]:T,[B]:T,[I]:A,[V]:c,[U]:c,[M]:c,[w]:c,[Q]:G,[K]:c}},[A]:{on:{[k]:T,[B]:T,[V]:c,[M]:c,[U]:c,[I]:A,[w]:c,[le]:c,[K]:c,[Q]:G}},[G]:{on:{[V]:c,[k]:T,[B]:T,[M]:c,[U]:c,[I]:A,[K]:c,[w]:c}}}},Xe=(e,t)=>{let o=m(b({},e),{lastEventType:t.type});switch(t.type){case k:case ae:return m(b({},o),{navigationValue:null,value:t.value});case I:case Z:case re:return m(b({},o),{navigationValue:he(o,t)});case V:return m(b({},o),{value:"",navigationValue:null});case M:case U:return m(b({},o),{navigationValue:null});case w:return m(b({},o),{value:t.isControlled?e.value:t.value,navigationValue:null});case le:return m(b({},o),{value:t.isControlled?e.value:e.navigationValue,navigationValue:null});case K:return m(b({},o),{navigationValue:null});case Q:return o;case B:return m(b({},o),{navigationValue:he(o,t)});default:return o}};function Ze(e){return[T,A,G].includes(e)}function he(e,t){return t.value?t.value:t.persistSelection?e.value:null}var ie=(0,L.createDescendantContext)("ComboboxDescendantContext"),P=(0,s.createNamedContext)("ComboboxContext",{}),se=(0,s.createNamedContext)("OptionContext",{}),Ie=a.forwardRef((d,r)=>{var p=d,{onSelect:e,openOnFocus:t=!1,children:o,as:n="div","aria-label":l,"aria-labelledby":i}=p,u=D(p,["onSelect","openOnFocus","children","as","aria-label","aria-labelledby"]);var $;let[f,g]=(0,L.useDescendantsInit)(),h=a.useRef(),E=a.useRef(),x=a.useRef(),C=a.useRef(!1),y=a.useRef(!1),O={value:"",navigationValue:null},[S,N,v]=tt(Qe,Xe,O);et(N.lastEventType,h);let H=(0,Ee.useId)(u.id),j=H?(0,s.makeId)("listbox",H):"listbox",z=a.useRef(!1),W=Ze(S),Y={ariaLabel:l,ariaLabelledby:i,autocompletePropRef:C,buttonRef:x,comboboxId:H,data:N,inputRef:h,isExpanded:W,listboxId:j,onSelect:e||s.noop,openOnFocus:t,persistSelectionRef:y,popoverRef:E,state:S,transition:v,isControlledRef:z};return a.createElement(L.DescendantProvider,{context:ie,items:f,set:g},a.createElement(P.Provider,{value:Y},a.createElement(n,m(b({},u),{"data-reach-combobox":"","data-state":ce(S),"data-expanded":W||void 0,ref:r}),(0,s.isFunction)(o)?o({id:H,isExpanded:W,navigationValue:($=N.navigationValue)!=null?$:null,state:S}):o)))});Ie.displayName="Combobox";var ge=a.forwardRef((g,f)=>{var h=g,{as:e="input",selectOnClick:t=!1,autocomplete:o=!0,onClick:n,onChange:l,onKeyDown:i,onBlur:u,onFocus:r,value:d}=h,p=D(h,["as","selectOnClick","autocomplete","onClick","onChange","onKeyDown","onBlur","onFocus","value"]);let{current:E}=a.useRef(d),x=a.useRef(!1);(0,s.useUpdateEffect)(()=>{x.current=!0},[d]);let{data:{navigationValue:C,value:y,lastEventType:O},inputRef:S,state:N,transition:v,listboxId:H,autocompletePropRef:j,openOnFocus:z,isExpanded:W,ariaLabel:Y,ariaLabelledby:$,persistSelectionRef:Oe,isControlledRef:_e}=a.useContext(P),Ae=(0,s.useComposedRefs)(S,f),te=a.useRef(!1),De=ee(),Ve=Ne(),_=typeof d!="undefined",lt=typeof E!="undefined";a.useEffect(()=>{_e.current=_},[_]),(0,s.useIsomorphicLayoutEffect)(()=>{j.current=o},[o,j]);let oe=a.useCallback(R=>{R.trim()===""?v(V,{isControlled:_}):R===E&&!x.current?v(ae,{value:R}):v(k,{value:R})},[E,v,_]);a.useEffect(()=>{_&&d!==y&&(d.trim()===""?(y||"").trim()!=="":!0)&&oe(d)},[d,oe,_,y]),a.useEffect(()=>{var de;let R=(de=S.current)==null?void 0:de.form;if(!R)return;function q(rt){v(V,{isControlled:_})}return R.addEventListener("reset",q),()=>{R==null||R.removeEventListener("reset",q)}},[S,_,v]);function we(R){let{value:q}=R.target;_||oe(q)}function He(){t&&(te.current=!0),z&&O!==w&&v(B,{persistSelection:Oe.current})}function ke(){var R;te.current&&(te.current=!1,(R=S.current)==null||R.select()),z&&N===c&&v(re)}let Me=o&&(N===A||N===G)?C||d||y:d||y;return a.createElement(e,m(b({"aria-activedescendant":C?String(Le(C)):void 0,"aria-autocomplete":"both","aria-controls":H,"aria-expanded":W,"aria-haspopup":"listbox","aria-label":Y,"aria-labelledby":Y?void 0:$,role:"combobox"},p),{"data-reach-combobox-input":"","data-state":ce(N),ref:Ae,onBlur:(0,s.composeEventHandlers)(u,Ve),onChange:(0,s.composeEventHandlers)(l,we),onClick:(0,s.composeEventHandlers)(n,ke),onFocus:(0,s.composeEventHandlers)(r,He),onKeyDown:(0,s.composeEventHandlers)(i,De),value:Me||""}))});ge.displayName="ComboboxInput";var ve=a.forwardRef((d,r)=>{var p=d,{as:e="div",children:t,portal:o=!0,onKeyDown:n,onBlur:l,position:i=X.positionMatchWidth}=p,u=D(p,["as","children","portal","onKeyDown","onBlur","position"]);let{popoverRef:f,inputRef:g,isExpanded:h,state:E}=a.useContext(P),x=(0,s.useComposedRefs)(f,r),C=ee(),y=Ne(),O={"data-reach-combobox-popover":"","data-state":ce(E),onKeyDown:(0,s.composeEventHandlers)(n,C),onBlur:(0,s.composeEventHandlers)(l,y),hidden:!h,tabIndex:-1,children:t};return o?a.createElement(X.Popover,b(m(b({as:e},u),{ref:x,"data-expanded":h||void 0,position:i,targetRef:g,unstable_skipInitialPortalRender:!0}),O)):a.createElement(e,b(b({ref:x},u),O))});ve.displayName="ComboboxPopover";var Te=a.forwardRef((l,n)=>{var i=l,{persistSelection:e=!1,as:t="ul"}=i,o=D(i,["persistSelection","as"]);let{persistSelectionRef:u,listboxId:r}=a.useContext(P);return e&&(u.current=!0),a.createElement(t,m(b({role:"listbox"},o),{ref:n,"data-reach-combobox-list":"",id:r}))});Te.displayName="ComboboxList";var ye=a.forwardRef((r,u)=>{var d=r,{as:e="li",children:t,index:o,value:n,onClick:l}=d,i=D(d,["as","children","index","value","onClick"]);let{onSelect:p,data:{navigationValue:f},transition:g,isControlledRef:h}=a.useContext(P),E=a.useRef(null),[x,C]=(0,s.useStatefulRefValue)(E,null),y=a.useMemo(()=>({element:x,value:n}),[n,x]),O=(0,L.useDescendant)(y,ie,o),S=(0,s.useComposedRefs)(u,C),N=f===n,v=()=>{p&&p(n),g(w,{value:n,isControlled:h.current})};return a.createElement(se.Provider,{value:{value:n,index:O}},a.createElement(e,m(b({"aria-selected":N,role:"option"},i),{"data-reach-combobox-option":"",ref:S,id:String(Le(n)),"data-highlighted":N?"":void 0,tabIndex:-1,onClick:(0,s.composeEventHandlers)(l,v)}),t?(0,s.isFunction)(t)?t({value:n,index:O}):t:a.createElement(ue,null)))});ye.displayName="ComboboxOption";function ue(){let{value:e}=a.useContext(se),{data:{value:t}}=a.useContext(P),o=a.useMemo(()=>Re.findAll({searchWords:Pe(t||"").split(/\s+/),textToHighlight:e}),[t,e]);return a.createElement(a.Fragment,null,o.length?o.map((n,l)=>{let i=e.slice(n.start,n.end);return a.createElement("span",{key:l,"data-reach-combobox-option-text":"","data-user-value":n.highlight?!0:void 0,"data-suggested-value":n.highlight?void 0:!0},i)}):e)}ue.displayName="ComboboxOptionText";var Se=a.forwardRef((i,l)=>{var u=i,{as:e="button",onClick:t,onKeyDown:o}=u,n=D(u,["as","onClick","onKeyDown"]);let{transition:r,state:d,buttonRef:p,listboxId:f,isExpanded:g}=a.useContext(P),h=(0,s.useComposedRefs)(p,l),E=ee(),x=()=>{r(d===c?Z:K)};return a.createElement(e,m(b({"aria-controls":f,"aria-haspopup":"listbox","aria-expanded":g},n),{"data-reach-combobox-button":"",ref:h,onClick:(0,s.composeEventHandlers)(t,x),onKeyDown:(0,s.composeEventHandlers)(o,E)}))});Se.displayName="ComboboxButton";function et(e,t){(0,s.useIsomorphicLayoutEffect)(()=>{var o;(e===I||e===U||e===w||e===Z)&&((o=t.current)==null||o.focus())},[t,e])}function ee(){let{data:{navigationValue:e},onSelect:t,state:o,transition:n,autocompletePropRef:l,persistSelectionRef:i,isControlledRef:u}=a.useContext(P),r=(0,L.useDescendants)(ie);return function(p){let f=r.findIndex(({value:C})=>C===e);function g(){return f===r.length-1?l.current?null:E():r[(f+1)%r.length]}function h(){return f===0?l.current?null:x():f===-1?x():r[(f-1+r.length)%r.length]}function E(){return r[0]}function x(){return r[r.length-1]}switch(p.key){case"ArrowDown":if(p.preventDefault(),!r||!r.length)return;if(o===c)n(I,{persistSelection:i.current});else{let C=g();n(I,{value:C?C.value:null})}break;case"ArrowUp":if(p.preventDefault(),!r||r.length===0)return;if(o===c)n(I,{persistSelection:i.current});else{let C=h();n(I,{value:C?C.value:null})}break;case"Home":case"PageUp":if(p.preventDefault(),!r||r.length===0)return;o===c?n(I):n(I,{value:E().value});break;case"End":case"PageDown":if(p.preventDefault(),!r||r.length===0)return;o===c?n(I):n(I,{value:x().value});break;case"Escape":o!==c&&n(U);break;case"Enter":o===A&&e!==null&&(p.preventDefault(),t&&t(e),n(le,{isControlled:u.current}));break}}}function Ne(){let{state:e,transition:t,popoverRef:o,inputRef:n,buttonRef:l}=a.useContext(P);return function(u){let r=o.current,d=n.current,p=l.current,f=u.relatedTarget;f!==d&&f!==p&&r&&(r.contains(f)?e!==G&&t(Q):t(M))}}function tt(e,t,o){let[n,l]=a.useState(e.initial),[i,u]=a.useReducer(t,o);return[n,i,(d,p={})=>{let f=e.states[n],g=f&&f.on[d];if(g){u(b({type:d,state:n,nextState:n},p)),l(g);return}}]}function Le(e){let t=0;if(e.length===0)return t;for(let o=0;o<e.length;o++)t=(t<<5)-t+e.charCodeAt(o),t=t&t;return t}function ce(e){return e.toLowerCase()}function Pe(e){return String(e).replace(/([.*+?=^!:${}()|[\]/\\])/g,"\\$1")}function ot(){let{isExpanded:e,comboboxId:t,data:o,state:n}=a.useContext(P),{navigationValue:l}=o;return a.useMemo(()=>({id:t,isExpanded:e,navigationValue:l!=null?l:null,state:n}),[t,e,l,n])}function nt(){let{value:e,index:t}=a.useContext(se);return a.useMemo(()=>({value:e,index:t}),[e,t])}0&&(module.exports={Combobox,ComboboxButton,ComboboxInput,ComboboxList,ComboboxOption,ComboboxOptionText,ComboboxPopover,escapeRegexp,unstable_useKeyDown,useComboboxContext,useComboboxOptionContext});

dist/reach-combobox.d.ts

 /**
-  * @reach/combobox v0.18.0-pre.3
+  * @reach/combobox v0.18.0-pre.4
   *
@@ -13,3 +13,3 @@ * Copyright (c) 2018-2022, React Training LLC
 import * as React from 'react';
-import { Polymorphic } from '@reach/utils';
+import * as Polymorphic from '@reach/polymorphic';
 import { PopoverProps } from '@reach/popover';
@@ -16,0 +16,0 @@

package.json

 {
   "name": "@reach/combobox",
-  "version": "0.18.0-pre.3",
+  "version": "0.18.0-pre.4",
   "description": "Accessible React Combobox (Autocomplete).",
@@ -16,7 +16,8 @@ "author": "React Training <[e-mail]>",
   "dependencies": {
-    "@reach/auto-id": "0.18.0-pre.3",
-    "@reach/descendants": "0.18.0-pre.3",
-    "@reach/popover": "0.18.0-pre.3",
-    "@reach/portal": "0.18.0-pre.3",
-    "@reach/utils": "0.18.0-pre.3"
+    "@reach/auto-id": "0.18.0-pre.4",
+    "@reach/descendants": "0.18.0-pre.4",
+    "@reach/polymorphic": "0.18.0-pre.4",
+    "@reach/popover": "0.18.0-pre.4",
+    "@reach/portal": "0.18.0-pre.4",
+    "@reach/utils": "0.18.0-pre.4"
   },
@@ -23,0 +24,0 @@ "devDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

146142

increased by0.34%

Worsened metrics

Dependency count

8

increased by14.29%

Lines of code

2057

decreased by-0.19%

Dependency changes

• + Added@reach/polymorphic@0.18.0-pre.4

• + Added@reach/auto-id@0.18.0-pre.4(transitive)

• + Added@reach/descendants@0.18.0-pre.4(transitive)

• + Added@reach/polymorphic@0.18.0-pre.4(transitive)

• + Added@reach/popover@0.18.0-pre.4(transitive)

• + Added@reach/portal@0.18.0-pre.4(transitive)

• + Added@reach/rect@0.18.0-pre.4(transitive)

• + Added@reach/utils@0.18.0-pre.4(transitive)

• - Removed@reach/auto-id@0.18.0-pre.3(transitive)

• - Removed@reach/descendants@0.18.0-pre.3(transitive)

• - Removed@reach/popover@0.18.0-pre.3(transitive)

• - Removed@reach/portal@0.18.0-pre.3(transitive)

• - Removed@reach/rect@0.18.0-pre.3(transitive)

• - Removed@reach/utils@0.18.0-pre.3(transitive)

• Updated@reach/auto-id@0.18.0-pre.4

• Updated@reach/descendants@0.18.0-pre.4

• Updated@reach/popover@0.18.0-pre.4

• Updated@reach/portal@0.18.0-pre.4

• Updated@reach/utils@0.18.0-pre.4