Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@reach/combobox
Advanced tools
@reach/combobox - npm Package Compare versions
Comparing version 0.8.2 to 0.8.3
@@ -68,4 +68,8 @@ 'use strict'; | ||
| var CHANGE = "CHANGE"; // User is navigating w/ the keyboard | ||
| var CHANGE = "CHANGE"; // Initial input value change handler for syncing user state with state machine | ||
| // Prevents initial change from sending the user to the NAVIGATING state | ||
| // https://github.com/reach/reach-ui/issues/464 | ||
| var INITIAL_CHANGE = "INITIAL_CHANGE"; // User is navigating w/ the keyboard | ||
| var NAVIGATE = "NAVIGATE"; // User can be navigating with keyboard and then click instead, we want the | ||
@@ -88,3 +92,3 @@ // value from the click, not the current nav item | ||
| states: (_states = {}, _states[IDLE] = { | ||
| on: (_on = {}, _on[BLUR] = IDLE, _on[CLEAR] = IDLE, _on[CHANGE] = SUGGESTING, _on[FOCUS] = SUGGESTING, _on[NAVIGATE] = NAVIGATING, _on[OPEN_WITH_BUTTON] = SUGGESTING, _on) | ||
| on: (_on = {}, _on[BLUR] = IDLE, _on[CLEAR] = IDLE, _on[CHANGE] = SUGGESTING, _on[INITIAL_CHANGE] = IDLE, _on[FOCUS] = SUGGESTING, _on[NAVIGATE] = NAVIGATING, _on[OPEN_WITH_BUTTON] = SUGGESTING, _on) | ||
| }, _states[SUGGESTING] = { | ||
@@ -106,2 +110,3 @@ on: (_on2 = {}, _on2[CHANGE] = SUGGESTING, _on2[FOCUS] = SUGGESTING, _on2[NAVIGATE] = NAVIGATING, _on2[CLEAR] = IDLE, _on2[ESCAPE] = IDLE, _on2[BLUR] = IDLE, _on2[SELECT_WITH_CLICK] = IDLE, _on2[INTERACT] = INTERACTING, _on2[CLOSE_WITH_BUTTON] = IDLE, _on2) | ||
| case CHANGE: | ||
| case INITIAL_CHANGE: | ||
| return _extends({}, nextState, { | ||
@@ -167,5 +172,8 @@ navigationValue: null, | ||
| }; | ||
| /* | ||
| /** | ||
| * When we open a list, set the navigation value to the value in the input, if | ||
| * it's in the list, then it'll automatically be highlighted. | ||
| * | ||
| * @param stateData | ||
| * @param event | ||
| */ | ||
@@ -191,8 +199,5 @@ | ||
| /*#__PURE__*/ | ||
| utils.createNamedContext("ComboboxContext", {}); | ||
| /* | ||
| * Allows us to put the option's value on context so that ComboboxOptionText | ||
| * can work it's highlight text magic no matter what else is rendered around | ||
| * it. | ||
| */ | ||
| utils.createNamedContext("ComboboxContext", {}); // Allows us to put the option's value on context so that ComboboxOptionText | ||
| // can work it's highlight text magic no matter what else is rendered around | ||
| // it. | ||
@@ -227,11 +232,8 @@ var OptionContext = | ||
| var popoverRef = React.useRef(); | ||
| var buttonRef = React.useRef(); | ||
| /* | ||
| * When <ComboboxInput autocomplete={false} /> we don't want cycle back to | ||
| * the user's value while navigating (because it's always the user's value), | ||
| * but we need to know this in useKeyDown which is far away from the prop | ||
| * here, so we do something sneaky and write it to this ref on context so we | ||
| * can use it anywhere else 😛. Another new trick for me and I'm excited | ||
| * about this one too! | ||
| */ | ||
| var buttonRef = React.useRef(); // When <ComboboxInput autocomplete={false} /> we don't want cycle back to | ||
| // the user's value while navigating (because it's always the user's value), | ||
| // but we need to know this in useKeyDown which is far away from the prop | ||
| // here, so we do something sneaky and write it to this ref on context so we | ||
| // can use it anywhere else 😛. Another new trick for me and I'm excited | ||
| // about this one too! | ||
@@ -241,6 +243,4 @@ var autocompletePropRef = React.useRef(); | ||
| var defaultData = { | ||
| /* | ||
| * The value the user has typed. We derive this also when the developer is | ||
| * controlling the value of ComboboxInput. | ||
| */ | ||
| // The value the user has typed. We derive this also when the developer is | ||
| // controlling the value of ComboboxInput. | ||
| value: "", | ||
@@ -328,2 +328,11 @@ // the value the user has navigated to with the keyboard | ||
| // https://github.com/reach/reach-ui/issues/464 | ||
| var _useRef = React.useRef(controlledValue), | ||
| initialControlledValue = _useRef.current; | ||
| var controlledValueChangedRef = React.useRef(false); | ||
| utils.useUpdateEffect(function () { | ||
| controlledValueChangedRef.current = true; | ||
| }, [controlledValue]); | ||
| var _useContext = React.useContext(ComboboxContext), | ||
@@ -341,7 +350,4 @@ _useContext$data = _useContext.data, | ||
| var ref = utils.useForkedRef(inputRef, forwardedRef); | ||
| /* | ||
| * Because we close the List on blur, we need to track if the blur is | ||
| * caused by clicking inside the list, and if so, don't close the List. | ||
| */ | ||
| var ref = utils.useForkedRef(inputRef, forwardedRef); // Because we close the List on blur, we need to track if the blur is | ||
| // caused by clicking inside the list, and if so, don't close the List. | ||
@@ -351,8 +357,5 @@ var selectOnClickRef = React.useRef(false); | ||
| var handleBlur = useBlur(); | ||
| var isControlled = controlledValue != null; | ||
| /* | ||
| * Layout effect should be SSR-safe here because we don't actually do | ||
| * anything with this ref that involves rendering until after we've | ||
| * let the client hydrate in nested components. | ||
| */ | ||
| var isControlled = controlledValue != null; // Layout effect should be SSR-safe here because we don't actually do | ||
| // anything with this ref that involves rendering until after we've | ||
| // let the client hydrate in nested components. | ||
@@ -366,2 +369,6 @@ utils.useIsomorphicLayoutEffect(function () { | ||
| transition(CLEAR); | ||
| } else if (value === initialControlledValue && !controlledValueChangedRef.current) { | ||
| transition(INITIAL_CHANGE, { | ||
| value: value | ||
| }); | ||
| } else { | ||
@@ -372,8 +379,5 @@ transition(CHANGE, { | ||
| } | ||
| }; | ||
| /* | ||
| * If they are controlling the value we still need to do our transitions, so | ||
| * we have this derived state to emulate onChange of the input as we receive | ||
| * new `value`s ...[*] | ||
| */ | ||
| }; // If they are controlling the value we still need to do our transitions, so | ||
| // we have this derived state to emulate onChange of the input as we receive | ||
| // new `value`s ...[*] | ||
@@ -383,8 +387,5 @@ | ||
| handleValueChange(controlledValue); | ||
| } | ||
| /* | ||
| * [*]... and when controlled, we don't trigger handleValueChange as the user | ||
| * types, instead the developer controls it with the normal input onChange | ||
| * prop | ||
| */ | ||
| } // [*]... and when controlled, we don't trigger handleValueChange as the user | ||
| // types, instead the developer controls it with the normal input onChange | ||
| // prop | ||
@@ -403,8 +404,5 @@ | ||
| selectOnClickRef.current = true; | ||
| } | ||
| /* | ||
| * If we select an option with click, useFocusManagement will focus the | ||
| * input, in those cases we don't want to cause the menu to open back up, | ||
| * so we guard behind these states. | ||
| */ | ||
| } // If we select an option with click, useFocusManagement will focus the | ||
| // input, in those cases we don't want to cause the menu to open back up, | ||
| // so we guard behind these states. | ||
@@ -427,14 +425,14 @@ | ||
| return React__default.createElement(Comp, Object.assign({ | ||
| "aria-activedescendant": navigationValue ? String(makeHash(navigationValue)) : undefined, | ||
| "aria-autocomplete": "both", | ||
| "aria-activedescendant": navigationValue ? String(makeHash(navigationValue)) : undefined | ||
| "aria-controls": listboxId | ||
| }, props, { | ||
| "data-reach-combobox-input": "", | ||
| ref: ref, | ||
| value: inputValue || "", | ||
| onBlur: utils.wrapEvent(onBlur, handleBlur), | ||
| onChange: utils.wrapEvent(onChange, handleChange), | ||
| onClick: utils.wrapEvent(onClick, handleClick), | ||
| onBlur: utils.wrapEvent(onBlur, handleBlur), | ||
| onFocus: utils.wrapEvent(onFocus, handleFocus), | ||
| onChange: utils.wrapEvent(onChange, handleChange), | ||
| onKeyDown: utils.wrapEvent(onKeyDown, handleKeyDown), | ||
| id: listboxId | ||
| value: inputValue || "" | ||
| })); | ||
@@ -480,10 +478,7 @@ }); | ||
| onBlur: utils.wrapEvent(onBlur, handleBlur), | ||
| /* | ||
| * Instead of conditionally rendering the popover we use the `hidden` prop | ||
| * because we don't want to unmount on close (from escape or onSelect). | ||
| * However, the developer can conditionally render the ComboboxPopover if | ||
| * they do want to cause mount/unmount based on the app's own data (like | ||
| * results.length or whatever). | ||
| */ | ||
| // Instead of conditionally rendering the popover we use the `hidden` prop | ||
| // because we don't want to unmount on close (from escape or onSelect). | ||
| // However, the developer can conditionally render the ComboboxPopover if | ||
| // they do want to cause mount/unmount based on the app's own data (like | ||
| // results.length or whatever). | ||
| hidden: !isVisible, | ||
@@ -527,3 +522,4 @@ tabIndex: -1, | ||
| var _useContext3 = React.useContext(ComboboxContext), | ||
| persistSelectionRef = _useContext3.persistSelectionRef; | ||
| persistSelectionRef = _useContext3.persistSelectionRef, | ||
| listboxId = _useContext3.listboxId; | ||
@@ -537,3 +533,4 @@ if (persistSelection) { | ||
| "data-reach-combobox-list": "", | ||
| role: "listbox" | ||
| role: "listbox", | ||
| id: listboxId | ||
| })); | ||
@@ -715,8 +712,6 @@ }); | ||
| function useFocusManagement(lastEventType, inputRef) { | ||
| /* | ||
| * useLayoutEffect so that the cursor goes to the end of the input instead | ||
| * of awkwardly at the beginning, unclear to me why 🤷♂️ | ||
| * | ||
| * Should be safe to use here since we're just focusing an input. | ||
| */ | ||
| // useLayoutEffect so that the cursor goes to the end of the input instead | ||
| // of awkwardly at the beginning, unclear to me why 🤷♂️ | ||
| // | ||
| // Should be safe to use here since we're just focusing an input. | ||
| utils.useIsomorphicLayoutEffect(function () { | ||
@@ -751,8 +746,5 @@ if (lastEventType === NAVIGATE || lastEventType === ESCAPE || lastEventType === SELECT_WITH_CLICK || lastEventType === OPEN_WITH_BUTTON) { | ||
| // Don't scroll the page | ||
| event.preventDefault(); | ||
| /* | ||
| * If the developer didn't render any options, there's no point in | ||
| * trying to navigate--but seriously what the heck? Give us some | ||
| * options fam. | ||
| */ | ||
| event.preventDefault(); // If the developer didn't render any options, there's no point in | ||
| // trying to navigate--but seriously what the heck? Give us some | ||
| // options fam. | ||
@@ -777,7 +769,5 @@ if (!options || options.length === 0) { | ||
| if (autocompletePropRef.current) { | ||
| /* | ||
| * Go back to the value the user has typed because we are | ||
| * autocompleting and they need to be able to get back to what | ||
| * they had typed w/o having to backspace out. | ||
| */ | ||
| // Go back to the value the user has typed because we are | ||
| // autocompleting and they need to be able to get back to what | ||
| // they had typed w/o having to backspace out. | ||
| transition(NAVIGATE, { | ||
@@ -809,8 +799,5 @@ value: null | ||
| // Don't scroll the page | ||
| event.preventDefault(); | ||
| /* | ||
| * If the developer didn't render any options, there's no point in | ||
| * trying to navigate--but seriously what the heck? Give us some | ||
| * options fam. | ||
| */ | ||
| event.preventDefault(); // If the developer didn't render any options, there's no point in | ||
| // trying to navigate--but seriously what the heck? Give us some | ||
| // options fam. | ||
@@ -831,7 +818,5 @@ if (!options || options.length === 0) { | ||
| if (autocompletePropRef.current) { | ||
| /* | ||
| * Go back to the value the user has typed because we are | ||
| * autocompleting and they need to be able to get back to what | ||
| * they had typed w/o having to backspace out. | ||
| */ | ||
| // Go back to the value the user has typed because we are | ||
| // autocompleting and they need to be able to get back to what | ||
| // they had typed w/o having to backspace out. | ||
| transition(NAVIGATE, { | ||
@@ -940,2 +925,3 @@ value: null | ||
| console.log(event); | ||
| var currentState = chart.states[state]; | ||
@@ -953,6 +939,2 @@ var nextState = currentState && currentState.on[event]; | ||
| } | ||
| { | ||
| throw new Error("Unknown event \"" + event + "\" for state \"" + state + "\""); | ||
| } | ||
| }; | ||
@@ -959,0 +941,0 @@ |
@@ -1,2 +0,2 @@ | ||
| "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t);require("prop-types");var a,o,r,u,i,l=require("@reach/utils"),c=require("@reach/descendants"),s=require("highlight-words-core"),v=e(require("escape-regexp")),E=require("@reach/auto-id"),f=require("@reach/popover"),d=e(f);function p(){return(p=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 C(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 T="IDLE",I={initial:T,states:(i={},i.IDLE={on:(a={},a.BLUR=T,a.CLEAR=T,a.CHANGE="SUGGESTING",a.FOCUS="SUGGESTING",a.NAVIGATE="NAVIGATING",a.OPEN_WITH_BUTTON="SUGGESTING",a)},i.SUGGESTING={on:(o={},o.CHANGE="SUGGESTING",o.FOCUS="SUGGESTING",o.NAVIGATE="NAVIGATING",o.CLEAR=T,o.ESCAPE=T,o.BLUR=T,o.SELECT_WITH_CLICK=T,o.INTERACT="INTERACTING",o.CLOSE_WITH_BUTTON=T,o)},i.NAVIGATING={on:(r={},r.CHANGE="SUGGESTING",r.FOCUS="SUGGESTING",r.CLEAR=T,r.BLUR=T,r.ESCAPE=T,r.NAVIGATE="NAVIGATING",r.SELECT_WITH_CLICK=T,r.SELECT_WITH_KEYBOARD=T,r.CLOSE_WITH_BUTTON=T,r.INTERACT="INTERACTING",r)},i.INTERACTING={on:(u={},u.CHANGE="SUGGESTING",u.FOCUS="SUGGESTING",u.BLUR=T,u.ESCAPE=T,u.NAVIGATE="NAVIGATING",u.CLOSE_WITH_BUTTON=T,u.SELECT_WITH_CLICK=T,u)},i)},A=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:G(n,t)});case"CLEAR":return p({},n,{value:"",navigationValue:null});case"BLUR":case"ESCAPE":return p({},n,{navigationValue:null});case"SELECT_WITH_CLICK":return t.callback(t.value),p({},n,{value:t.value,navigationValue:null});case"SELECT_WITH_KEYBOARD":return t.callback(e.navigationValue||null),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:G(n,t)});default:return n}},N=["SUGGESTING","NAVIGATING","INTERACTING"],b=function(e){return N.includes(e)};function G(e,t){return t.value?t.value:t.persistSelection?e.value:null}var h=c.createDescendantContext("ComboboxDescendantContext"),S=l.createNamedContext("ComboboxContext",{}),x=l.createNamedContext("OptionContext",{}),R=l.forwardRefWithAs((function(e,a){var o=e.onSelect,r=e.openOnFocus,u=void 0!==r&&r,i=e.children,s=e.as,v=void 0===s?"div":s,f=C(e,["onSelect","openOnFocus","children","as"]),d=c.useDescendants(),T=d[0],N=d[1],G=t.useRef(),x=t.useRef(),R=t.useRef(),g=t.useRef(),m=t.useRef(),O=function(e,n,a){var o=t.useState(e.initial),r=o[0],u=o[1],i=t.useReducer(n,{value:"",navigationValue:null}),l=i[1];return[r,i[0],function(t,n){void 0===n&&(n={});var a=e.states[r],o=a&&a.on[t];if(o)return l(p({type:t,state:r,nextState:r},n)),void u(o)}]}(I,A),_=O[0],L=O[1],V=O[2];!function(e,t){l.useIsomorphicLayoutEffect((function(){"NAVIGATE"!==e&&"ESCAPE"!==e&&"SELECT_WITH_CLICK"!==e&&"OPEN_WITH_BUTTON"!==e||t.current.focus()}),[t,e])}(L.lastEventType,G);var w=E.useId(f.id),U=w?l.makeId("listbox",w):"listbox",k={autocompletePropRef:g,buttonRef:R,data:L,inputRef:G,isVisible:b(_),listboxId:U,onSelect:o||l.noop,openOnFocus:u,persistSelectionRef:m,popoverRef:x,state:_,transition:V};return t.useEffect((function(){return l.checkStyles("combobox")}),[]),n.createElement(c.DescendantProvider,{context:h,items:T,set:N},n.createElement(S.Provider,{value:k},n.createElement(v,Object.assign({"aria-haspopup":"listbox","aria-owns":U,"aria-expanded":k.isVisible},f,{"data-reach-combobox":"",ref:a,role:"combobox"}),i)))})),g=l.forwardRefWithAs((function(e,a){var o=e.as,r=void 0===o?"input":o,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,p=e.onFocus,T=e.value,I=C(e,["as","selectOnClick","autocomplete","onClick","onChange","onKeyDown","onBlur","onFocus","value"]),A=t.useContext(S),N=A.data,b=N.navigationValue,G=N.value,h=N.lastEventType,x=A.inputRef,R=A.state,g=A.transition,m=A.listboxId,O=A.autocompletePropRef,_=A.openOnFocus,L=l.useForkedRef(x,a),V=t.useRef(!1),y=w(),H=U(),B=null!=T;l.useIsomorphicLayoutEffect((function(){O.current=s}),[s,O]);var W=function(e){""===e.trim()?g("CLEAR"):g("CHANGE",{value:e})};B&&T!==G&&W(T);var D=!s||"NAVIGATING"!==R&&"INTERACTING"!==R?T||G:b||T||G;return n.createElement(r,Object.assign({"aria-autocomplete":"both","aria-activedescendant":b?String(k(b)):void 0},I,{"data-reach-combobox-input":"",ref:L,value:D||"",onClick:l.wrapEvent(v,(function(){V.current&&(V.current=!1,x.current.select())})),onBlur:l.wrapEvent(d,H),onFocus:l.wrapEvent(p,(function(){i&&(V.current=!0),_&&"SELECT_WITH_CLICK"!==h&&g("FOCUS")})),onChange:l.wrapEvent(E,(function(e){B||W(e.target.value)})),onKeyDown:l.wrapEvent(f,y),id:m}))})),m=t.forwardRef((function(e,a){var o=e.children,r=e.portal,u=void 0===r||r,i=e.onKeyDown,c=e.onBlur,s=C(e,["children","portal","onKeyDown","onBlur"]),v=t.useContext(S),E=v.inputRef,p=v.isVisible,T=l.useForkedRef(v.popoverRef,a),I=w(),A=U(),N={"data-reach-combobox-popover":"",onKeyDown:l.wrapEvent(i,I),onBlur:l.wrapEvent(c,A),hidden:!p,tabIndex:-1,children:o};return u?n.createElement(d,Object.assign({},s,{ref:T,position:f.positionMatchWidth,targetRef:E},N)):n.createElement("div",Object.assign({ref:T},s,N))})),O=l.forwardRefWithAs((function(e,a){var o=e.persistSelection,r=void 0!==o&&o,u=e.as,i=void 0===u?"ul":u,l=C(e,["persistSelection","as"]),c=t.useContext(S);return r&&(c.persistSelectionRef.current=!0),n.createElement(i,Object.assign({},l,{ref:a,"data-reach-combobox-list":"",role:"listbox"}))})),_=t.forwardRef((function(e,a){var o=e.children,r=e.value,u=e.onClick,i=C(e,["children","value","onClick"]),s=t.useContext(S),v=s.onSelect,E=s.data.navigationValue,f=s.transition,d=t.useRef(null),p=l.useForkedRef(a,d),T=c.useDescendant({context:h,element:d.current,value:r}),I=E===r;return n.createElement(x.Provider,{value:{value:r,index:T}},n.createElement("li",Object.assign({"aria-selected":I},i,{"data-reach-combobox-option":"",ref:p,id:String(k(r)),role:"option","data-highlighted":I?"":void 0,tabIndex:-1,onClick:l.wrapEvent(u,(function(){f("SELECT_WITH_CLICK",{value:r,callback:v})})),children:o||n.createElement(L,null)})))}));function L(){var e=t.useContext(x).value,a=t.useContext(S).data.value,o=t.useMemo((function(){return s.findAll({searchWords:v(a||"").split(/\s+/),textToHighlight:e})}),[a,e]);return n.createElement(n.Fragment,null,o.length?o.map((function(t,a){var o=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},o)})):e)}var V=l.forwardRefWithAs((function(e,a){var o=e.as,r=void 0===o?"button":o,u=e.onClick,i=e.onKeyDown,c=C(e,["as","onClick","onKeyDown"]),s=t.useContext(S),v=s.transition,E=s.state,f=s.listboxId,d=s.isVisible,p=l.useForkedRef(s.buttonRef,a),I=w();return n.createElement(r,Object.assign({"aria-controls":f,"aria-haspopup":"listbox","aria-expanded":d},c,{"data-reach-combobox-button":"",ref:p,onClick:l.wrapEvent(u,(function(){v(E===T?"OPEN_WITH_BUTTON":"CLOSE_WITH_BUTTON")})),onKeyDown:l.wrapEvent(i,I)}))}));function w(){var e=t.useContext(S),n=e.data.navigationValue,a=e.onSelect,o=e.state,r=e.transition,u=e.autocompletePropRef,i=e.persistSelectionRef,l=t.useContext(h).descendants;return function(e){switch(e.key){case"ArrowDown":if(e.preventDefault(),!l||0===l.length)return;if(o===T)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(o===T)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":o!==T&&r("ESCAPE");break;case"Enter":"NAVIGATING"===o&&null!==n&&(e.preventDefault(),r("SELECT_WITH_KEYBOARD",{callback:a}))}}}function U(){var e=t.useContext(S),n=e.state,a=e.transition,o=e.popoverRef,r=e.inputRef,u=e.buttonRef;return function(){var e=l.getOwnerDocument(r.current)||document;requestAnimationFrame((function(){e.activeElement!==r.current&&e.activeElement!==u.current&&o.current&&(o.current.contains(e.activeElement)?"INTERACTING"!==n&&a("INTERACT"):a("BLUR"))}))}}var k=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=R,exports.ComboboxButton=V,exports.ComboboxInput=g,exports.ComboboxList=O,exports.ComboboxOption=_,exports.ComboboxOptionText=L,exports.ComboboxPopover=m; | ||
| "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("@reach/descendants"),s=require("highlight-words-core"),v=e(require("escape-regexp")),E=require("@reach/auto-id"),f=require("@reach/popover"),d=e(f);function C(){return(C=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 T(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 p="IDLE",I={initial:p,states:(i={},i.IDLE={on:(o={},o.BLUR=p,o.CLEAR=p,o.CHANGE="SUGGESTING",o.INITIAL_CHANGE=p,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=p,a.ESCAPE=p,a.BLUR=p,a.SELECT_WITH_CLICK=p,a.INTERACT="INTERACTING",a.CLOSE_WITH_BUTTON=p,a)},i.NAVIGATING={on:(r={},r.CHANGE="SUGGESTING",r.FOCUS="SUGGESTING",r.CLEAR=p,r.BLUR=p,r.ESCAPE=p,r.NAVIGATE="NAVIGATING",r.SELECT_WITH_CLICK=p,r.SELECT_WITH_KEYBOARD=p,r.CLOSE_WITH_BUTTON=p,r.INTERACT="INTERACTING",r)},i.INTERACTING={on:(u={},u.CHANGE="SUGGESTING",u.FOCUS="SUGGESTING",u.BLUR=p,u.ESCAPE=p,u.NAVIGATE="NAVIGATING",u.CLOSE_WITH_BUTTON=p,u.SELECT_WITH_CLICK=p,u)},i)},A=function(e,t){var n=C({},e,{lastEventType:t.type});switch(t.type){case"CHANGE":case"INITIAL_CHANGE":return C({},n,{navigationValue:null,value:t.value});case"NAVIGATE":case"OPEN_WITH_BUTTON":return C({},n,{navigationValue:G(n,t)});case"CLEAR":return C({},n,{value:"",navigationValue:null});case"BLUR":case"ESCAPE":return C({},n,{navigationValue:null});case"SELECT_WITH_CLICK":return t.callback(t.value),C({},n,{value:t.value,navigationValue:null});case"SELECT_WITH_KEYBOARD":return t.callback(e.navigationValue||null),C({},n,{value:e.navigationValue,navigationValue:null});case"CLOSE_WITH_BUTTON":return C({},n,{navigationValue:null});case"INTERACT":return n;case"FOCUS":return C({},n,{navigationValue:G(n,t)});default:return n}},N=["SUGGESTING","NAVIGATING","INTERACTING"],b=function(e){return N.includes(e)};function G(e,t){return t.value?t.value:t.persistSelection?e.value:null}var h=c.createDescendantContext("ComboboxDescendantContext"),S=l.createNamedContext("ComboboxContext",{}),x=l.createNamedContext("OptionContext",{}),R=l.forwardRefWithAs((function(e,o){var a=e.onSelect,r=e.openOnFocus,u=void 0!==r&&r,i=e.children,s=e.as,v=void 0===s?"div":s,f=T(e,["onSelect","openOnFocus","children","as"]),d=c.useDescendants(),p=d[0],N=d[1],G=t.useRef(),x=t.useRef(),R=t.useRef(),g=t.useRef(),m=t.useRef(),O=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={}),console.log(t);var o=e.states[r],a=o&&o.on[t];if(a)return l(C({type:t,state:r,nextState:r},n)),void u(a)}]}(I,A),_=O[0],L=O[1],V=O[2];!function(e,t){l.useIsomorphicLayoutEffect((function(){"NAVIGATE"!==e&&"ESCAPE"!==e&&"SELECT_WITH_CLICK"!==e&&"OPEN_WITH_BUTTON"!==e||t.current.focus()}),[t,e])}(L.lastEventType,G);var w=E.useId(f.id),U=w?l.makeId("listbox",w):"listbox",H={autocompletePropRef:g,buttonRef:R,data:L,inputRef:G,isVisible:b(_),listboxId:U,onSelect:a||l.noop,openOnFocus:u,persistSelectionRef:m,popoverRef:x,state:_,transition:V};return t.useEffect((function(){return l.checkStyles("combobox")}),[]),n.createElement(c.DescendantProvider,{context:h,items:p,set:N},n.createElement(S.Provider,{value:H},n.createElement(v,Object.assign({"aria-haspopup":"listbox","aria-owns":U,"aria-expanded":H.isVisible},f,{"data-reach-combobox":"",ref:o,role:"combobox"}),i)))})),g=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,p=e.value,I=T(e,["as","selectOnClick","autocomplete","onClick","onChange","onKeyDown","onBlur","onFocus","value"]),A=t.useRef(p).current,N=t.useRef(!1);l.useUpdateEffect((function(){N.current=!0}),[p]);var b=t.useContext(S),G=b.data,h=G.navigationValue,x=G.value,R=G.lastEventType,g=b.inputRef,m=b.state,O=b.transition,_=b.listboxId,L=b.autocompletePropRef,V=b.openOnFocus,k=l.useForkedRef(g,o),y=t.useRef(!1),B=w(),W=U(),D=null!=p;l.useIsomorphicLayoutEffect((function(){L.current=s}),[s,L]);var F=function(e){""===e.trim()?O("CLEAR"):O(e!==A||N.current?"CHANGE":"INITIAL_CHANGE",{value:e})};D&&p!==x&&F(p);var K=!s||"NAVIGATING"!==m&&"INTERACTING"!==m?p||x:h||p||x;return n.createElement(r,Object.assign({"aria-activedescendant":h?String(H(h)):void 0,"aria-autocomplete":"both","aria-controls":_},I,{"data-reach-combobox-input":"",ref:k,onBlur:l.wrapEvent(d,W),onChange:l.wrapEvent(E,(function(e){D||F(e.target.value)})),onClick:l.wrapEvent(v,(function(){y.current&&(y.current=!1,g.current.select())})),onFocus:l.wrapEvent(C,(function(){i&&(y.current=!0),V&&"SELECT_WITH_CLICK"!==R&&O("FOCUS")})),onKeyDown:l.wrapEvent(f,B),value:K||""}))})),m=t.forwardRef((function(e,o){var a=e.children,r=e.portal,u=void 0===r||r,i=e.onKeyDown,c=e.onBlur,s=T(e,["children","portal","onKeyDown","onBlur"]),v=t.useContext(S),E=v.inputRef,C=v.isVisible,p=l.useForkedRef(v.popoverRef,o),I=w(),A=U(),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(d,Object.assign({},s,{ref:p,position:f.positionMatchWidth,targetRef:E},N)):n.createElement("div",Object.assign({ref:p},s,N))})),O=l.forwardRefWithAs((function(e,o){var a=e.persistSelection,r=void 0!==a&&a,u=e.as,i=void 0===u?"ul":u,l=T(e,["persistSelection","as"]),c=t.useContext(S),s=c.listboxId;return r&&(c.persistSelectionRef.current=!0),n.createElement(i,Object.assign({},l,{ref:o,"data-reach-combobox-list":"",role:"listbox",id:s}))})),_=t.forwardRef((function(e,o){var a=e.children,r=e.value,u=e.onClick,i=T(e,["children","value","onClick"]),s=t.useContext(S),v=s.onSelect,E=s.data.navigationValue,f=s.transition,d=t.useRef(null),C=l.useForkedRef(o,d),p=c.useDescendant({context:h,element:d.current,value:r}),I=E===r;return n.createElement(x.Provider,{value:{value:r,index:p}},n.createElement("li",Object.assign({"aria-selected":I},i,{"data-reach-combobox-option":"",ref:C,id:String(H(r)),role:"option","data-highlighted":I?"":void 0,tabIndex:-1,onClick:l.wrapEvent(u,(function(){f("SELECT_WITH_CLICK",{value:r,callback:v})})),children:a||n.createElement(L,null)})))}));function L(){var e=t.useContext(x).value,o=t.useContext(S).data.value,a=t.useMemo((function(){return s.findAll({searchWords:v(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 V=l.forwardRefWithAs((function(e,o){var a=e.as,r=void 0===a?"button":a,u=e.onClick,i=e.onKeyDown,c=T(e,["as","onClick","onKeyDown"]),s=t.useContext(S),v=s.transition,E=s.state,f=s.listboxId,d=s.isVisible,C=l.useForkedRef(s.buttonRef,o),I=w();return n.createElement(r,Object.assign({"aria-controls":f,"aria-haspopup":"listbox","aria-expanded":d},c,{"data-reach-combobox-button":"",ref:C,onClick:l.wrapEvent(u,(function(){v(E===p?"OPEN_WITH_BUTTON":"CLOSE_WITH_BUTTON")})),onKeyDown:l.wrapEvent(i,I)}))}));function w(){var e=t.useContext(S),n=e.data.navigationValue,o=e.onSelect,a=e.state,r=e.transition,u=e.autocompletePropRef,i=e.persistSelectionRef,l=t.useContext(h).descendants;return function(e){switch(e.key){case"ArrowDown":if(e.preventDefault(),!l||0===l.length)return;if(a===p)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===p)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!==p&&r("ESCAPE");break;case"Enter":"NAVIGATING"===a&&null!==n&&(e.preventDefault(),r("SELECT_WITH_KEYBOARD",{callback:o}))}}}function U(){var e=t.useContext(S),n=e.state,o=e.transition,a=e.popoverRef,r=e.inputRef,u=e.buttonRef;return function(){var e=l.getOwnerDocument(r.current)||document;requestAnimationFrame((function(){e.activeElement!==r.current&&e.activeElement!==u.current&&a.current&&(a.current.contains(e.activeElement)?"INTERACTING"!==n&&o("INTERACT"):o("BLUR"))}))}}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};exports.Combobox=R,exports.ComboboxButton=V,exports.ComboboxInput=g,exports.ComboboxList=O,exports.ComboboxOption=_,exports.ComboboxOptionText=L,exports.ComboboxPopover=m; | ||
| //# sourceMappingURL=combobox.cjs.production.min.js.map |
| import React, { useRef, useEffect, useContext, forwardRef, useMemo, useState, useReducer } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { forwardRefWithAs, makeId, checkStyles, useForkedRef, getOwnerDocument, useIsomorphicLayoutEffect, wrapEvent, createNamedContext, noop } from '@reach/utils'; | ||
| import { forwardRefWithAs, makeId, checkStyles, useUpdateEffect, useForkedRef, getOwnerDocument, useIsomorphicLayoutEffect, wrapEvent, createNamedContext, noop } from '@reach/utils'; | ||
| import { useDescendants, DescendantProvider, useDescendant, createDescendantContext } from '@reach/descendants'; | ||
@@ -60,4 +60,8 @@ import { findAll } from 'highlight-words-core'; | ||
| var CHANGE = "CHANGE"; // User is navigating w/ the keyboard | ||
| var CHANGE = "CHANGE"; // Initial input value change handler for syncing user state with state machine | ||
| // Prevents initial change from sending the user to the NAVIGATING state | ||
| // https://github.com/reach/reach-ui/issues/464 | ||
| var INITIAL_CHANGE = "INITIAL_CHANGE"; // User is navigating w/ the keyboard | ||
| var NAVIGATE = "NAVIGATE"; // User can be navigating with keyboard and then click instead, we want the | ||
@@ -80,3 +84,3 @@ // value from the click, not the current nav item | ||
| states: (_states = {}, _states[IDLE] = { | ||
| on: (_on = {}, _on[BLUR] = IDLE, _on[CLEAR] = IDLE, _on[CHANGE] = SUGGESTING, _on[FOCUS] = SUGGESTING, _on[NAVIGATE] = NAVIGATING, _on[OPEN_WITH_BUTTON] = SUGGESTING, _on) | ||
| on: (_on = {}, _on[BLUR] = IDLE, _on[CLEAR] = IDLE, _on[CHANGE] = SUGGESTING, _on[INITIAL_CHANGE] = IDLE, _on[FOCUS] = SUGGESTING, _on[NAVIGATE] = NAVIGATING, _on[OPEN_WITH_BUTTON] = SUGGESTING, _on) | ||
| }, _states[SUGGESTING] = { | ||
@@ -98,2 +102,3 @@ on: (_on2 = {}, _on2[CHANGE] = SUGGESTING, _on2[FOCUS] = SUGGESTING, _on2[NAVIGATE] = NAVIGATING, _on2[CLEAR] = IDLE, _on2[ESCAPE] = IDLE, _on2[BLUR] = IDLE, _on2[SELECT_WITH_CLICK] = IDLE, _on2[INTERACT] = INTERACTING, _on2[CLOSE_WITH_BUTTON] = IDLE, _on2) | ||
| case CHANGE: | ||
| case INITIAL_CHANGE: | ||
| return _extends({}, nextState, { | ||
@@ -159,5 +164,8 @@ navigationValue: null, | ||
| }; | ||
| /* | ||
| /** | ||
| * When we open a list, set the navigation value to the value in the input, if | ||
| * it's in the list, then it'll automatically be highlighted. | ||
| * | ||
| * @param stateData | ||
| * @param event | ||
| */ | ||
@@ -183,8 +191,5 @@ | ||
| /*#__PURE__*/ | ||
| createNamedContext("ComboboxContext", {}); | ||
| /* | ||
| * Allows us to put the option's value on context so that ComboboxOptionText | ||
| * can work it's highlight text magic no matter what else is rendered around | ||
| * it. | ||
| */ | ||
| createNamedContext("ComboboxContext", {}); // Allows us to put the option's value on context so that ComboboxOptionText | ||
| // can work it's highlight text magic no matter what else is rendered around | ||
| // it. | ||
@@ -219,11 +224,8 @@ var OptionContext = | ||
| var popoverRef = useRef(); | ||
| var buttonRef = useRef(); | ||
| /* | ||
| * When <ComboboxInput autocomplete={false} /> we don't want cycle back to | ||
| * the user's value while navigating (because it's always the user's value), | ||
| * but we need to know this in useKeyDown which is far away from the prop | ||
| * here, so we do something sneaky and write it to this ref on context so we | ||
| * can use it anywhere else 😛. Another new trick for me and I'm excited | ||
| * about this one too! | ||
| */ | ||
| var buttonRef = useRef(); // When <ComboboxInput autocomplete={false} /> we don't want cycle back to | ||
| // the user's value while navigating (because it's always the user's value), | ||
| // but we need to know this in useKeyDown which is far away from the prop | ||
| // here, so we do something sneaky and write it to this ref on context so we | ||
| // can use it anywhere else 😛. Another new trick for me and I'm excited | ||
| // about this one too! | ||
@@ -233,6 +235,4 @@ var autocompletePropRef = useRef(); | ||
| var defaultData = { | ||
| /* | ||
| * The value the user has typed. We derive this also when the developer is | ||
| * controlling the value of ComboboxInput. | ||
| */ | ||
| // The value the user has typed. We derive this also when the developer is | ||
| // controlling the value of ComboboxInput. | ||
| value: "", | ||
@@ -320,2 +320,11 @@ // the value the user has navigated to with the keyboard | ||
| // https://github.com/reach/reach-ui/issues/464 | ||
| var _useRef = useRef(controlledValue), | ||
| initialControlledValue = _useRef.current; | ||
| var controlledValueChangedRef = useRef(false); | ||
| useUpdateEffect(function () { | ||
| controlledValueChangedRef.current = true; | ||
| }, [controlledValue]); | ||
| var _useContext = useContext(ComboboxContext), | ||
@@ -333,7 +342,4 @@ _useContext$data = _useContext.data, | ||
| var ref = useForkedRef(inputRef, forwardedRef); | ||
| /* | ||
| * Because we close the List on blur, we need to track if the blur is | ||
| * caused by clicking inside the list, and if so, don't close the List. | ||
| */ | ||
| var ref = useForkedRef(inputRef, forwardedRef); // Because we close the List on blur, we need to track if the blur is | ||
| // caused by clicking inside the list, and if so, don't close the List. | ||
@@ -343,8 +349,5 @@ var selectOnClickRef = useRef(false); | ||
| var handleBlur = useBlur(); | ||
| var isControlled = controlledValue != null; | ||
| /* | ||
| * Layout effect should be SSR-safe here because we don't actually do | ||
| * anything with this ref that involves rendering until after we've | ||
| * let the client hydrate in nested components. | ||
| */ | ||
| var isControlled = controlledValue != null; // Layout effect should be SSR-safe here because we don't actually do | ||
| // anything with this ref that involves rendering until after we've | ||
| // let the client hydrate in nested components. | ||
@@ -358,2 +361,6 @@ useIsomorphicLayoutEffect(function () { | ||
| transition(CLEAR); | ||
| } else if (value === initialControlledValue && !controlledValueChangedRef.current) { | ||
| transition(INITIAL_CHANGE, { | ||
| value: value | ||
| }); | ||
| } else { | ||
@@ -364,8 +371,5 @@ transition(CHANGE, { | ||
| } | ||
| }; | ||
| /* | ||
| * If they are controlling the value we still need to do our transitions, so | ||
| * we have this derived state to emulate onChange of the input as we receive | ||
| * new `value`s ...[*] | ||
| */ | ||
| }; // If they are controlling the value we still need to do our transitions, so | ||
| // we have this derived state to emulate onChange of the input as we receive | ||
| // new `value`s ...[*] | ||
@@ -375,8 +379,5 @@ | ||
| handleValueChange(controlledValue); | ||
| } | ||
| /* | ||
| * [*]... and when controlled, we don't trigger handleValueChange as the user | ||
| * types, instead the developer controls it with the normal input onChange | ||
| * prop | ||
| */ | ||
| } // [*]... and when controlled, we don't trigger handleValueChange as the user | ||
| // types, instead the developer controls it with the normal input onChange | ||
| // prop | ||
@@ -395,8 +396,5 @@ | ||
| selectOnClickRef.current = true; | ||
| } | ||
| /* | ||
| * If we select an option with click, useFocusManagement will focus the | ||
| * input, in those cases we don't want to cause the menu to open back up, | ||
| * so we guard behind these states. | ||
| */ | ||
| } // If we select an option with click, useFocusManagement will focus the | ||
| // input, in those cases we don't want to cause the menu to open back up, | ||
| // so we guard behind these states. | ||
@@ -419,14 +417,14 @@ | ||
| return React.createElement(Comp, Object.assign({ | ||
| "aria-activedescendant": navigationValue ? String(makeHash(navigationValue)) : undefined, | ||
| "aria-autocomplete": "both", | ||
| "aria-activedescendant": navigationValue ? String(makeHash(navigationValue)) : undefined | ||
| "aria-controls": listboxId | ||
| }, props, { | ||
| "data-reach-combobox-input": "", | ||
| ref: ref, | ||
| value: inputValue || "", | ||
| onBlur: wrapEvent(onBlur, handleBlur), | ||
| onChange: wrapEvent(onChange, handleChange), | ||
| onClick: wrapEvent(onClick, handleClick), | ||
| onBlur: wrapEvent(onBlur, handleBlur), | ||
| onFocus: wrapEvent(onFocus, handleFocus), | ||
| onChange: wrapEvent(onChange, handleChange), | ||
| onKeyDown: wrapEvent(onKeyDown, handleKeyDown), | ||
| id: listboxId | ||
| value: inputValue || "" | ||
| })); | ||
@@ -472,10 +470,7 @@ }); | ||
| onBlur: wrapEvent(onBlur, handleBlur), | ||
| /* | ||
| * Instead of conditionally rendering the popover we use the `hidden` prop | ||
| * because we don't want to unmount on close (from escape or onSelect). | ||
| * However, the developer can conditionally render the ComboboxPopover if | ||
| * they do want to cause mount/unmount based on the app's own data (like | ||
| * results.length or whatever). | ||
| */ | ||
| // Instead of conditionally rendering the popover we use the `hidden` prop | ||
| // because we don't want to unmount on close (from escape or onSelect). | ||
| // However, the developer can conditionally render the ComboboxPopover if | ||
| // they do want to cause mount/unmount based on the app's own data (like | ||
| // results.length or whatever). | ||
| hidden: !isVisible, | ||
@@ -519,3 +514,4 @@ tabIndex: -1, | ||
| var _useContext3 = useContext(ComboboxContext), | ||
| persistSelectionRef = _useContext3.persistSelectionRef; | ||
| persistSelectionRef = _useContext3.persistSelectionRef, | ||
| listboxId = _useContext3.listboxId; | ||
@@ -529,3 +525,4 @@ if (persistSelection) { | ||
| "data-reach-combobox-list": "", | ||
| role: "listbox" | ||
| role: "listbox", | ||
| id: listboxId | ||
| })); | ||
@@ -707,8 +704,6 @@ }); | ||
| function useFocusManagement(lastEventType, inputRef) { | ||
| /* | ||
| * useLayoutEffect so that the cursor goes to the end of the input instead | ||
| * of awkwardly at the beginning, unclear to me why 🤷♂️ | ||
| * | ||
| * Should be safe to use here since we're just focusing an input. | ||
| */ | ||
| // useLayoutEffect so that the cursor goes to the end of the input instead | ||
| // of awkwardly at the beginning, unclear to me why 🤷♂️ | ||
| // | ||
| // Should be safe to use here since we're just focusing an input. | ||
| useIsomorphicLayoutEffect(function () { | ||
@@ -743,8 +738,5 @@ if (lastEventType === NAVIGATE || lastEventType === ESCAPE || lastEventType === SELECT_WITH_CLICK || lastEventType === OPEN_WITH_BUTTON) { | ||
| // Don't scroll the page | ||
| event.preventDefault(); | ||
| /* | ||
| * If the developer didn't render any options, there's no point in | ||
| * trying to navigate--but seriously what the heck? Give us some | ||
| * options fam. | ||
| */ | ||
| event.preventDefault(); // If the developer didn't render any options, there's no point in | ||
| // trying to navigate--but seriously what the heck? Give us some | ||
| // options fam. | ||
@@ -769,7 +761,5 @@ if (!options || options.length === 0) { | ||
| if (autocompletePropRef.current) { | ||
| /* | ||
| * Go back to the value the user has typed because we are | ||
| * autocompleting and they need to be able to get back to what | ||
| * they had typed w/o having to backspace out. | ||
| */ | ||
| // Go back to the value the user has typed because we are | ||
| // autocompleting and they need to be able to get back to what | ||
| // they had typed w/o having to backspace out. | ||
| transition(NAVIGATE, { | ||
@@ -801,8 +791,5 @@ value: null | ||
| // Don't scroll the page | ||
| event.preventDefault(); | ||
| /* | ||
| * If the developer didn't render any options, there's no point in | ||
| * trying to navigate--but seriously what the heck? Give us some | ||
| * options fam. | ||
| */ | ||
| event.preventDefault(); // If the developer didn't render any options, there's no point in | ||
| // trying to navigate--but seriously what the heck? Give us some | ||
| // options fam. | ||
@@ -823,7 +810,5 @@ if (!options || options.length === 0) { | ||
| if (autocompletePropRef.current) { | ||
| /* | ||
| * Go back to the value the user has typed because we are | ||
| * autocompleting and they need to be able to get back to what | ||
| * they had typed w/o having to backspace out. | ||
| */ | ||
| // Go back to the value the user has typed because we are | ||
| // autocompleting and they need to be able to get back to what | ||
| // they had typed w/o having to backspace out. | ||
| transition(NAVIGATE, { | ||
@@ -932,2 +917,3 @@ value: null | ||
| console.log(event); | ||
| var currentState = chart.states[state]; | ||
@@ -945,6 +931,2 @@ var nextState = currentState && currentState.on[event]; | ||
| } | ||
| if (process.env.NODE_ENV !== "production") { | ||
| throw new Error("Unknown event \"" + event + "\" for state \"" + state + "\""); | ||
| } | ||
| }; | ||
@@ -951,0 +933,0 @@ |
| { | ||
| "name": "@reach/combobox", | ||
| "version": "0.8.2", | ||
| "version": "0.8.3", | ||
| "description": "Accessible React Combobox (Autocomplete).", | ||
@@ -19,6 +19,6 @@ "author": "React Training <hello@reacttraining.com>", | ||
| "@reach/auto-id": "^0.8.2", | ||
| "@reach/descendants": "^0.8.2", | ||
| "@reach/popover": "^0.8.2", | ||
| "@reach/descendants": "^0.8.3", | ||
| "@reach/popover": "^0.8.3", | ||
| "@reach/portal": "^0.8.2", | ||
| "@reach/utils": "^0.8.2", | ||
| "@reach/utils": "^0.8.3", | ||
| "escape-regexp": "0.0.1", | ||
@@ -41,3 +41,3 @@ "highlight-words-core": "1.2.2", | ||
| ], | ||
| "gitHead": "ed24a5bb43a87adc36179283ca1de2c5af4ea26e" | ||
| "gitHead": "5bf1ce48db867c6b3c88e19f1614a6a725e829a0" | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by1.81%
240396
- Number of low supply chain risk alerts
- decreased by-11.11%
8
Worsened metrics
- Lines of code
- decreased by-1.9%
1907
Dependency changes
Updated@reach/descendants@^0.8.3
Updated@reach/popover@^0.8.3
Updated@reach/utils@^0.8.3