@reach/combobox - npm Package Compare versions

Comparing version 0.12.1 to 0.13.0

dist/combobox.cjs.development.js

@@ -199,2 +199,4 @@ 'use strict';
 var Combobox = /*#__PURE__*/utils.forwardRefWithAs(function Combobox(_ref, forwardedRef) {
+  var _data$navigationValue;
+
   var onSelect = _ref.onSelect,
@@ -268,6 +270,9 @@ _ref$openOnFocus = _ref.openOnFocus,
     "data-reach-combobox": "",
+    "data-state": getDataState(state),
     ref: forwardedRef
   }), utils.isFunction(children) ? children({
     id: id,
-    isExpanded: popoverIsExpanded(state)
+    isExpanded: popoverIsExpanded(state),
+    navigationValue: (_data$navigationValue = data.navigationValue) !== null && _data$navigationValue !== void 0 ? _data$navigationValue : null,
+    state: state
   }) : children)));
@@ -412,2 +417,3 @@ });
     "data-reach-combobox-input": "",
+    "data-state": getDataState(state),
     ref: ref,
@@ -453,3 +459,4 @@ onBlur: utils.wrapEvent(onBlur, handleBlur),
       inputRef = _React$useContext2.inputRef,
-      isExpanded = _React$useContext2.isExpanded;
+      isExpanded = _React$useContext2.isExpanded,
+      state = _React$useContext2.state;
 
@@ -461,2 +468,3 @@ var ref = utils.useForkedRef(popoverRef, forwardedRef);
     "data-reach-combobox-popover": "",
+    "data-state": getDataState(state),
     onKeyDown: utils.wrapEvent(onKeyDown, handleKeyDown),
@@ -580,5 +588,7 @@ onBlur: utils.wrapEvent(onBlur, handleBlur),
     tabIndex: -1,
-    onClick: utils.wrapEvent(onClick, handleClick),
-    children: children || React.createElement(ComboboxOptionText, null)
-  })));
+    onClick: utils.wrapEvent(onClick, handleClick)
+  }), children ? utils.isFunction(children) ? children({
+    value: value,
+    index: index
+  }) : children : React.createElement(ComboboxOptionText, null)));
 });
@@ -625,2 +635,3 @@
       key: index,
+      "data-reach-combobox-option-text": "",
       "data-user-value": result.highlight ? true : undefined,
@@ -971,3 +982,3 @@ "data-suggested-value": result.highlight ? undefined : true
 
-var makeHash = function makeHash(str) {
+function makeHash(str) {
   var hash = 0;
@@ -987,3 +998,7 @@
   return hash;
-};
+}
+
+function getDataState(state) {
+  return state.toLowerCase();
+}
 /**
@@ -1010,12 +1025,35 @@ * Escape regexp special characters in `str`
       isExpanded = _React$useContext10.isExpanded,
-      comboboxId = _React$useContext10.comboboxId;
+      comboboxId = _React$useContext10.comboboxId,
+      data = _React$useContext10.data,
+      state = _React$useContext10.state;
 
+  var navigationValue = data.navigationValue;
   return React.useMemo(function () {
     return {
       id: comboboxId,
-      isExpanded: isExpanded
+      isExpanded: isExpanded,
+      navigationValue: navigationValue !== null && navigationValue !== void 0 ? navigationValue : null,
+      state: state
     };
-  }, [comboboxId, isExpanded]);
+  }, [comboboxId, isExpanded, navigationValue, state]);
 }
+/**
+ * A hook that exposes data for a given `ComboboxOption` component to its descendants.
+ *
+ * @see Docs https://reach.tech/combobox#usecomboboxcontext
+ */
 
+function useComboboxOptionContext() {
+  var _React$useContext11 = React.useContext(OptionContext),
+      value = _React$useContext11.value,
+      index = _React$useContext11.index;
+
+  return React.useMemo(function () {
+    return {
+      value: value,
+      index: index
+    };
+  }, [value, index]);
+}
+
 exports.Combobox = Combobox;
@@ -1030,2 +1068,3 @@ exports.ComboboxButton = ComboboxButton;
 exports.useComboboxContext = useComboboxContext;
+exports.useComboboxOptionContext = useComboboxOptionContext;
 //# sourceMappingURL=combobox.cjs.development.js.map

dist/combobox.cjs.production.min.js

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

dist/combobox.esm.js

@@ -191,2 +191,4 @@ import { useRef, createElement, useContext, useCallback, useEffect, useMemo, Fragment, useState, useReducer } from 'react';
 var Combobox = /*#__PURE__*/forwardRefWithAs(function Combobox(_ref, forwardedRef) {
+  var _data$navigationValue;
+
   var onSelect = _ref.onSelect,
@@ -260,6 +262,9 @@ _ref$openOnFocus = _ref.openOnFocus,
     "data-reach-combobox": "",
+    "data-state": getDataState(state),
     ref: forwardedRef
   }), isFunction(children) ? children({
     id: id,
-    isExpanded: popoverIsExpanded(state)
+    isExpanded: popoverIsExpanded(state),
+    navigationValue: (_data$navigationValue = data.navigationValue) !== null && _data$navigationValue !== void 0 ? _data$navigationValue : null,
+    state: state
   }) : children)));
@@ -404,2 +409,3 @@ });
     "data-reach-combobox-input": "",
+    "data-state": getDataState(state),
     ref: ref,
@@ -445,3 +451,4 @@ onBlur: wrapEvent(onBlur, handleBlur),
       inputRef = _React$useContext2.inputRef,
-      isExpanded = _React$useContext2.isExpanded;
+      isExpanded = _React$useContext2.isExpanded,
+      state = _React$useContext2.state;
 
