@reach/combobox - npm Package Compare versions

Comparing version 0.8.4 to 0.8.5

dist/combobox.cjs.development.js

@@ -133,3 +133,2 @@ 'use strict';
     case SELECT_WITH_CLICK:
-      event.callback(event.value);
       return _extends({}, nextState, {
@@ -141,3 +140,2 @@ value: event.value,
     case SELECT_WITH_KEYBOARD:
-      event.callback(data.navigationValue || null);
       return _extends({}, nextState, {
@@ -375,3 +373,4 @@ value: data.navigationValue,
 
-  if (isControlled && controlledValue !== value) {
+  if (isControlled && controlledValue !== value && ( // https://github.com/reach/reach-ui/issues/481
+  controlledValue.trim() === "" ? (value || "").trim() !== "" : true)) {
     handleValueChange(controlledValue);
@@ -560,5 +559,5 @@ } // [*]... and when controlled, we don't trigger handleValueChange as the user
   var handleClick = function handleClick() {
+    onSelect && onSelect(value);
     transition(SELECT_WITH_CLICK, {
-      value: value,
-      callback: onSelect
+      value: value
     });
@@ -727,127 +726,153 @@ };
   return function handleKeyDown(event) {
+    var index = options.findIndex(function (_ref7) {
+      var value = _ref7.value;
+      return value === navigationValue;
+    });
+
+    function getNextOption() {
+      var atBottom = index === options.length - 1;
+
+      if (atBottom) {
+        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.
+          return null;
+        } else {
+          // cycle through
+          return getFirstOption();
+        }
+      } else {
+        // Go to the next item in the list
+        return options[(index + 1) % options.length];
+      }
+    }
+
+    function getPreviousOption() {
+      var atTop = index === 0;
+
+      if (atTop) {
+        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.
+          return null;
+        } else {
+          // cycle through
+          return getLastOption();
+        }
+      } else if (index === -1) {
+        // displaying the user's value, so go select the last one
+        return getLastOption();
+      } else {
+        // normal case, select previous
+        return options[(index - 1 + options.length) % options.length];
+      }
+    }
+
+    function getFirstOption() {
+      return options[0];
+    }
+
+    function getLastOption() {
+      return options[options.length - 1];
+    }
+
     switch (event.key) {
       case "ArrowDown":
-        {
-          // 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.
+        // Don't scroll the page
+        event.preventDefault();
 
-          if (!options || options.length === 0) {
-            return;
-          }
+        if (!options || !options.length) {
+          return;
+        }
 
-          if (state === IDLE) {
-            // Opening a closed list
-            transition(NAVIGATE, {
-              persistSelection: persistSelectionRef.current
-            });
-          } else {
-            var index = options.findIndex(function (_ref7) {
-              var value = _ref7.value;
-              return value === navigationValue;
-            });
-            var atBottom = index === options.length - 1;
+        if (state === IDLE) {
+          // Opening a closed list
+          transition(NAVIGATE, {
+            persistSelection: persistSelectionRef.current
+          });
+        } else {
+          var next = getNextOption();
+          transition(NAVIGATE, {
+            value: next ? next.value : null
+          });
+        }
 
-            if (atBottom) {
-              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.
-                transition(NAVIGATE, {
-                  value: null
-                });
-              } else {
-                // cycle through
-                var firstOption = options[0].value;
-                transition(NAVIGATE, {
-                  value: firstOption
-                });
-              }
-            } else {
-              // Go to the next item in the list
-              var nextValue = options[(index + 1) % options.length].value;
-              transition(NAVIGATE, {
-                value: nextValue
-              });
-            }
-          }
-
-          break;
-        }
+        break;
       // A lot of duplicate code with ArrowDown up next, I'm already over it.
 
       case "ArrowUp":
-        {
-          // 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.
+        // Don't scroll the page
+        event.preventDefault();
 
-          if (!options || options.length === 0) {
-            return;
-          }
+        if (!options || options.length === 0) {
+          return;
+        }
 
-          if (state === IDLE) {
-            transition(NAVIGATE);
-          } else {
-            var _index = options.findIndex(function (_ref8) {
-              var value = _ref8.value;
-              return value === navigationValue;
-            });
+        if (state === IDLE) {
+          transition(NAVIGATE);
+        } else {
+          var prev = getPreviousOption();
+          transition(NAVIGATE, {
+            value: prev ? prev.value : null
+          });
+        }
 
-            if (_index === 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.
-                transition(NAVIGATE, {
-                  value: null
-                });
-              } else {
-                // cycle through
-                var lastOption = options[options.length - 1].value;
-                transition(NAVIGATE, {
-                  value: lastOption
-                });
-              }
-            } else if (_index === -1) {
-              // displaying the user's value, so go select the last one
-              var value = options.length ? options[options.length - 1].value : null;
-              transition(NAVIGATE, {
-                value: value
-              });
-            } else {
-              // normal case, select previous
-              var _nextValue = options[(_index - 1 + options.length) % options.length].value;
-              transition(NAVIGATE, {
-                value: _nextValue
-              });
-            }
-          }
+        break;
 
-          break;
+      case "Home":
+      case "PageUp":
+        // Don't scroll the page
+        event.preventDefault();
+
+        if (!options || options.length === 0) {
+          return;
         }
 
-      case "Escape":
-        {
-          if (state !== IDLE) {
-            transition(ESCAPE);
-          }
+        if (state === IDLE) {
+          transition(NAVIGATE);
+        } else {
+          transition(NAVIGATE, {
+            value: getFirstOption().value
+          });
+        }
 
-          break;
+        break;
+
+      case "End":
+      case "PageDown":
+        // Don't scroll the page
+        event.preventDefault();
+
+        if (!options || options.length === 0) {
+          return;
         }
 
+        if (state === IDLE) {
+          transition(NAVIGATE);
+        } else {
+          transition(NAVIGATE, {
+            value: getLastOption().value
+          });
+        }
+
+        break;
+
+      case "Escape":
+        if (state !== IDLE) {
+          transition(ESCAPE);
+        }
+
+        break;
+
       case "Enter":
-        {
-          if (state === NAVIGATING && navigationValue !== null) {
-            // don't want to submit forms
-            event.preventDefault();
-            transition(SELECT_WITH_KEYBOARD, {
-              callback: onSelect
-            });
-          }
+        if (state === NAVIGATING && navigationValue !== null) {
+          // don't want to submit forms
+          event.preventDefault();
+          onSelect && onSelect(navigationValue);
+          transition(SELECT_WITH_KEYBOARD);
+        }
 
-          break;
-        }
+        break;
     }
@@ -854,0 +879,0 @@ };

dist/combobox.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t);require("prop-types");var 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 C(){return(C=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 T(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 p="IDLE",I={initial:p,states:(i={},i.IDLE={on:(a={},a.BLUR=p,a.CLEAR=p,a.CHANGE="SUGGESTING",a.INITIAL_CHANGE=p,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=p,o.ESCAPE=p,o.BLUR=p,o.SELECT_WITH_CLICK=p,o.INTERACT="INTERACTING",o.CLOSE_WITH_BUTTON=p,o)},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,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=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,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(C({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",H={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: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: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,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,a),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,a){var o=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,a),I=w(),A=U(),N={"data-reach-combobox-popover":"",onKeyDown:l.wrapEvent(i,I),onBlur:l.wrapEvent(c,A),hidden:!C,tabIndex:-1,children:o};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,a){var o=e.persistSelection,r=void 0!==o&&o,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:a,"data-reach-combobox-list":"",role:"listbox",id:s}))})),_=t.forwardRef((function(e,a){var o=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(a,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: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=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,a),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,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===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(o===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":o!==p&&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 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;
+"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 r,o,a,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"),T=e(f);function d(){return(d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function p(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t.indexOf(n=a[r])>=0||(o[n]=e[n]);return o}var I="IDLE",C={initial:I,states:(i={},i.IDLE={on:(r={},r.BLUR=I,r.CLEAR=I,r.CHANGE="SUGGESTING",r.INITIAL_CHANGE=I,r.FOCUS="SUGGESTING",r.NAVIGATE="NAVIGATING",r.OPEN_WITH_BUTTON="SUGGESTING",r)},i.SUGGESTING={on:(o={},o.CHANGE="SUGGESTING",o.FOCUS="SUGGESTING",o.NAVIGATE="NAVIGATING",o.CLEAR=I,o.ESCAPE=I,o.BLUR=I,o.SELECT_WITH_CLICK=I,o.INTERACT="INTERACTING",o.CLOSE_WITH_BUTTON=I,o)},i.NAVIGATING={on:(a={},a.CHANGE="SUGGESTING",a.FOCUS="SUGGESTING",a.CLEAR=I,a.BLUR=I,a.ESCAPE=I,a.NAVIGATE="NAVIGATING",a.SELECT_WITH_CLICK=I,a.SELECT_WITH_KEYBOARD=I,a.CLOSE_WITH_BUTTON=I,a.INTERACT="INTERACTING",a)},i.INTERACTING={on:(u={},u.CHANGE="SUGGESTING",u.FOCUS="SUGGESTING",u.BLUR=I,u.ESCAPE=I,u.NAVIGATE="NAVIGATING",u.CLOSE_WITH_BUTTON=I,u.SELECT_WITH_CLICK=I,u)},i)},A=function(e,t){var n=d({},e,{lastEventType:t.type});switch(t.type){case"CHANGE":case"INITIAL_CHANGE":return d({},n,{navigationValue:null,value:t.value});case"NAVIGATE":case"OPEN_WITH_BUTTON":return d({},n,{navigationValue:b(n,t)});case"CLEAR":return d({},n,{value:"",navigationValue:null});case"BLUR":case"ESCAPE":return d({},n,{navigationValue:null});case"SELECT_WITH_CLICK":return d({},n,{value:t.value,navigationValue:null});case"SELECT_WITH_KEYBOARD":return d({},n,{value:e.navigationValue,navigationValue:null});case"CLOSE_WITH_BUTTON":return d({},n,{navigationValue:null});case"INTERACT":return n;case"FOCUS":return d({},n,{navigationValue:b(n,t)});default:return n}},N=["SUGGESTING","NAVIGATING","INTERACTING"],G=function(e){return N.includes(e)};function b(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,r){var o=e.onSelect,a=e.openOnFocus,u=void 0!==a&&a,i=e.children,s=e.as,v=void 0===s?"div":s,f=p(e,["onSelect","openOnFocus","children","as"]),T=c.useDescendants(),I=T[0],N=T[1],b=t.useRef(),x=t.useRef(),R=t.useRef(),g=t.useRef(),m=t.useRef(),O=function(e,n,r){var o=t.useState(e.initial),a=o[0],u=o[1],i=t.useReducer(n,{value:"",navigationValue:null}),l=i[1];return[a,i[0],function(t,n){void 0===n&&(n={});var r=e.states[a],o=r&&r.on[t];if(o)return l(d({type:t,state:a,nextState:a},n)),void u(o)}]}(C,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,b);var w=E.useId(f.id),U=w?l.makeId("listbox",w):"listbox",H={autocompletePropRef:g,buttonRef:R,data:L,inputRef:b,isVisible:G(_),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:I,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:r,role:"combobox"}),i)))})),g=l.forwardRefWithAs((function(e,r){var o=e.as,a=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,T=e.onBlur,d=e.onFocus,I=e.value,C=p(e,["as","selectOnClick","autocomplete","onClick","onChange","onKeyDown","onBlur","onFocus","value"]),A=t.useRef(I).current,N=t.useRef(!1);l.useUpdateEffect((function(){N.current=!0}),[I]);var G=t.useContext(S),b=G.data,h=b.navigationValue,x=b.value,R=b.lastEventType,g=G.inputRef,m=G.state,O=G.transition,_=G.listboxId,L=G.autocompletePropRef,V=G.openOnFocus,y=l.useForkedRef(g,r),D=t.useRef(!1),k=w(),B=U(),W=null!=I;l.useIsomorphicLayoutEffect((function(){L.current=s}),[s,L]);var P=function(e){""===e.trim()?O("CLEAR"):O(e!==A||N.current?"CHANGE":"INITIAL_CHANGE",{value:e})};!W||I===x||""===I.trim()&&""===(x||"").trim()||P(I);var F=!s||"NAVIGATING"!==m&&"INTERACTING"!==m?I||x:h||I||x;return n.createElement(a,Object.assign({"aria-activedescendant":h?String(H(h)):void 0,"aria-autocomplete":"both","aria-controls":_},C,{"data-reach-combobox-input":"",ref:y,onBlur:l.wrapEvent(T,B),onChange:l.wrapEvent(E,(function(e){W||P(e.target.value)})),onClick:l.wrapEvent(v,(function(){D.current&&(D.current=!1,g.current.select())})),onFocus:l.wrapEvent(d,(function(){i&&(D.current=!0),V&&"SELECT_WITH_CLICK"!==R&&O("FOCUS")})),onKeyDown:l.wrapEvent(f,k),value:F||""}))})),m=t.forwardRef((function(e,r){var o=e.children,a=e.portal,u=void 0===a||a,i=e.onKeyDown,c=e.onBlur,s=p(e,["children","portal","onKeyDown","onBlur"]),v=t.useContext(S),E=v.inputRef,d=v.isVisible,I=l.useForkedRef(v.popoverRef,r),C=w(),A=U(),N={"data-reach-combobox-popover":"",onKeyDown:l.wrapEvent(i,C),onBlur:l.wrapEvent(c,A),hidden:!d,tabIndex:-1,children:o};return u?n.createElement(T,Object.assign({},s,{ref:I,position:f.positionMatchWidth,targetRef:E},N)):n.createElement("div",Object.assign({ref:I},s,N))})),O=l.forwardRefWithAs((function(e,r){var o=e.persistSelection,a=void 0!==o&&o,u=e.as,i=void 0===u?"ul":u,l=p(e,["persistSelection","as"]),c=t.useContext(S),s=c.listboxId;return a&&(c.persistSelectionRef.current=!0),n.createElement(i,Object.assign({},l,{ref:r,"data-reach-combobox-list":"",role:"listbox",id:s}))})),_=t.forwardRef((function(e,r){var o=e.children,a=e.value,u=e.onClick,i=p(e,["children","value","onClick"]),s=t.useContext(S),v=s.onSelect,E=s.data.navigationValue,f=s.transition,T=t.useRef(null),d=l.useForkedRef(r,T),I=c.useDescendant({context:h,element:T.current,value:a}),C=E===a;return n.createElement(x.Provider,{value:{value:a,index:I}},n.createElement("li",Object.assign({"aria-selected":C},i,{"data-reach-combobox-option":"",ref:d,id:String(H(a)),role:"option","data-highlighted":C?"":void 0,tabIndex:-1,onClick:l.wrapEvent(u,(function(){v&&v(a),f("SELECT_WITH_CLICK",{value:a})})),children:o||n.createElement(L,null)})))}));function L(){var e=t.useContext(x).value,r=t.useContext(S).data.value,o=t.useMemo((function(){return s.findAll({searchWords:v(r||"").split(/\s+/),textToHighlight:e})}),[r,e]);return n.createElement(n.Fragment,null,o.length?o.map((function(t,r){var o=e.slice(t.start,t.end);return n.createElement("span",{key:r,"data-user-value":!!t.highlight||void 0,"data-suggested-value":!t.highlight||void 0},o)})):e)}var V=l.forwardRefWithAs((function(e,r){var o=e.as,a=void 0===o?"button":o,u=e.onClick,i=e.onKeyDown,c=p(e,["as","onClick","onKeyDown"]),s=t.useContext(S),v=s.transition,E=s.state,f=s.listboxId,T=s.isVisible,d=l.useForkedRef(s.buttonRef,r),C=w();return n.createElement(a,Object.assign({"aria-controls":f,"aria-haspopup":"listbox","aria-expanded":T},c,{"data-reach-combobox-button":"",ref:d,onClick:l.wrapEvent(u,(function(){v(E===I?"OPEN_WITH_BUTTON":"CLOSE_WITH_BUTTON")})),onKeyDown:l.wrapEvent(i,C)}))}));function w(){var e=t.useContext(S),n=e.data.navigationValue,r=e.onSelect,o=e.state,a=e.transition,u=e.autocompletePropRef,i=e.persistSelectionRef,l=t.useContext(h).descendants;return function(e){var t=l.findIndex((function(e){return e.value===n}));function c(){return l[0]}function s(){return l[l.length-1]}switch(e.key){case"ArrowDown":if(e.preventDefault(),!l||!l.length)return;if(o===I)a("NAVIGATE",{persistSelection:i.current});else{var v=t===l.length-1?u.current?null:c():l[(t+1)%l.length];a("NAVIGATE",{value:v?v.value:null})}break;case"ArrowUp":if(e.preventDefault(),!l||0===l.length)return;if(o===I)a("NAVIGATE");else{var E=0===t?u.current?null:s():-1===t?s():l[(t-1+l.length)%l.length];a("NAVIGATE",{value:E?E.value:null})}break;case"Home":case"PageUp":if(e.preventDefault(),!l||0===l.length)return;o===I?a("NAVIGATE"):a("NAVIGATE",{value:c().value});break;case"End":case"PageDown":if(e.preventDefault(),!l||0===l.length)return;o===I?a("NAVIGATE"):a("NAVIGATE",{value:s().value});break;case"Escape":o!==I&&a("ESCAPE");break;case"Enter":"NAVIGATING"===o&&null!==n&&(e.preventDefault(),r&&r(n),a("SELECT_WITH_KEYBOARD"))}}}function U(){var e=t.useContext(S),n=e.state,r=e.transition,o=e.popoverRef,a=e.inputRef,u=e.buttonRef;return function(){var e=l.getOwnerDocument(a.current)||document;requestAnimationFrame((function(){e.activeElement!==a.current&&e.activeElement!==u.current&&o.current&&(o.current.contains(e.activeElement)?"INTERACTING"!==n&&r("INTERACT"):r("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

dist/combobox.esm.js

@@ -125,3 +125,2 @@ import React, { useRef, useEffect, useContext, forwardRef, useMemo, useState, useReducer } from 'react';
     case SELECT_WITH_CLICK:
-      event.callback(event.value);
       return _extends({}, nextState, {
@@ -133,3 +132,2 @@ value: event.value,
     case SELECT_WITH_KEYBOARD:
-      event.callback(data.navigationValue || null);
       return _extends({}, nextState, {
@@ -367,3 +365,4 @@ value: data.navigationValue,
 
-  if (isControlled && controlledValue !== value) {
+  if (isControlled && controlledValue !== value && ( // https://github.com/reach/reach-ui/issues/481
+  controlledValue.trim() === "" ? (value || "").trim() !== "" : true)) {
     handleValueChange(controlledValue);
@@ -552,5 +551,5 @@ } // [*]... and when controlled, we don't trigger handleValueChange as the user
   var handleClick = function handleClick() {
+    onSelect && onSelect(value);
     transition(SELECT_WITH_CLICK, {
-      value: value,
-      callback: onSelect
+      value: value
     });
@@ -719,127 +718,153 @@ };
   return function handleKeyDown(event) {
+    var index = options.findIndex(function (_ref7) {
+      var value = _ref7.value;
+      return value === navigationValue;
+    });
+
+    function getNextOption() {
+      var atBottom = index === options.length - 1;
+
+      if (atBottom) {
+        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.
+          return null;
+        } else {
+          // cycle through
+          return getFirstOption();
+        }
+      } else {
+        // Go to the next item in the list
+        return options[(index + 1) % options.length];
+      }
+    }
+
+    function getPreviousOption() {
+      var atTop = index === 0;
+
+      if (atTop) {
+        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.
+          return null;
+        } else {
+          // cycle through
+          return getLastOption();
+        }
+      } else if (index === -1) {
+        // displaying the user's value, so go select the last one
+        return getLastOption();
+      } else {
+        // normal case, select previous
+        return options[(index - 1 + options.length) % options.length];
+      }
+    }
+
+    function getFirstOption() {
+      return options[0];
+    }
+
+    function getLastOption() {
+      return options[options.length - 1];
+    }
+
     switch (event.key) {
       case "ArrowDown":
-        {
-          // 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.
+        // Don't scroll the page
+        event.preventDefault();
 
-          if (!options || options.length === 0) {
-            return;
-          }
+        if (!options || !options.length) {
+          return;
+        }
 
-          if (state === IDLE) {
-            // Opening a closed list
-            transition(NAVIGATE, {
-              persistSelection: persistSelectionRef.current
-            });
-          } else {
-            var index = options.findIndex(function (_ref7) {
-              var value = _ref7.value;
-              return value === navigationValue;
-            });
-            var atBottom = index === options.length - 1;
+        if (state === IDLE) {
+          // Opening a closed list
+          transition(NAVIGATE, {
+            persistSelection: persistSelectionRef.current
+          });
+        } else {
+          var next = getNextOption();
+          transition(NAVIGATE, {
+            value: next ? next.value : null
+          });
+        }
 
-            if (atBottom) {
-              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.
-                transition(NAVIGATE, {
-                  value: null
-                });
-              } else {
-                // cycle through
-                var firstOption = options[0].value;
-                transition(NAVIGATE, {
-                  value: firstOption
-                });
-              }
-            } else {
-              // Go to the next item in the list
-              var nextValue = options[(index + 1) % options.length].value;
-              transition(NAVIGATE, {
-                value: nextValue
-              });
-            }
-          }
-
-          break;
-        }
+        break;
       // A lot of duplicate code with ArrowDown up next, I'm already over it.
 
       case "ArrowUp":
-        {
-          // 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.
+        // Don't scroll the page
+        event.preventDefault();
 
-          if (!options || options.length === 0) {
-            return;
-          }
+        if (!options || options.length === 0) {
+          return;
+        }
 
-          if (state === IDLE) {
-            transition(NAVIGATE);
-          } else {
-            var _index = options.findIndex(function (_ref8) {
-              var value = _ref8.value;
-              return value === navigationValue;
-            });
+        if (state === IDLE) {
+          transition(NAVIGATE);
+        } else {
+          var prev = getPreviousOption();
+          transition(NAVIGATE, {
+            value: prev ? prev.value : null
+          });
+        }
 
-            if (_index === 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.
-                transition(NAVIGATE, {
-                  value: null
-                });
-              } else {
-                // cycle through
-                var lastOption = options[options.length - 1].value;
-                transition(NAVIGATE, {
-                  value: lastOption
-                });
-              }
-            } else if (_index === -1) {
-              // displaying the user's value, so go select the last one
-              var value = options.length ? options[options.length - 1].value : null;
-              transition(NAVIGATE, {
-                value: value
-              });
-            } else {
-              // normal case, select previous
-              var _nextValue = options[(_index - 1 + options.length) % options.length].value;
-              transition(NAVIGATE, {
-                value: _nextValue
-              });
-            }
-          }
+        break;
 
-          break;
+      case "Home":
+      case "PageUp":
+        // Don't scroll the page
+        event.preventDefault();
+
+        if (!options || options.length === 0) {
+          return;
         }
 
-      case "Escape":
-        {
-          if (state !== IDLE) {
-            transition(ESCAPE);
-          }
+        if (state === IDLE) {
+          transition(NAVIGATE);
+        } else {
+          transition(NAVIGATE, {
+            value: getFirstOption().value
+          });
+        }
 
-          break;
+        break;
+
+      case "End":
+      case "PageDown":
+        // Don't scroll the page
+        event.preventDefault();
+
+        if (!options || options.length === 0) {
+          return;
         }
 
+        if (state === IDLE) {
+          transition(NAVIGATE);
+        } else {
+          transition(NAVIGATE, {
+            value: getLastOption().value
+          });
+        }
+
+        break;
+
+      case "Escape":
+        if (state !== IDLE) {
+          transition(ESCAPE);
+        }
+
+        break;
+
       case "Enter":
-        {
-          if (state === NAVIGATING && navigationValue !== null) {
-            // don't want to submit forms
-            event.preventDefault();
-            transition(SELECT_WITH_KEYBOARD, {
-              callback: onSelect
-            });
-          }
+        if (state === NAVIGATING && navigationValue !== null) {
+          // don't want to submit forms
+          event.preventDefault();
+          onSelect && onSelect(navigationValue);
+          transition(SELECT_WITH_KEYBOARD);
+        }
 
-          break;
-        }
+        break;
     }
@@ -846,0 +871,0 @@ };

package.json

 {
   "name": "@reach/combobox",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "description": "Accessible React Combobox (Autocomplete).",
@@ -18,7 +18,7 @@ "author": "React Training <[e-mail]>",
   "dependencies": {
-    "@reach/auto-id": "^0.8.2",
-    "@reach/descendants": "^0.8.4",
-    "@reach/popover": "^0.8.4",
-    "@reach/portal": "^0.8.2",
-    "@reach/utils": "^0.8.4",
+    "@reach/auto-id": "^0.8.5",
+    "@reach/descendants": "^0.8.5",
+    "@reach/popover": "^0.8.5",
+    "@reach/portal": "^0.8.5",
+    "@reach/utils": "^0.8.5",
     "escape-regexp": "0.0.1",
@@ -41,3 +41,3 @@ "highlight-words-core": "1.2.2",
   ],
-  "gitHead": "81f50310879a4d99f3eaeba3cd95a66303e0186c"
+  "gitHead": "ac419cf63d0827016ca448bf95482bcd4c5f879e"
 }

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

240673

increased by0.24%

Lines of code

1929

increased by1.26%

Dependency changes

• Updated@reach/auto-id@^0.8.5

• Updated@reach/descendants@^0.8.5

• Updated@reach/popover@^0.8.5

• Updated@reach/portal@^0.8.5

• Updated@reach/utils@^0.8.5