@@ -453,2 +460,3 @@ var ref = useForkedRef(popoverRef, forwardedRef);
     "data-reach-combobox-popover": "",
+    "data-state": getDataState(state),
     onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
@@ -572,5 +580,7 @@ onBlur: wrapEvent(onBlur, handleBlur),
     tabIndex: -1,
-    onClick: wrapEvent(onClick, handleClick),
-    children: children || createElement(ComboboxOptionText, null)
-  })));
+    onClick: wrapEvent(onClick, handleClick)
+  }), children ? isFunction(children) ? children({
+    value: value,
+    index: index
+  }) : children : createElement(ComboboxOptionText, null)));
 });
@@ -617,2 +627,3 @@
       key: index,
+      "data-reach-combobox-option-text": "",
       "data-user-value": result.highlight ? true : undefined,
@@ -963,3 +974,3 @@ "data-suggested-value": result.highlight ? undefined : true
 
-var makeHash = function makeHash(str) {
+function makeHash(str) {
   var hash = 0;
@@ -979,3 +990,7 @@
   return hash;
-};
+}
+
+function getDataState(state) {
+  return state.toLowerCase();
+}
 /**
@@ -1002,13 +1017,36 @@ * Escape regexp special characters in `str`
       isExpanded = _React$useContext10.isExpanded,
-      comboboxId = _React$useContext10.comboboxId;
+      comboboxId = _React$useContext10.comboboxId,
+      data = _React$useContext10.data,
+      state = _React$useContext10.state;
 
+  var navigationValue = data.navigationValue;
   return useMemo(function () {
     return {
       id: comboboxId,
-      isExpanded: isExpanded
+      isExpanded: isExpanded,
+      navigationValue: navigationValue !== null && navigationValue !== void 0 ? navigationValue : null,
+      state: state
     };
-  }, [comboboxId, isExpanded]);
+  }, [comboboxId, isExpanded, navigationValue, state]);
 }
+/**
+ * A hook that exposes data for a given `ComboboxOption` component to its descendants.
+ *
+ * @see Docs https://reach.tech/combobox#usecomboboxcontext
+ */
 
-export { Combobox, ComboboxButton, ComboboxInput, ComboboxList, ComboboxOption, ComboboxOptionText, ComboboxPopover, escapeRegexp, useComboboxContext };
+function useComboboxOptionContext() {
+  var _React$useContext11 = useContext(OptionContext),
+      value = _React$useContext11.value,
+      index = _React$useContext11.index;
+
+  return useMemo(function () {
+    return {
+      value: value,
+      index: index
+    };
+  }, [value, index]);
+}
+
+export { Combobox, ComboboxButton, ComboboxInput, ComboboxList, ComboboxOption, ComboboxOptionText, ComboboxPopover, escapeRegexp, useComboboxContext, useComboboxOptionContext };
 //# sourceMappingURL=combobox.esm.js.map

dist/index.d.ts

@@ -180,3 +180,3 @@ /**
      */
-    children?: React.ReactNode;
+    children?: React.ReactNode | ((props: ComboboxOptionContextValue) => React.ReactNode);
     /**
@@ -227,7 +227,20 @@ * The value to match against when suggesting.
 export declare function useComboboxContext(): ComboboxContextValue;
+/**
+ * A hook that exposes data for a given `ComboboxOption` component to its descendants.
+ *
+ * @see Docs https://reach.tech/combobox#usecomboboxcontext
+ */
+export declare function useComboboxOptionContext(): ComboboxOptionContextValue;
 export declare type ComboboxContextValue = {
     id: string | undefined;
     isExpanded: boolean;
+    navigationValue: ComboboxValue | null;
+    state: State;
 };
+interface ComboboxOptionContextValue {
+    value: ComboboxValue;
+    index: number;
+}
 declare type ComboboxValue = string;
+declare type State = "IDLE" | "SUGGESTING" | "NAVIGATING" | "INTERACTING";
 export {};

package.json

 {
   "name": "@reach/combobox",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "Accessible React Combobox (Autocomplete).",
@@ -16,7 +16,7 @@ "author": "React Training <[e-mail]>",
   "dependencies": {
-    "@reach/auto-id": "0.12.1",
-    "@reach/descendants": "0.12.1",
-    "@reach/popover": "0.12.1",
-    "@reach/portal": "0.12.1",
-    "@reach/utils": "0.12.1",
+    "@reach/auto-id": "0.13.0",
+    "@reach/descendants": "0.13.0",
+    "@reach/popover": "0.13.0",
+    "@reach/portal": "0.13.0",
+    "@reach/utils": "0.13.0",
     "highlight-words-core": "1.2.2",
@@ -27,4 +27,4 @@ "prop-types": "^15.7.2",
   "peerDependencies": {
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react": "^16.8.0 || 17.x",
+    "react-dom": "^16.8.0 || 17.x"
   },
@@ -39,3 +39,3 @@ "main": "dist/index.js",
   ],
-  "gitHead": "97b32791ce33f822f6bc9f07f6cebfb343d8032d"
+  "gitHead": "c5234721d372e2ab2a7745475007605e78d18895"
 }

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

265403

increased by3.76%

Lines of code

2108

increased by4.15%

Dependency changes

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

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

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

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

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

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

• + Addedreact@17.0.2(transitive)

• + Addedreact-dom@17.0.2(transitive)

• + Addedscheduler@0.20.2(transitive)

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

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

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

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

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

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

• - Removedreact@16.14.0(transitive)

• - Removedreact-dom@16.14.0(transitive)

• - Removedscheduler@0.19.1(transitive)

• Updated@reach/auto-id@0.13.0

• Updated@reach/descendants@0.13.0

• Updated@reach/popover@0.13.0

• Updated@reach/portal@0.13.0

• Updated@reach/utils@0.13.0